最近、久しぶりにwebixを使う機会があったため、サンプルを作成しました。
作成したサンプルは、github に上げておきました。
webページ
サンプルコード
サンプルコードを上げた github の URL はこれです。
コードの中身は以下の通りです。
index.html
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="//cdn.webix.com/edge/webix.css" type="text/css">
<script src="./lib/webix.js" type="text/javascript"></script>
<script src="indexPage.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
webix.ready(function () { loadMainPage() });
</script>
</body>
</html>
indexPage.js
function loadMainPage() {
webix.ui({
cols: [{
rows: [{
view: "template",
type: "header",
template: "list title",
css: { "background-color": "#adcbd9" }
}, {
view: "list",
id: "list_1",
template: "#title#",
select: true,
data: [
{ id: 1, title: "dummy 1 - 1 " },
]
}, {
view: "button",
value: "output message",
click: function () {
webix.message("click_button_a");
}
}]
}, {
view: "list",
template: "#title#",
select: true,
data: [
{ id: 1, title: "dummy 1" },
{ id: 2, title: "dummy 2" },
]
}]
});
for (let i = 0; i < 100; i++) {
$$("list_1").add({
id: "data_" + i,
title: "dummy_" + i
})
}
}
解説
重要だと感じる箇所だけ、ざっくりとメモっておきます。
・webix.ui()でテンプレートに沿ったJSONを読み込むことで、画面上にデザインが表示される。
・横並びにしたい場合はcols:[]に、縦並びはrows:[]に格納する。
・list 表示の項目はview: "list"で設定する。（下記を参照）
・各要素を取得したい場合は$$( 要素のid )で取得できる。
参照
今回のサンプル作成に使用したリンクです。
cdn（cdn で読み込むと、一部文字化けでエラーになる...?）
webix 公式ページ