w2toolbar.scroll

scroll(direction)

アイテムがツールバーから溢れた場合にスクロールします。 戻り値はundefinedです。

direction: string

スクロール方向を指定します。

説明

アイテムがツールバーの表示幅よりも大きい場合に、 ツールバーにスクロールが表示されます。 引数のdirectionにはleftまたはrightを指定することができます。

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

$('#toolbar').w2toolbar({
    name  : 'toolbar',
    items : [
        { type: 'check',  id: 'item1', text: 'Check', img: 'icon-page', checked: true,
            tooltip: 'Check button'
        },
        { type: 'radio',  id: 'item3',  group: '1', text: 'R-1', img: 'icon-add', hidden: true },
        { type: 'radio',  id: 'item4',  group: '1', text: 'R-2', img: 'icon-add' }
    ]
});

以下のように指定します。

w2ui['toolbar'].scroll('right');

デモ

ボタンをクリックすると、ツールバーを右にスクロールします。

JavaScript

$('#toolbar').w2toolbar({
  name  : 'mytoolbar',
  items : [
    { type: 'check',  id: 'item1', text: 'check1', icon: 'icon-file' },
    { type: 'check',  id: 'item2', text: 'check2', icon: 'icon-file' },
    { type: 'check',  id: 'item3', text: 'check3', icon: 'icon-file' },
    { type: 'check',  id: 'item4', text: 'check4', icon: 'icon-file' },
    { type: 'check',  id: 'item5', text: 'check5', icon: 'icon-file' },
    { type: 'check',  id: 'item6', text: 'check6', icon: 'icon-file' },
    { type: 'check',  id: 'item7', text: 'check7', icon: 'icon-file' },
    { type: 'check',  id: 'item8', text: 'check8', icon: 'icon-file' },
    { type: 'check',  id: 'item9', text: 'check9', icon: 'icon-file' },
    { type: 'check',  id: 'item10', text: 'check10', icon: 'icon-file' },
    { type: 'check',  id: 'item11', text: 'check11', icon: 'icon-file' },
    { type: 'check',  id: 'item12', text: 'check12', icon: 'icon-file' },
  ],
});

$('#get-result').on('click', function(){
  var result = w2ui['mytoolbar'].scroll('right');
});

HTML

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