可變卷

可變音量控制最初顯示為一個按鈕,允許用戶將視頻播放器聲音靜音或取消靜音。

當用戶滾過按鈕時,會出現一個滑塊,允許用戶設定音量。 可變音量控制項可以通過CSS相對於包含它的控制欄的大小、外觀和位置。

可變體積塊區域的外觀由以下CSS類選擇器控制:

.s7mixedmediaviewer .s7mutablevolume

可變卷的CSS屬性

頂部

從上邊框定位,包括填充。

右側

從右邊框定位,包括填充。

width

可變音量控制項的寬度。

height

可變音量控制項的高度。

背景色

可變音量控制項的顏色。

靜音/取消靜音按鈕外觀由以下CSS類選擇器控制:

.s7mixedmediaviewer .s7mutablevolume .s7mutebutton

您可以控制每個按鈕狀態的背景影像。 按鈕的大小繼承自卷控制項的大小。

按鈕影像的CSS屬性

背景影像

為給定按鈕狀態顯示的影像。

背景位置

如果使用CSS浮雕,則在圖稿浮雕內定位。

請參閱 CSS繁體

注意

此按鈕支援 stateselected 屬性選擇器,可用於將不同的外觀應用於不同的按鈕狀態。 特別是, selected='true' 對應於「靜音」狀態 selected='false' 對應於「未靜音」狀態。

垂直卷欄區域由以下CSS類選擇器控制:

.s7mixedmediaviewer .s7mutablevolume .s7verticalvolume

垂直體積塊區域的CSS屬性

背景色

垂直體積塊的背景顏色。

寬度

垂直體積塊的寬度。

高度

垂直體積塊的高度。

垂直卷控制項內的磁軌由以下CSS類選擇器控制:

.s7mixedmediaviewer .s7mutablevolume .s7verticalvolume .s7track
.s7mixedmediaviewer .s7mutablevolume .s7verticalvolume .s7filledtrack

垂直卷控制項的CSS屬性

背景色

垂直音量控制項的背景顏色。

寬度

垂直音量控制項的寬度。

高度

垂直體積塊控制項的高度。

垂直卷旋鈕由以下CSS類選擇器控制:

.s7mixedmediaviewer .s7mutablevolume .s7verticalvolume .s7knob

垂直音量控制旋鈕的CSS屬性

背景影像

垂直音量控制旋鈕圖稿。

背景位置

如果使用CSS浮雕,則在圖稿浮雕內定位。

請參閱 CSS繁體

寬度

垂直音量控制旋鈕的寬度。

高度

垂直音量控制旋鈕的高度。

左側

垂直音量控制旋鈕的水準位置。

按鈕工具提示可以本地化。 請參閱 用戶介面元素的本地化 的子菜單。

範例

設定一個靜音按鈕,該按鈕為32 x 32像素,從頂部放置6像素,從控制欄的右邊緣設定38像素。 選擇或不選擇時,為四個不同按鈕狀態中的每個狀態顯示不同的影像。

.s7mixedmediaviewer .s7mutablevolume {
top:6px;
right:38px;
width:32px;
height:32px;
}
.s7mixedmediaviewer .s7mutablevolume .s7mutebutton[selected='true'][state='up'] {
background-image:url(images/mute_up.png);
}
.s7mixedmediaviewer .s7mutablevolume .s7mutebutton[selected='true'][state='over'] {
background-image:url(images/mute_over.png);
}
.s7mixedmediaviewer .s7mutablevolume .s7mutebutton[selected='true'][state='down'] {
background-image:url(images/mute_down.png);
}
.s7mixedmediaviewer .s7mutablevolume .s7mutebutton[selected='true'][state='disabled'] {
background-image:url(images/mute_disabled.png);
}
.s7mixedmediaviewer .s7mutablevolume .s7mutebutton[selected='false'][state='up'] {
background-image:url(images/unmute_up.png);
}
.s7mixedmediaviewer .s7mutablevolume .s7mutebutton[selected='false'][state='over'] {
background-image:url(images/unmute_over.png);
}
.s7mixedmediaviewer .s7mutablevolume .s7mutebutton[selected='false'][state='down'] {
background-image:url(images/unmute_down.png);
}
.s7mixedmediaviewer .s7mutablevolume .s7mutebutton[selected='false'][state='disabled'] {
background-image:url(images/unmute_disabled.png);
}

下面是如何在可變音量控制項中設定音量滑塊樣式的示例。

.s7mixedmediaviewer .s7mutablevolume .s7verticalvolume {
width:36px;
height:83px;
left:0px;
background-color:#dddddd;
}
.s7mixedmediaviewer .s7mutablevolume .s7verticalvolume .s7track {
top:11px;
left:14px;
width:10px;
height:63px;
background-color:#666666;
}
.s7mixedmediaviewer .s7mutablevolume .s7verticalvolume .s7filledtrack {
width:10px;
background-color:#ababab;
}
.s7mixedmediaviewer .s7mutablevolume .s7verticalvolume .s7knob {
width:18px;
height:10px;
left:9px;
background-image:url(images/volumeKnob.png);
}

本頁內容