Question

在我的一个项目中，我需要扩展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>

它的外观如下：

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 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规则。

我在这里缺少什么？

修改

好吧，在阅读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%;
}

一个微小的变化，但重要的变化。

Answer 1

要使自定义图标生效，应调用css文件在jquery ui css之后。
如果您的样式仍未应用，请在定义CSS路径时尝试升级，即如果您的HTML为：
```
<div id="menubar">
    <button id="measures">Measures</button>
</div>
```

然后你的风格应该是：

    #menubar .ui-rw-icon.ui-button-icon-only .ui-icon,
    #menubar .ui-rw-icon.ui-button-text-icon-primary .ui-icon,
    #menubar .ui-rw-icon.ui-button-text-icon-secondary .ui-icon,
    #menubar .ui-rw-icon.ui-button-text-icons .ui-icon,
    #menubar .ui-rw-icon.ui-button-icons-only .ui-icon {
         top: 40%;
    }

扩展jQuery-UI的图标

1 个答案: