可變卷

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

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

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

.s7mixedmediaviewer .s7mutablevolume

可變卷的CSS屬性

頂部

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

右側

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

width

可變音量控制項的寬度。

height

可變音量控制項的高度。

背景色

可變音量控制項的顏色。

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

.s7mixedmediaviewer .s7mutablevolume .s7mutebutton

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

按鈕影像的CSS屬性

背景影像

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

背景位置

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

請參閱 CSS繁體 。

注意

此按鈕支援 state 和 selected 屬性選擇器，可用於將不同的外觀應用於不同的按鈕狀態。 特別是， 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);
}

本頁內容