jquery-ui – 如何添加自定义图标到标准的jQuery UI主题?

前端之家收集整理的这篇文章主要介绍了jquery-ui – 如何添加自定义图标到标准的jQuery UI主题?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
可以很容易地使用标准图标集中可用的图标之一:
$("#myButton").button({icons: {primary: "ui-icon-locked"}});

但是如果我想添加一个不是框架图标集的一部分的自己的图标怎么办?

我认为这将是一样容易给它自己的CSS类与背景图像,但是不工作:

.fw-button-edit {
    background-image: url(edit.png);
}

有什么建议么?

解决方法

我也可以推荐:
.ui-button .ui-icon.your-own-custom-class {
    background-image: url(your-path-to-normal-image-file.png);
    width: your-icon-width;
    height: your-icon-height; 
}

.ui-button.ui-state-hover .ui-icon.your-own-custom-class {
    background-image: url(your-path-to-highlighted-image-file.png);
    width: your-icon-width;
    height: your-icon-height; 
}

然后只需键入JS代码

jQuery('selector-to-your-button').button({
        text: false,icons: {
            primary: "you-own-cusom-class"   // Custom icon
        }});

它为我工作,希望它也为你工作!

猜你在找的jQuery相关文章