左スピンボタン

このボタンをクリックまたはタップすると、メイン表示の画像が左方向にスピンします。 携帯電話では、画面サイズの制限を守るため、このボタンは表示されません。 また、複数次元のスピンセットを使用する場合は、このボタンが非表示になります。 CSSを使用して、ボタンのサイズ設定、スキン表示および配置を行うことができます。

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

ボタンが内部コンテナ(DIV)に追加されます。この内部セレクターは、CSSクラスセレクターを使用して制御します。

.s7mixedmediaviewer .s7spinbuttons

CSSプロパティ

説明

トップ

パディングを含む上の境界線からの位置。

パディングを含む右の境界線からの位置。

パディングを含む左の境界線からの位置。

パディングを含む下の境界線からの位置。

width

ボタンの幅。

height

ボタンの高さ。

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

.s7mixedmediaviewer .s7spinbuttons .s7panleftbutton

CSSプロパティ

説明

トップ

パディングを含む上の境界線からの位置。

パディングを含む右の境界線からの位置。

パディングを含む左の境界線からの位置。

パディングを含む下の境界線からの位置。

width

ボタンの幅。

height

ボタンの高さ。

background-image

ボタンの特定の状態に対して表示する画像。

background-position

CSSスプライトを使用する場合、アートワークスプライト内の位置。

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

メモ

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

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

例 — 28 x 28ピクセルで、内側のコンテナの左端に配置し、ボタンの4つの状態ごとに異なる画像を表示する左へスピンボタンを設定するには、次のように記述します。

.s7mixedmediaviewer .s7spinbuttons .s7panleftbutton { 
 position:absolute; 
 left: 0px; 
 width:28px; 
 height:28px; 
 background-size:contain; 
 } 
.s7mixedmediaviewer .s7spinbuttons .s7panleftbutton[state='up'] { 
background-image:url(images/v2/SpinLeftButton_light_up.png); 
} 
.s7mixedmediaviewer .s7spinbuttons .s7panleftbutton[state='over'] { 
background-image:url(images/v2/SpinLeftButton_light_over.png); 
} 
.s7mixedmediaviewer .s7spinbuttons .s7panleftbutton[state='down'] { 
background-image:url(images/v2/SpinLeftButton_light_down.png); 
} 
.s7mixedmediaviewer .s7spinbuttons .s7panleftbutton[state='disabled'] { 
background-image:url(images/v2/SpinLeftButton_light_disabled.png); 
}

このページ

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now