jquery ui Accordionevents activate事件也整合了zTree

最新推荐文章于 2024-11-07 14:07:32 发布

原创最新推荐文章于 2024-11-07 14:07:32 发布 · 162 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery ui #accordion #zTree

js 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一个用于资源模型管理的Web界面实现方案，该方案利用了jQuery UI和zTree插件来构建灵活且交互性强的左侧菜单栏。文章详细展示了如何通过Ajax加载资源模型树状结构，并使用Accordion插件组织不同功能模块。

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();
});