ドキュメントDynamic Media ビューアリファレンスガイド

スピン右ボタン

最終更新日: 2024年7月22日
  • トピック:

作成対象:

  • 開発者
  • ユーザー

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

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

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

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

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

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

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

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

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

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

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

.s7spinviewer .s7spinbuttons .s7panrightbutton {
 position:absolute;
 right: 0px;
 width:28px;
 height:28px;
 background-size:contain;
 }
.s7spinviewer .s7spinbuttons .s7panrightbutton[state='up'] {
background-image:url(images/v2/SpinRightButton_light_up.png);
}
.s7spinviewer .s7spinbuttons .s7panrightbutton[state='over'] {
background-image:url(images/v2/SpinRightButton_light_over.png);
}
.s7spinviewer .s7spinbuttons .s7panrightbutton[state='down'] {
 background-image:url(images/v2/SpinRightButton_light_down.png);
}
.s7spinviewer .s7spinbuttons .s7panrightbutton[state='disabled'] {
 background-image:url(images/v2/SpinRightButton_light_disabled.png);
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8