效果如下:
CSS:
//去掉二级列表中的 右箭头
<style type="text/css">
.fa-angle-right{
display:none
}
</style>
HTML:
<div id="treeview" class="sc-bg">
</div>
JS:
var tv = appcan.treeview({
selector : "#treeview",
defaultOpen : 1 , //默认打开第几项,必须包含数据
});
tv.set([{
header : "列表(list)",
content : [{
title : '<div class=" ub bc-text ub-ac"><div class="checkbox umar-r"> <input type="checkbox" class="uabs ub-con"> </div> <div class=" ub-f1 marg-l ub ub-ac ut-m line1"> 自动登录 </div></div>',
name : "listview",
hasAngle:false,
id:'test'
// url : "UIcontrol/listview.html"
}, {
title : '分组列表',
name : "listview",
url : "UIcontrol/lv_group.html"
}]
}, {
header : "标题导航栏(header)",
content : [{
title : '图片标题',
name : "control",
url : "UIcontrol/nav-icon.html"
}, {
title : 'FontAwesome图片标题',
name : "control",
url : "UIcontrol/nav-fa.html"
}]
}]);
tv.on('listviewClick', function(ele, data, obj) {
if (data.name && data.url) {
// appcan.locStorage.setVal("lv_index", ele.data("index"));
// appcan.window.open(data.name, data.url, 10);
}
});
tv.on('click', function(ele, obj, subobj) {
if (obj.name && obj.url) {
appcan.window.open(obj.name, obj.url, 10);
}
});
动态数据绑定可参考:
http://blog.csdn.net/clareqi/article/details/52472512