PlayPauseボタン

再生/一時停止ボタンを使用すると、カルーセル自動再生動作を一時停止または再開できます。

このボタンは、CarouselViewer.autoplayパラメーターが1に設定されている場合にのみ表示されます。それ以外の場合は、非表示になります。 CSSを使用して、このボタンのサイズ、スキン、およびこのボタンを含むコントロールバーに対する位置を指定できます。

メインビューア領域のCSSプロパティ

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

.s7carouselviewer .s7playpausebutton

CSSプロパティ

説明

トップ

ビューアの境界線の上からの位置。

右

ビューアの境界線の右側からの位置。

左

ビューアの左からの位置。

下

ビューアの境界線の下端からの位置。

width

ボタンの幅。

height

ボタンの高さ。

background-image

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

background-position

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

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

cursor

カーソルタイプ。

メモ

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

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

例として、28 x 28ピクセルの再生一時停止ボタンを設定するとします。 ボタンをビューアの下端から17ピクセル、左端から12ピクセルの位置に配置します。 また、選択時または未選択時の4つのボタンの状態ごとに異なる画像を表示する必要があります。

.s7carouselviewer .s7playpausebutton {
bottom:17px;
left:12px;
width:28px;
height:28px;
}
.s7carouselviewer .s7playpausebutton[selected='true'][state='up'] {
  background-image:url(images/playBtn_up.png);
}
.s7carouselviewer .s7playpausebutton[selected='true'][state='over'] {
background-image:url(images/playBtn_over.png);
}
.s7carouselviewer .s7playpausebutton[selected='true'][state='down'] {
background-image:url(images/playBtn_down.png);
}
.s7carouselviewer .s7playpausebutton[selected='true'][state='disabled'] {
background-image:url(images/playBtn_disabled.png);
}
.s7carouselviewer .s7playpausebutton[selected='false'][state='up'] {
background-image:url(images/pauseBtn_up.png);
}
.s7carouselviewer .s7playpausebutton[selected='false'][state='over'] {
background-image:url(images/pauseBtn_over.png);
}
.s7carouselviewer .s7playpausebutton[selected='false'][state='down'] {
background-image:url(images/pauseBtn_down.png);
}

このページ