w2toolbar.insert

insert(before, items)

beforeで指定したidのアイテムの前(左側)にアイテムを追加します。 戻り値はundefinedです。

before: string

このidのアイテムの前(左側)に追加します。

items: object, array

追加するアイテム。

説明

id=beforeの前にアイテムを追加します。 beforeがnullの場合、ツールバーの末尾(右端)に追加します。 第2引数のitemsは、オブジェクトまたは、オブジェクトの配列を指定します。 単一のオブジェクトの場合、.items配列に追加するアイテムを表します。 オブジェクト配列の場合、配列の各要素は別々のアイテム要素として扱います。

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

$('#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' }
    ]
});

以下のようにアイテムを追加することができます。

w2ui['toolbar'].insert('item3', { type: 'check',  id: 'item31',  text: 'Check 2', img: 'icon-page' });
// または
w2ui['toolbar'].insert('item3', [
    { type: 'radio',  id: 'item5',  group: '1', text: 'Radio 5', img: 'icon-add' },
    { type: 'radio',  id: 'item6',  group: '1', text: 'Radio 6', img: 'icon-add' },
    { type: 'radio',  id: 'item7',  group: '1', text: 'Radio 7', img: 'icon-add' }
]);

デモ

ボタンをクリックすると、'check2'の前に新しいアイテムが追加されます。

JavaScript

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

$('#get-result').on('click', function(){
  w2ui['mytoolbar'].insert('item2', [
    { type: 'radio',  id: 'item5',  group: '1', text: 'Radio 1', img: 'icon-add' },
    { type: 'radio',  id: 'item6',  group: '1', text: 'Radio 2', img: 'icon-add' },
  ]);
});

HTML

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