[Webix]Listコンポーネント入門

最終更新日

webix list view

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

昨日は突然過去を振り返りたくなって別の記事を書いていたためお休みしました。

さて、今回はWebixのListコンポーネントを使ってみます。
WebixのコンポーネントはJavaScriptオブジェクトとして必要な要素を指定してwebix.uiに渡してあげれば、後はWebixが良い感じに表示してくれます。

リストの表示

基本的には、viewプロパティで”list”を指定し、dataプロパティにリストとして表示したいデータ(JSON)を渡してtemplete内で表示する内容の書式を設定すればリストとして表示されます。
templateの中では「#key名#」で渡したデータの値を表示することができます。またHTMLタグも指定可能です。
(なおリストに渡しているtestDataはtestData.js内で宣言し外部スクリプトとして読み込んでいます。データの内容は以下を)

testData.js

example

Horizontalリスト

リストビューではレイアウト方向とスクロール方向を「x軸」に指定するこができます。

example

グルーピング

grouplistビューを利用すると、渡したデータの特定の項目を元にグルーピングしてリストを表示することができます。
この機能を利用するとモバイル向けのスライドメニューなどが簡単に作成することができます。
(タッチイベントにも対応しています)

example

リストのスタイリング

リストビューではtypeプロパティ内で各itemのスタイルなどをカスタマイズすることができます。
template内で使用する、カスタム変数などの設定もtypeプロパティの中で行えます。

備考

webixのコンポーネントは一つ一つが非常に多機能なため、全ての利用法をお伝えすることができません。
公式サイトに非常に充実したサンプルとドキュメントが公開されていますので、興味のある方はそちらを参照してみてください。

document
sample