当前位置:首页 > 开发 > Web前端 > Jquery > 正文

jquery ui Accordionevents activate事件 也整合了zTree

发表于: 2013-09-30   作者:chenyi84   来源:转载   浏览次数:
摘要: left_menu.jsp <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transi

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

 

jquery ui Accordionevents activate事件 也整合了zTree

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
参考资料 1 spring+struts2+hibernate+json+dtree实现的无限级联树 http://luanmad-java.iteye.com/b
参考资料 1 spring+struts2+hibernate+json+dtree实现的无限级联树 http://luanmad-java.iteye.com/b
参考资料 1 spring+struts2+hibernate+json+dtree实现的无限级联树 http://luanmad-java.iteye.com/b
参考资料 1 spring+struts2+hibernate+json+dtree实现的无限级联树 http://luanmad-java.iteye.com/b
参考资料 1 spring+struts2+hibernate+json+dtree实现的无限级联树 http://luanmad-java.iteye.com/b
参考资料 1 spring+struts2+hibernate+json+dtree实现的无限级联树 http://luanmad-java.iteye.com/b
参考资料 1 spring+struts2+hibernate+json+dtree实现的无限级联树 http://luanmad-java.iteye.com/b
1.准备工作: Dwz 1.4.6 ZTree 3.5.15 Jquery 1.7.2 2.工程视图 3. 整合步骤 3.1.CSS替换: 找到DWZ
【简介】 zTree 是利用 JQuery 的核心代码,实现一套能完成大部分常用功能的 Tree 插件 兼容 IE、Fi
【简介】 zTree 是利用 JQuery 的核心代码,实现一套能完成大部分常用功能的 Tree 插件 兼容 IE、Fi
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号