2013-08-30 56 views
2

我正在使用w2ui。我有一个按钮的工具栏。此按钮具有图标图像“图标删除”。w2ui - 单击工具栏上的更改按钮图像

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

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

回答

1

我用“图标添加”图像创建了一个隐藏的按钮“显示”。当按钮“隐藏”被点击时,它被隐藏并显示按钮“显示”。

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'); 
             }      

      } 
     } 
5

您可以使用toolbar.set()方法更新工具栏按钮图标。因此,在您onClick事件做到以下几点:

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

查看更多在这里:http://w2ui.com/web/docs/w2toolbar.set

0

我觉得你失踪在你原来的做法刷新线。这是一个适合我的例子。我添加了其他部分

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'); 
}