在我的一个项目中,我需要扩展 jQuery-UI 图标的图标调色板。我需要稍大(22x22)和色彩鲜艳的。
所以我看了一下 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>
这是它的外观:
(来源:sakuranohana.org)
我希望铅笔高一些。我在 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 dragonfly 和 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 规则。
我在这里想念什么?
编辑
好吧,在阅读了类选择器部分后,我意识到我的问题是该类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%;
}
一个很小但很重要的变化。