AppCan TreeView
效果如下：
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
總結
以上是生活随笔為你收集整理的AppCan TreeView的全部內容，希望文章能夠幫你解決所遇到的問題。
