スピン左ボタン spin-left-button

このボタンをクリックまたはタップすると、メインビューで画像が左にスピンします。 このボタンは、画面の領域を節約するために携帯電話には表示されません。 また、多次元スピンセットを使用すると、ボタンは非表示になります。 CSS を使用して、ボタンのサイズ、スキンおよび位置を設定できます。

スピンボタンの CSS プロパティ

ボタンが、CSS クラスセレクターで DIV 制御される内部コンテナに追加されます。

.s7spinviewer .s7spinbuttons
CSS プロパティ
説明
上部のボーダーから配置(パディングを含む)。
right
パディングを含めて、右側のボーダーから配置します。
left
パディングを含めて、左のボーダーから配置します。
下罫線からパディングを含めて移動します。
ボタンの幅。
高さ
ボタンの高さ。

コンテナ内でのこのボタンの外観は、CSS クラスセレクターで制御します。

.s7spinviewer .s7spinbuttons .s7panleftbutton
CSS プロパティ
説明
上部のボーダーから配置(パディングを含む)。
right
パディングを含めて、右側のボーダーから配置します。
left
パディングを含めて、左のボーダーから配置します。
下罫線からパディングを含めて移動します。
ボタンの幅。
高さ
ボタンの高さ。
background-image
特定のボタン状態に対して表示される画像。
background-position

CSS スプライトを使用する場合、アートワークスプライト内に配置します。

CSS スプライト ージ 参照してください。

NOTE
このボタンでは、ボタンの状態に応じて異なるスキンを適用するために使用できる state 属性セレクターをサポートしています。

ボタンのツールチップはローカライズできます。 詳しくは、 ユーザーインターフェイス要素のローカライゼーションを参照してください。

例 – 28 x 28 ピクセルで、内側のコンテナの左端に配置されるスピン左ボタンを設定する 最後に、は、4 つの異なるボタン状態ごとに異なる画像を表示します。

.s7spinviewer .s7spinbuttons .s7panleftbutton {
 position:absolute;
 left: 0px;
 width:28px;
 height:28px;
 background-size:contain;
 }
.s7spinviewer .s7spinbuttons .s7panleftbutton[state='up'] {
background-image:url(images/v2/SpinLeftButton_light_up.png);
}
.s7spinviewer .s7spinbuttons .s7panleftbutton[state='over'] {
background-image:url(images/v2/SpinLeftButton_light_over.png);
}
.s7spinviewer .s7spinbuttons .s7panleftbutton[state='down'] {
background-image:url(images/v2/SpinLeftButton_light_down.png);
}
.s7spinviewer .s7spinbuttons .s7panleftbutton[state='disabled'] {
background-image:url(images/v2/SpinLeftButton_light_disabled.png);
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8