w2toolbar.set

set(id, item)

idを指定してitemオブジェクトを拡張します。 戻り値はbooleanです。

id: string

拡張するアイテムのid。

item: object

拡張する内容。

説明

第1引数のidは、ツールバー生成時に指定したアイテムのidです。.items配列には全てのツールバーアイテムが格納されています。 アイテムはitemオブジェクトで置換されるわけではなく、拡張されます。 ランタイム時に.itemsプロパティを変更した場合、w2utils.refresh()メソッドを使ってツールバーを更新する必要があります。 ツールバーが正常に拡張された場合はtrue、それ以外はfalseを返します。

ツールバーが以下のように定義されている場合、

$('#toolbar').w2toolbar({
    name  : 'toolbar',
    items : [
        { type: 'check',  id: 'item1', text: 'Check', img: 'icon-page', checked: true },
        { type: 'radio',  id: 'item3',  group: '1', text: 'Radio 1', img: 'icon-add' },
        { type: 'radio',  id: 'item4',  group: '1', text: 'Radio 2', img: 'icon-add' },
        { type: 'menu',   id: 'item5', text: 'Drop Down',
            items: [
                { id: 'id1', text: 'menu 1' },
                { id: 'id2', text: 'menu 2' },
                { id: 'id3', text: 'menu 3' },
            ]
        }
    ]
});

以下のように指定することができます。

w2ui['toolbar'].set('item3', { text: 'check 2' });
w2ui['toolbar'].refresh();

メニューのアイテムを指定することもできます。

w2ui['toolbar'].set('item5:id2', { text: 'menu 22' });

デモ

ボタンをクリックすると、'check1'をメニューに変更します。

JavaScript

$('#toolbar').w2toolbar({
  name  : 'mytoolbar',
  items : [
    { type: 'check',  id: 'item1', text: 'check1' },
    { type: 'check',  id: 'item2', text: 'check2' },
    { type: 'check',  id: 'item3', text: 'check3' },
  ],
});

$('#get-result').on('click', function(){
  w2ui['mytoolbar'].set('item1',
    { type: 'menu',
      items: [
        { id: 'menu-item1'},
        { id: 'menu-item2'},
        { id: 'menu-item3'},
        { id: 'menu-item4'}
      ]
    }
  );
});

HTML

<button id="get-result">実行</button>
<div>
  <span id="result"></span>
</div>
<div id="toolbar"></div>