Kendo UI Mobile base
HTML
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.mobile.all.min.css">
<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<div data-role="view" id="main" data-title="Test" data-init="bindForm ">
<header data-role="header">
<div data-role="navbar">
<span data-role="view-title">Test</span>
</div>
</header>
<ul id="menu-list1"></ul>
<ul id="menu-list2"></ul>
</div>
<script type="text/x-kendo-template" id="menuListTemplate1">
<span class="spanContext">${CustomerName}</span>
<a data-link="${MeterID}">${MeterID}</a><a data-role="detailbutton" data-style="detaildisclose"/>
</script>
<script type="text/x-kendo-template" id="menuListTemplate2">
<ul>
<li>
<span class="spanContext">${CustomerName}</span>
</li>
<li>
<a data-link="${MeterID}">${MeterID}</a><a data-role="detailbutton" data-style="detaildisclose"/>
</li>
</ul>
</script>
spanContext
JavaScript
$(function () {
app = new kendo.mobile.Application(document.body, { transition: "slide", platform: "ios" });
});
var bindForm = function(){
var dataSourceOption = {
transport: {
read: function (options) {
options.success({data:[
{
"MeterID": "00113711112",
"CustomerName": "晶華國際酒店股份有限公司"
},
{
"MeterID": "00120769116",
"CustomerName": "中 央 大 樓 管 理 處"
}
]});
}
},
schema: {
data: "data",
model:{
"MeterID":{type:"string"},
"CustomerName":{type:"string"}
}
}
},
menuDataSource1 = kendo.data.DataSource.create(dataSourceOption ),
menuDataSource2 = kendo.data.DataSource.create(dataSourceOption );
$("#menu-list1").kendoMobileListView({
dataSource: menuDataSource1,
autoBind: true,
template: $("#menuListTemplate1").html(),
fixedHeaders: true,
style:'inset',
click: function (e) {
alert(e.dataItem);
}
});
$("#menu-list2").kendoMobileListView({
dataSource: menuDataSource2,
autoBind: true,
template: $("#menuListTemplate2").html(),
fixedHeaders: true,
style:'inset',
type:'group',
click: function (e) {
alert(e.dataItem);
}
});
}