PlayPause ボタン playpause-button

Last update: Mon Jul 22 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

トピック：

作成対象：

開発者
ユーザー

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

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

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

ボタンの外観は、次の CSS クラスセレクターで制御します。

.s7carouselviewer .s7playpausebutton

CSS プロパティ

説明

天

ビューアの境界線の上から配置します。

right

ビューアの境界線の右側から配置します。

left

ビューアの左側から配置します。

下

ビューアのボーダーの下部から配置します。

幅

ボタンの幅。

高さ

ボタンの高さ。

background-image

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

background-position

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

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

cursor

カーソルの種類。

NOTE

このボタンでは、ボタンの状態に応じて異なるスキンを適用するために使用できる 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);
}

recommendation-more-help

b7426f53-aad9-4c00-83fc-664f30f681e8