[Webix]サイドメニュー

最終更新日

webix サイドメニュー

Webix Advent Calendar 2014 9日目の記事です。

今回は管理画面などでよくつかわれるサイドメニューを作ってみます。
Webixでサイドメニューを作成するのはひじょうに簡単でListコンポーネントを少しカスタマイズするだけで作成できます。

サンプル

example

基本的にはリストビューにonプロパティを設定しクリックされた際にtagetViewの値で指定されたidのメインビューを開いているだけです。
webixではコンポーネントにidを指定すれば、$$(“id名”)でコンポーネントを選択し操作することができます。(HTML要素のid属性とは別のものなので注意)
今回の場合mainViewとして五つのtemplateコンポーネントをcellsに配列として渡しています。cellsに渡されたコンポーネントは画面初期表示時にはcells[0]のコンポーネントだけが表示されます。
$(“id名”).show()でcellsの中身を入れ替えることができます。

複雑な例

Webixのレイアウトシステムと組み合わせれば、下記のような複雑な配置も簡単に設定することができます。

example