0

在 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>

其中 'w2ui-icon-plus' 和 w2ui-icon-cross' 是 CSS 类。

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

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

4

3 回答 3

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 以使所有内容看起来都不错，但您应该了解基本概念。

于 2017-03-09T13:32:11.923 回答
0

我有另一种方法只是看这里，代码 css .icona:before and after add to the icon property of w2ui...Bye

在“w2ui”工具栏中添加自定义图标

于 2018-02-17T22:08:30.537 回答
0

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

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{ background:url('icons/youricon2.png') 无重复中心中心；

于 2018-10-31T03:43:37.570 回答