JS中声明对象,调用方法加载树形菜单的实例
2017-07-17 17:40
716 查看
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
});
<!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
});
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- js入门实例の构造函数\方法的定义和调用\原型对象
- js入门实例の构造函数/方法的定义和调用/原型对象
- WebView加载html代码,js脚本中调用android对象的方法...
- js入门实例の构造函数\方法的定义和调用\原型对象
- js入门实例の构造函数/方法的定义和调用/原型对象
- java 程序加载过程---3--类中申明同时申明类的静态对象 创建类的实例 访问类的静态变量 调用类的静态方法 使用反射方法 初始化类的子类对象 直接使用java.exe 调用某个类
- js创建调用ocx对象的几种方法，检测ocx是否可用
- 如何的获得动态类的实例对象、调用其方法及InvocationHandler的运行原理
- UpdatePanel中内容异步加载后，调用JS脚本方法
- 使用MVC中的HtmlHelper对象的ActionLink方法，实现一个Javascript:void(0)效果，去调用一个JS方法
- 超全的JS树形菜单源代码共享（有实例图）
- 使用console.dir 快速概览Node.JS中对象实例的属性和方法
- js 调用后台方法 ICallbackEventHandler 接口实现局部刷新实例 ClientScript的GetCallbackEventReference方法实现局部刷新
- Thin的DateChooser代码学习(关于js的函数参数为一个完整的函数以及“对象不支持此属性或方法”错误的解决)（原创，转载请声明）
- 每个 GROUP BY 表达式必须至少包含一个不是外部引用的列、加载页面时调用Js方法、调用Js文件中的方法
- JS 声明对象的方法
- Objective-C实例方法之多个参数声明与调用
- 超全的JS树形菜单源代码共享（有实例图）
- 前台JS(Jquery)调用后台方法 无刷新级联菜单示例
- 页面内调用js函数出错：“缺少对象”的解决方法