在我的一個項目中,我需要擴展jQuery-UI圖標的圖標調色板。我需要稍大(22x22)和豐富多彩的。擴展jQuery-UI的圖標
所以我看了看jQuery-UI如何創建圖標,並對我的圖標做了同樣的操作。我希望我的「擴展名」儘可能使用jQuery-UI-ish,所以我開始重寫一些css類。我的想法是
<div class="ui-rw-icon">
<span class="ui-icon ui-icon-pencil"></span>
</div>
使用ui-rw-icon
(或ui-rw-icon-color
的彩色圖標)類包裝jQuery的UI與我可以控制的CSS行爲圖標類。我的css文件具有以下內容:
.ui-rw-icon .ui-icon {
width: 22px;
height: 22px;
background-image: url(images/ui-rw-icons_grayscale_246x246.png);
}
.ui-state-default .ui-rw-icon .ui-icon { background-image: url(images/ui-rw-icons_grayscale_pale_246x246.png); }
.ui-state-hover .ui-rw-icon .ui-icon { background-image: url(images/ui-rw-icons_grayscale_246x246.png); }
.ui-rw-icon-color .ui-icon { width: 22px; height: 22px; background-image: url(images/ui-rw-icons_color_246x246.png); }
.ui-state-default .ui-rw-icon-color .ui-icon { background-image: url(images/ui-rw-icons_color_pale_246x246.png); }
.ui-state-hover .ui-rw-icon-color .ui-icon { background-image: url(images/ui-rw-icons_color_246x246.png); }
/* positioning */
.ui-rw-icon-color .ui-icon-pencil, .ui-rw-icon .ui-icon-pencil { background-position: 0 0; }
.ui-rw-icon-color .ui-icon-remove, .ui-rw-icon .ui-icon-remove { background-position: -32px 0; }
這工作正常,我的圖標顯示。唯一的問題是,圖標比jQuery-UI的圖標大6個像素,有時候我想重新定位它們,以便它們更好地適應。例如這裏
<button name="pencil" class="menubar-button ui-rw-icon" id="menubar-meassure">Measures</button>
<button name="script" class="menubar-button" id="menubar-newmeasure">New Measure</button>
<script>
$('.menubar-button').each(function() {
$(this).button({
icons: {
primary: "ui-icon-" + $(this).attr("name")
}
})
});
</script>
這是它的外觀:
http://sakuranohana.org/buttons.png
我想鉛筆是一些像素較高。我發現,控制按鈕內部的位置上jQuery的UI的CSS文件中的規則:
.ui-button-icon-only .ui-icon,
.ui-button-text-icon-primary .ui-icon,
.ui-button-text-icon-secondary .ui-icon,
.ui-button-text-icons .ui-icon,
.ui-button-icons-only .ui-icon {
position: absolute;
top: 50%;
margin-top: -8px;
}
所以我想,因爲我與background-image
屬性做了我可以做同樣的位置:
.ui-rw-icon .ui-button-icon-only .ui-icon,
.ui-rw-icon .ui-button-text-icon-primary .ui-icon,
.ui-rw-icon .ui-button-text-icon-secondary .ui-icon,
.ui-rw-icon .ui-button-text-icons .ui-icon,
.ui-rw-icon .ui-button-icons-only .ui-icon {
top: 40%;
}
但這不起作用。 Opera蜻蜓和Firebug都告訴我,定位規則來自jquery-ui-1.9.0.custom.css
而不是我的rw-ui.css
。 button()
函數創建了這段代碼:
<button name="pencil" class="menubar-button ui-rw-icon ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary ui-state-focus" id="menubar-" role="button" aria-disabled="false">
<span class="ui-button-icon-primary ui-icon ui-icon-pencil"></span>
<span class="ui-button-text">Measures</span>
</button>
我不明白爲什麼我的css類被忽略。我嘗試使用CSS選擇器,但他們也沒有幫助。在嘗試擴展對象具有ui-state-hover
的行爲時,我遇到了類似的問題,我無法覆蓋jQuery-UI的css規則。
我在這裏錯過了什麼?
編輯
很好,看完Class Selectors部分後,我意識到,我的問題是,類ui-button-text-icon-primary
是在同一組類爲ui-rw-icon
因此選擇.ui-rw-icon .ui-button-text-icon-primary .ui-icon
不起作用。但是,這有助於:
.ui-rw-icon.ui-button-icon-only .ui-icon,
.ui-rw-icon.ui-button-text-icon-primary .ui-icon,
.ui-rw-icon.ui-button-text-icon-secondary .ui-icon,
.ui-rw-icon.ui-button-text-icons .ui-icon,
.ui-rw-icon.ui-button-icons-only .ui-icon {
top: 40%;
}
一個小改變,但重要的一個。