jquery ui Accordionevents activate事件也整合了zTree -

chenyi84

浏览: 37908 次
性别:
来自: 天津

最近访客更多访客>>

scofier

深海的鱼

zhangweiiou

435242634

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

jquery ui Accordionevents activate事件也整合了zTree

博客分类：

jquery ui accordion zTree

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

分享到：

ztree-3.5 checkbox 只能选中无法取消 | 遇到蹩脚的js调试时候需要注意的几个方法和 ...

2013-09-30 10:03
浏览 1559
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jquery ui Accordionevents activate事件也整合了zTree

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jquery ui Accordionevents activate事件 也整合了zTree

评论

发表评论

相关推荐

金额显示的千位计数等集中常用js

js frame 框架编程与frameElement

IE7下 JS画table需要写上tbody元素

CKEDITOR 取值

js验证移动号码

ztree-3.5 checkbox 只能选中无法取消

遇到蹩脚的js调试时候需要注意的几个方法和点

zTree传zNodes时报错

最近访客更多访客>>

jquery ui Accordionevents activate事件也整合了zTree