Question

在w2ui工具栏项目中，当您创建时，您可以为您的图标指定css类。如下例所示：

<script type="text/javascript">
$(function () {
    var btnCount = 0;
    $('#toolbar').w2toolbar({
        name: 'toolbar',
        items: [
            { type: 'button', id: 'append', text: 'Append', icon: 'w2ui-icon-plus' },
            { type: 'button', id: 'insert', text: 'Insert', icon: 'w2ui-icon-cross' }
        ],
        onClick: 
            //Some Code
});</script>

在哪里＆＃39; w2ui-icon-plus＆＃39;和w2ui-icon-cross＆＃39;是CSS类。

但是，这意味着您必须为该图标定义CSS类。如何仅通过imagem URL设置图标？

因为我可以拥有动态图像，所以我无法为所有这些创建CSS类。

Answer 1

目前无法做到。

您最好的选择是识别您想要使用JQuery操作的工具栏按钮并更改背景图片。

这是一个更改第一个按钮的背景图像的示例：

$(".w2ui-tb-image").first().css({
    "background-image": "url(http://lorempixel.com/output/animals-q-c-16-16-1.jpg)"
});

工作小提琴：http://jsfiddle.net/6wkunhz7/

从这里取得的小提琴基本代码：http://w2ui.com/web/demos/#!toolbar/toolbar-1

你可能需要更多地调整CSS，使一切看起来不错，但你应该得到基本的想法。

Answer 2

我有另一种方法只看这里，代码css .icona：添加到w2ui的图标属性之前和之后...再见

Add custom icons in 'w2ui' toolbar

Answer 3

作为代码，您可以通过以下方式修改或更改图标：

mtoolbar = w2ui.grid.toolbar;
mtoolbar.set("append",{icon: '', img:'icon-append'});
mtoolbar.set("insert",{icon: '', img:'icon-other'});
mtoolbar.refresh(); //this line may not be required, please test.

icon-save和icon-man是css类，应采用这种格式（可能是icon类的通用格式）。

.icon-append {       background：url（'icons / youricon1.png'）无重复中心中心；   }

.icon-other {   背景：url（'icons / youricon2.png'）无重复中心；

w2ui工具栏项目 - 有没有办法通过URL添加自定义图标？

3 个答案: