w2toolbar.items

アイテムオブジェクトの配列です。

Array, default = []

ツールバーの全ての要素(ボタン、ドロップダウンリスト等)を定義します。 オブジェクト作成時またはランタイム時に定義することができます。

$('#toolbar').w2toolbar({
    name  : 'toolbar',
    right : 'text on the right',
    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' }
    ]
});

ランタイム時に.itemsプロパティを変更した場合、w2utils.refresh()メソッドを使ってツールバーを更新する必要があります。 ランタイム時にアイテムを追加/削除したい場合、.add()、.insert()、.remove()メソッドを利用することができます。

アイテムオブジェクトの構造は以下のとおりです。

item: {
    id       : null,    // アイテムのid
    type     : 'button',// アイテムのタイプ。(button, check, radio, drop, menu, break, spacer, html)
    text     : '',      // アイテムの説明。文字列または関数を指定することができます。
    html     : '',      // アイテムのhtmlテキスト。typeがhtmlの場合のみ。文字列または関数を指定することができます。
    tooltip  : null,    // アイテムのツールチップ。文字列または関数を指定することができます。詳細は.tooltipプロパティを参照してください。
    count    : null,    // カウントバッジ。
    hidden   : false,   // アイテムを非表示にするかどうかを指定します。
    disabled : false,   // アイテムを無効化するかどうかを指定します。
    checked  : false,   // アイテムをチェックするかどうかを指定します。
    img      : '',      // アイテムに指定する画像のCSSクラスを指定します。
    icon     : '',      // アイテムに指定するアイコンフォントのCSSクラスを指定します。
    route    : null,    // ルートを指定。/item/:id/detailsといった動的な要素を指定することができます。詳細は.routeDataプロパティを参照してください。
    arrow    : true,    // 下矢印。typeがdropまたは、menuの場合のみ。
    style    : null,    // キャプションの外部CSS。
    color    : null,    // 色。カラーピッカーで使用します。
    transparent: null,  // 透明度のフラグ。t/f(=透明/不透明)。カラーピッカーで使用します。
    group    : null,    // アイテムのグループ名。ラジオボタンで使用します。数値または文字列を指定することができます。
    items    : null,    // メニューのアイテム配列。typeがmenuの場合のみ。
    selected : null,    // menu-checkとmenu-radioの選択された"アイテムのidの配列"のid。
    overlay  : {},      // オーバーレイするための追加パラメータ。ドロップダウンリストで指定することができます。詳細は.overlayプロパティを参照してください。
    onClick  : null,    // このアイテムをクリックした時に発生するイベントハンドラです。
    onRefresh: null     // このアイテムを更新した時に発生するイベントハンドラです。
}

ツールバーには12種類のアイテムタイプがあります。

| item: {
|     id       : '',     // メニュー項目のid。
|     text     : '',     // メニュー項目のテキスト。
|     icon     : '',     // アイコンフォントのCSSクラス。
|     img      : '',     // 画像のCSSクラス。
|     disabled : false,  // メニュー項目を無効にするかどうかを指定します。
|     checked  : false   // アイテムをチェックするかどうかを指定します。
|                        // menu-checkとmenu-radioの場合のみ。
| }

デモ

ツールバーの各種アイテムを表示します。

JavaScript

$('#toolbar').w2toolbar({
  name  : 'mytoolbar',
  items : [
    // ボタン
    { type: 'button', id: 'button', text: 'button' },
    { type: 'break' },
    // チェックボタン
    { type: 'check',  id: 'check1', text: 'check1' },
    { type: 'check',  id: 'check2', text: 'check2' },
    { type: 'break' },
    // ラジオボタン
    { type: 'radio',  id: 'radio1', text: 'radio1', group: 'radio' },
    { type: 'radio',  id: 'radio2', text: 'radio2', group: 'radio' },
    { type: 'radio',  id: 'radio3', text: 'radio3', group: 'radio' },
    { type: 'break' },
    // メニュー
    { type: 'menu',  id: 'menu', text: 'menu',
      items: [
        { id: 'item1', text: 'item1' },
        { id: 'item2', text: 'item2' },
        { id: 'item3', text: 'item3', icon: 'icon-folder' },
        { id: 'item4', text: 'item4', icon: 'icon-page' },
        { id: 'item5', text: 'item5', disabled: true },
      ]
    },
    { type: 'break' },
    // チェックボタンメニュー
    { type: 'menu-check',  id: 'menu-check', text: 'menu-check',
      items: [
        { id: 'item1', text: 'item1' },
        { id: 'item2', text: 'item2' },
        { id: 'item3', text: 'item3', checked: true },
        { id: 'item4', text: 'item4', disabled: true },
        { id: 'item5', text: 'item5', icon: 'icon-page' }, // アイコンは無効になります
      ]
    },
    { type: 'break' },
    // ドロップボックス
    { type: 'drop', id: 'drop', text: 'drop',
      html: '<span>HTMLを表示します。</span>'
    },
    { type: 'break' },
    // カラーピッカー
    { type: 'color',  id: 'color', text: 'color' },
  ],
});