[Webix]HTML要素にWebixコンポーネントを埋め込む

Webix Advent Calendar 2014 ３日目の穴埋め記事です。

WebixではUIをすべてJavaScriptで作成する以外に、HTML要素(主にdiv)を元にコンポーネントを埋め込んで画面を作成することができます。
画面内の一部の要素にWebixをコンポーネントを使用したい場合に便利です。

サンプル

カレンダーコンポーネントとチャートコンポーネントをdiv要素を元に表示します。

<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" href="http://shimz.me/libs/webix/codebase/webix.css" type="text/css" charset="utf-8">
	<script src="http://shimz.me/libs/webix/codebase/webix.js" type="text/javascript" charset="utf-8"></script>
	<style>
	#chart {
		position: absolute;
		top:10px;
		left: 10px;
		width:600px;
		height: 250px;
		margin: 20px;
	}
	#calendar {
		position: absolute;
		top:300px;
		left: 650px;
	}
	</style>
</head>
<body>
	<div id="calendar"></div>

	<div id="chart"></div>


</body> 
</html>

<!DOCTYPE html>

<html>

<head>

<style>

#chart {

position: absolute;

top:10px;

left: 10px;

width:600px;

height: 250px;

margin: 20px;

}

#calendar {

position: absolute;

top:300px;

left: 650px;

}

</style>

</head>

<body>

</body>

</html>

コンポーネントをHTML要素に結びつけるのにはcontainerプロパティを使用します。
束縛したいHTML要素のID属性値を指定すればコンポーネントが埋め込まれます。

//カレンダーコンポーネントをdiv#calendarに埋め込む	
webix.ui({
	container:"calendar",
	view:"calendar",
	weekHeader:true,
	date:new Date(2012,3,16),
	events:webix.Date.isHoliday,
	timepicker:true
});
	

//chartview用データセット
var dataset = [
	{ id:1, sales:20, year:"02"},
	{ id:2, sales:55, year:"03"},
	{ id:3, sales:40, year:"04"},
	{ id:4, sales:78, year:"05"},
	{ id:5, sales:61, year:"06"},
	{ id:6, sales:35, year:"07"},
	{ id:7, sales:80, year:"08"},
	{ id:8, sales:50, year:"09"},
	{ id:9, sales:65, year:"10"},
	{ id:10, sales:59, year:"11"}
];

//チャートコンポーネントをdiv#chartに埋め込む	
webix.ui({
	container:"chart",
	view:"chart",
	type:"line",
	value:"#sales#",
	item:{
		borderColor: "#1293f8",
		color: "#ffffff"
	},
	line:{
		color:"#1293f8",
		width:3
	},
	xAxis:{
		template:"'#year#"
	},
	offset:0,
	yAxis:{
		start:0,
		end:100,
		step:10,
		template:function(obj){
			return (obj%20?"":obj)
		}
	},
	data: dataset
});

//カレンダーコンポーネントをdiv#calendarに埋め込む

webix.ui({

container:"calendar",

view:"calendar",

weekHeader:true,

date:new Date(2012,3,16),

events:webix.Date.isHoliday,

timepicker:true

});

//chartview用データセット

var dataset = [

{ id:1, sales:20, year:"02"},

{ id:2, sales:55, year:"03"},

{ id:3, sales:40, year:"04"},

{ id:4, sales:78, year:"05"},

{ id:5, sales:61, year:"06"},

{ id:6, sales:35, year:"07"},

{ id:7, sales:80, year:"08"},

{ id:8, sales:50, year:"09"},

{ id:9, sales:65, year:"10"},

{ id:10, sales:59, year:"11"}

];

//チャートコンポーネントをdiv#chartに埋め込む

webix.ui({

container:"chart",

view:"chart",

type:"line",

value:"#sales#",

item:{

borderColor: "#1293f8",

color: "#ffffff"

line:{

color:"#1293f8",

width:3

xAxis:{

template:"'#year#"

offset:0,

yAxis:{

start:0,

end:100,

step:10,

template:function(obj){

return (obj%20?"":obj)

}

data: dataset

});

サンプル

投稿者: shimizu