右スピンボタン spin-right-button

このボタンを選択すると、メインビューの右に画像が回転します。 このボタンは、画面の不動産を保存するために携帯電話には表示されません。 また、多次元スピンセットを使用すると、ボタンは非表示になります。 CSSを使用して、ボタンのサイズ、スキン、位置を調整できます。

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

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

.s7mixedmediaviewer .s7spinbuttons
CSS プロパティ
説明
上位
パディングを含む上部境界線からの位置。
右
パディングを含む右端からの位置。
さんがを残しました
パディングを含む左端からの位置。
下
パディングを含む下部境界線からの位置。
幅
ボタンの幅。
の高さ
ボタンの高さ。

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

.s7mixedmediaviewer .s7spinbuttons .s7panrightbutton
CSS プロパティ
説明
上位
パディングを含む上部境界線からの位置。
右
パディングを含む右端からの位置。
さんがを残しました
パディングを含む左端からの位置。
下
パディングを含む下部境界線からの位置。
幅
ボタンの幅。
の高さ
ボタンの高さ。
背景画像
特定のボタン状態に対して表示される画像。
background-position

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

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

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

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

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

.s7mixedmediaviewer .s7spinbuttons .s7panrightbutton {
 position:absolute;
 right: 0px;
 width:28px;
 height:28px;
 background-size:contain;
 }
.s7mixedmediaviewer .s7spinbuttons .s7panrightbutton[state='up'] {
background-image:url(images/v2/SpinRightButton_light_up.png);
}
.s7mixedmediaviewer .s7spinbuttons .s7panrightbutton[state='over'] {
background-image:url(images/v2/SpinRightButton_light_over.png);
}
.s7mixedmediaviewer .s7spinbuttons .s7panrightbutton[state='down'] {
 background-image:url(images/v2/SpinRightButton_light_down.png);
}
.s7mixedmediaviewer .s7spinbuttons .s7panrightbutton[state='disabled'] {
 background-image:url(images/v2/SpinRightButton_light_disabled.png);
}
recommendation-more-help
dynamic-media-developer-resources-help-aem-viewers-ref