w2ui - панель смены кнопки изображение при нажатии

Question

Я использую w2ui. У меня есть панель инструментов с одной кнопкой. Эта кнопка имеет значок-изображение «icon-delete».

Когда я нажимаю на кнопку, я хочу, чтобы она меняла значок-изображение на «значок-добавить», но мой код не работает.

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

Answer 1

Я создал скрытую кнопку «показать» с изображением «icon-add». , когда нажата кнопка «скрыть», она скрывается и отображается кнопка «показать».

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

      } 
     } 

Answer 2

Вы можете использовать метод toolbar.set() для обновления значка кнопки панели инструментов. Так что в вашем случае OnClick сделать следующее:

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

Подробнее здесь: http://w2ui.com/web/docs/w2toolbar.set

Answer 3

Я думаю, что вы пропали без вести линию обновления в оригинальном подходе. Вот пример, который сработал для меня. Я добавил еще одну часть

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