jquery ui Accordionevents activate事件 也整合了zTree
程序员文章站
2022-07-13 22:56:31
...
left_menu.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<%@include file="/jsp/common/taglibs.jsp"%>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="${ctxCss}/comm.css" type="text/css">
<link rel="stylesheet" href="${ctxCss}/zTreeStyle.css" type="text/css">
<script src="${ctxJs}/common/jquery-1.9.0.js" type="text/javascript"></script>
<script src="${ctxJs}/common/jquery-ui-1.9.2.custom.min.js"
type="text/javascript"></script>
<script type="text/javascript"
src="${ctxJs}/common/jquery.ztree.core-3.5.js"></script>
<title>Insert title here</title>
</head>
<body>
<div id="accordion" class="sidebar">
<h3>
<div class="nav">
<span class="ico f_left"></span> <a href="#" target="content"
class="f_left">资源模型</a> <a class="ico up f_right"></a>
</div>
</h3>
<div class="nav_con" style=" overflow:auto;z-index:10000;">
<li class="bg_gray" id ="tools"><span class="ico export f_right" title="导出"></span><span
class="ico import f_right" title="导入"></span><span
class="ico delete f_right" title="删除"></span><span
class="ico copy f_right" title="复制"></span>
</li>
<div class="zTreeDemoBackground left" style="height:500px">
<ul id="treeDemo" class="ztree"></ul>
</div>
</div>
<h3>
<div class="nav" id="indicatorsOfLibrary" >
<span class="ico f_left"></span> <a href="#" target="content"
class="f_left">指标库</a> <a class="ico up f_right"></a>
</div>
</h3>
<div id="indicatorsOfLibrary">Second content</div>
<h3>
<div class="nav" id="indicatorsOfGroup" >
<span class="ico f_left"></span> <a href="#" target="content"
class="f_left">指标组</a> <a class="ico up f_right"></a>
</div>
</h3>
<div id="indicatorsOfGroup" >Second content</div>
<h3>
<div class="nav">
<span class="ico f_left"></span> <a href="#" target="content"
class="f_left">厂商相关管理</a> <a class="ico up f_right"></a>
</div>
</h3>
<div class="nav_con">
<ul>
<li class="bg_gray"><span class="ico export f_right" title="导出"></span><span class="ico import f_right" title="导入"></span></li>
<li class="tree" style="height padding-right:20px;">
<p><a class="ico pro f_left" onclick="index.aaaaa()"></a>厂商及型号管理</p>
<p><a class="txt_on"><a class="ico pro f_left"></a>厂商MIB管理</p>
<p><a class="ico pro f_left"></a>背板管理</p>
</li>
</ul>
</div>
<h3>
<div class="nav">
<span class="ico f_left"></span> <a href="#" target="content"
class="f_left">申请管理</a> <a class="ico up f_right"></a>
</div>
</h3>
<div>Second content</div>
</div>
<script type="text/javascript" src="${ctxJs}/resourcemodel/left_menu.js"></script>
<script type="text/javascript" src="${ctxJs}/resourcemodel/accordion.js"></script>
</body>
</html>
left_menu.js
var setting = {
view : {
showLine : false
},
data : {
simpleData : {
enable : true
}
}
};
$(document).ready(function() {
$.ajax({
url : ctx+"/resourceModelTreeController/getModelTree",
data : "",
type : "post",
dataType : "json",
success : function(data) {
var zNodes = data.treeJson;
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
}
});
});
accordion.js
var accordion = {
init : function(){
accordion.accordionInit();
accordion.collapse();
},
collapse : function(){
$( "#accordion" ).accordion({
activate: function( event, ui ) {
console.log(ui);
if(ui.newPanel[0].id === "indicatorsOfLibrary"){
var iframedom = $('#model_add')[0];
iframedom.src = ctx+"/paramlibrary/listparam?pageNow=1";
}
if(ui.newPanel[0].id === "indicatorsOfGroup"){
var iframedom = $('#model_add')[0];
iframedom.src = ctx+"/paramgroup/list?pageNow=1";
}
if(ui.newPanel[0].id === "indicatorsOfGroup"){
var iframedom = $('#model_add')[0];
iframedom.src = ctx+"/paramgroup/list?pageNow=1";
}
}
});
},
accordionInit : function(){
$("#accordion").accordion();
}
}
$(document).ready(function(){
accordion.init();
});
上一篇： docker实例入门（上）
下一篇： jquery ui 日期控件