JS中声明对象,调用方法加载树形菜单的实例

来源：互联网发布：c语言逆波兰算法编辑：程序博客网时间：2024/05/17 03:02

html:

<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>Items</title><link rel="stylesheet" href="../css/reset.css" type="text/css"/><link rel="stylesheet" href="../css/yoyee.otk2.css" type="text/css"/><link rel="stylesheet" href="../css/items.css" type="text/css"/><link rel="stylesheet" href="../css/material-design-font-icon.css" type="text/css"/></head><body><div class="wrap" id="otkBox"><div class="otk-lft" id="otk-lft"><div class="otk-title"><h1>设备信息</h1><div class="sec-act-box"><ul class="m3-acts"><li id="otk-search" title="查询"><i class="mdi ico-search"></i></li><li id="otk-reload" title="刷新列表"><i class="mdi ico-refresh"></i></li></ul></div></div><ul class="otk-list-box" id="otk-list-box"></ul></div></div><script src="../lib/jquery.js"></script><script src="../js/yoyee.otk2.js"></script><script>$(document).ready(function(){otk.init({renderTo:"otkBox",list:"findTreeforCompy.action",listWidth:350,itemClick:function(obj){showItem(obj);},autoClick:id});});</script></body></html>

JS:

window.otk = {init:function(j){this.box = $("#otk-lft");this.body = $("#otk-body");this.frame = $("#otk-frame");this.listBox = $("#otk-list-box");this.itemClick = j.itemClick;this.groupEvent = j.groupEvent;this.listUrl = j.list;//this.target = j.target;this.firstLoading = true;this.activingItem = "";this.autoClick = j.autoClick;this.itemTemp =  $("<li><div><i class='otk-dot mdi ico-chevron-right'></i><span class='otk-item'></span></div></li>");this.tempInfo = $("<li></li>").addClass("otk-temp");this.infoBox = $("#otk-info");//alert(j.listWidth);if(j.listWidth){this.box.css({"width":j.listWidth});this.body.css({"left":j.listWidth});}otk.build();this.reload = $("#otk-reload");this.reload.show().click(function(){otk.reloadlist();});$("#otk-search").show().click(function(){alert("Find something... ");});},build:function(){$.getJSON(otk.listUrl).done(function(json){otk.json = json;otk.listBox.addClass("deep-0");otk.buildItems(json.items,otk.listBox,0);}).fail(function(){alert("Get json data error!");});},buildItems:function(j,box,deep){var box = box;var deep = deep;var itml = j.length;$.each(j,function(i){var gj = j[i];var li = otk.itemTemp.clone().appendTo(box);if(deep>0){$("<span class='lh'></span>").appendTo(li);var lv1 = $("<span class='lv1'></span>").appendTo(li);if(i==itml-1) lv1.addClass("end");}//alert(itml+"|"+i);var div = li.find("div");var itm = li.find(".otk-item");var dot = li.find(".otk-dot");itm.text(gj.title).attr("title",gj.title).data("json",gj);//.attr("id","g_"+gj.id);var hasSubItems = false;if("items" in gj){if(gj.items.length>0)hasSubItems = true;}if(gj.type!="group"){itm.addClass("ed").click(function(){otk.itemClick($(this));otk.listBox.find("span.otk-item.active").removeClass("active");$(this).addClass("active");});}if(hasSubItems){li.addClass("expand");$("<span class='lv2'></span>").appendTo(li);var sbox = $("<ul></ul>").addClass("otk-sub-list").addClass("deep-"+deep+1).appendTo(li);dot.addClass("e").click(function(){var pli = $(this).closest("li");if(pli.hasClass("expand")){sbox.slideUp(100,function(){pli.removeClass("expand");});}else{pli.addClass("expand");sbox.slideDown(100);}});if(gj.type=="group"){itm.click(function(){dot.click();});}otk.buildItems(gj.items,sbox,deep+1);}else{/*div.click(function(){otk.listBox.find("div.active").removeClass("active");$(this).addClass("active");var url = otk.target+"?"+gj.id;otk.frame.attr("src",url);});*/}if(gj.id == otk.autoClick){itm.click();itm[0].scrollIntoView();}});},pushInfo:function(msg){otk.infoBox.html(msg);//.show();},newItem:function(){otk.frame.attr("src",otk.addNew+"?0");otk.listBox.find("li.active").removeClass("active");},reloadlist:function(){//alert("reloading");otk.reload.find("i").addClass("fa-spin");//.delay("2000").removeClass("fa-spin");//otk.cdt.trigger("change");setTimeout(function(){otk.reload.find("i").removeClass("fa-spin");},"2000");},loading:function(o){o.closest("ul").find("li.active").removeClass("active");o.addClass("active");otk.activingItem = o;otk.frame.attr("src",otk.target+"?"+o.data("json").id);otk.pushInfo("project url:"+otk.target+"?"+o.data("json").id);}}$.ajaxSetup ({cache: false //close AJAX cache});

阅读全文

0 0