概略

更新日: 2018-09-07

w2toolbarを使うと、さまざまなボタンや、ドロップダウンストを作成することができます。このツールバーオブジェクトは、ツールバーグリッド内で使用されます。ツールバーには、ボタン、ラジオボタン、チェックボタン、メニュー、ドロップダウンリストをHTMLで定義することができます。

デモ

toolbarの簡単な使い方は以下の通りです。必要最低限のHTML、JavaScriptで表示しています。

HTML

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="http://w2ui.com/src/w2ui-1.4.min.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://w2ui.com/src/w2ui-1.4.min.js"></script>
</head>
<body>
    <div id="myToolbar"></div>
</body>
<script>
$(function () {
    $('#myToolbar').w2toolbar({
        name : 'myToolbar',
        items: [
            { type: 'check',  id: 'item1', caption: 'Check', img: 'icon-add', checked: true },
            { type: 'break' },
            { type: 'menu',   id: 'item2', caption: 'Drop Down', img: 'icon-folder', 
                items: [
                    { text: 'Item 1', img: 'icon-page' }, 
                    { text: 'Item 2', img: 'icon-page' }, 
                    { text: 'Item 3', img: 'icon-page' }
                ]
            },
            { type: 'break' },
            { type: 'radio',  id: 'item3',  group: '1', caption: 'Radio 1', img: 'icon-page' },
            { type: 'radio',  id: 'item4',  group: '1', caption: 'Radio 2', img: 'icon-page' },
            { type: 'spacer' },
            { type: 'button',  id: 'item5',  caption: 'Item 5', img: 'icon-save' }
        ]
    });
});
</script>
</html>

このコンテンツはvitmalinaによるw2ui.toolbarドキュメントを翻訳/改変したものです。