w2ui-单击时工具栏更改按钮图像

w2ui - toolbar change button image on click

本文关键字：按钮 图像 工具栏 单击 w2ui-      更新时间：2023-09-26

我正在使用w2ui。我有一个带一个按钮的工具栏。此按钮具有图标图像"图标删除"。

当我点击按钮时，我希望它将图标图像更改为"图标添加"，但我的代码不起作用。

toolbar: {
    items: [{
        type: 'button',
        id: 'hide',
        caption: 'Menü',
        img: 'icon-delete'
    }],
    onClick: function (target, data) {
        if (target == 'hide') {
            this.items.img('icon-add');
        }
    }
}

您可以使用toolbar.set（）方法更新工具栏按钮图标。因此，在您的onClick事件中，请执行以下操作：

onClick: function (target, data) {
   this.set(target, { icon: 'new_icon' });
}

点击此处查看更多信息：http://w2ui.com/web/docs/w2toolbar.set

我创建了一个带有"图标添加"图像的隐藏按钮"show"。当单击按钮"隐藏"时，它将被隐藏，而按钮"显示"将被显示。

toolbar: {
            name: 'toolbar',
            items: [
                { type: 'button',  id: 'hide', caption: 'Menü', img: 'icon-delete' },
                { type: 'button',  id: 'show', hidden: 'true', caption: 'Menü', img: 'icon-add' }
            ],
            onClick: function (target, data) {
                if (target == 'hide' ) {w2ui['layout'].toggle('left', window.instant);
                                        this.hide('hide');
                                        this.show('show');
                                        }
                if (target == 'show' ) {w2ui['layout'].toggle('left', window.instant);
                                        this.hide('show');
                                        this.show('hide');
                                        }                       
            }
        }

我认为您在最初的方法中缺少了刷新行。这是一个对我有用的例子。我添加了一个其他部分

if (event.target == 'hide') {
   if (this.items[0].icon == 'icon-delete') {
     this.items[0].icon = 'icon-add';
     //do something code
   } else {
     this.items[0].icon = 'icon-delete';
     //do something else code
   }
   w2ui['toolbar'].refresh('hide');
}
相关文章：