`

jquery ui Accordionevents activate事件 也整合了zTree

    博客分类:
  • js
阅读更多

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 的一个菜单滑动效果

    标题 "jquery ui 的一个菜单滑动效果" 涉及的是使用 jQuery UI 库来创建具有滑动动画的交互式菜单。jQuery UI 是基于 jQuery JavaScript 库的一个扩展,提供了丰富的用户界面组件,如对话框、进度条、日期选择器、...

    Jquery UI 选项卡实例

    - **事件监听**:可以通过监听`create`, `activate`等事件来执行自定义操作。 7. **响应式设计** jQuery UI的选项卡组件支持响应式布局。通过调整CSS样式,可以根据不同屏幕尺寸改变选项卡的展示方式。 8. **...

    JQUERY API及JQUERY UI API

    在开发过程中,可以利用jQuery API的事件处理与DOM操作,结合jQuery UI的动画和组件,构建出富有动态感和互动性的网页应用。 综上所述,jQuery API和jQuery UI API是前端开发的重要工具,它们大大提升了JavaScript...

    jQuery_UI与plugin开发实战

    jQuery UI为折叠菜单提供了多种内建方法,如`activate()`用于激活指定面板,`destroy()`用于移除折叠菜单的行为,`option()`用于获取或设置当前配置等。 #### 内建动画的类型 折叠菜单支持多种动画效果,如滑动、...

    jquery ui tabs

    4. 事件监听:包括`create`, `activate`, `beforeActivate`等,便于进行定制化操作。 5. 动画效果:通过`animation`选项,可以设置标签页切换时的过渡动画。 五、与Autocomplete的结合 在描述中提到了...

    Jquery UI Tabs插件扩展

    jQuery UI Tabs插件提供了丰富的事件,如`beforeActivate`、`activate`和`create`等,这些事件可以帮助我们在添加、关闭或切换标签页时执行相应的业务逻辑。例如,在关闭一个标签前,可以确认用户是否真的想关闭,...

    jquery ui 的api参考资料

    jQuery UI 的标签组件可以通过JavaScript方便地进行初始化和控制,同时也可以通过CSS进行样式调整以适应不同的设计需求。此外,它还支持异步加载内容,使得动态更新和加载数据成为可能。 在实际应用中,可以结合...

    jQueryui_tabs_impor.rar

    - **事件监听**:提供如`create`、`activate`等事件,方便监听和处理用户操作。 - **API方法**:如`select`用于切换标签,`disable`和`enable`用于禁用或启用特定标签。 - **自定义样式**:jQuery UI提供了丰富的...

    jquery ui 实现 tab标签功能示例【测试可用】

    对于对jQuery感兴趣的开发者,还可以查看本站的其它专题,比如jQuery页面元素操作技巧、jQuery常见事件的用法、jQuery常用插件的用法等,这些内容能够进一步提升开发者在使用jQuery以及jQuery UI进行前端开发的效率...

    jQuery UI手风琴-取消更改

    若要禁止用户更改当前激活的面板,我们可以利用 jQuery UI Accordion 的事件和选项。Accordions 有多个事件,如 `change`、`activate` 和 `beforeActivate`,这些事件在面板状态改变时触发。 特别是 `...

    一个jquery的tabs

    jQuery本身是这个库的基石,负责DOM操作、事件处理、动画效果等,而`core.js`则扩展了jQuery的功能,为其他UI组件提供支持。 2. **Tabs插件**: `tabs.js`包含了jQuery UI的Tabs组件实现。通过引入这个文件,你...

    JQuery UI的拖拽功能实现方法小结

    通过以上的分析,我们可以看到JQuery UI的拖拽功能不仅易于使用,而且提供了丰富的自定义选项和事件处理能力,使得开发者可以根据需求构建出各种复杂的拖拽交互场景。无论是简单的元素移动还是复杂的拖放逻辑,...

    jquery-sliderbutton:jQuery UIMobile插件,提供了需要滑动才能激活的小部件(按钮)

    jQuery UI /移动滑块按钮2.0.2 slidebutton插件提供了一个按钮,可通过将手柄向侧面滑动来触发。 这是一种避免意外按下按钮的简单技术。 该插件基于jQuery UI / Mobile滑块小部件。 由于此小部件在jQuery UI和jQuery...

    jQuery扁平UI设计垂直手风琴代码.zip

    《jQuery扁平UI设计垂直手风琴代码解析与应用》 在现代网页设计中,jQuery扁平UI设计已经成为一种流行趋势,它以其简洁、清晰的界面和流畅的用户体验深受开发者和设计师的喜爱。其中,垂直手风琴代码是jQuery UI...

    jquerytabs jquery选项卡 jquery tabs

    jQuery UI的选项卡组件还支持一些事件,允许开发者在特定操作发生时执行自定义代码: - `create`: 当选项卡被创建时触发。 - `activate`: 当选项卡激活状态改变时触发,提供新的和旧的活动选项卡索引作为参数。 - `...

    jQuery 手风琴效果

    jQuery UI 手风琴还提供了一系列事件,如 `activate`、`beforeActivate` 和 `change`,这些事件可以在面板状态改变时触发,便于我们进行额外的逻辑处理。 ```javascript $("#accordion").on("activate", function...

    jquery Accordion 收缩展开的多级导航

    4. **事件监听**:jQuery Accordion提供了丰富的事件,如`activate`、`beforeActivate`等,可以监听用户的操作并做出响应。例如,你可以添加一个事件监听器来在每次面板切换时执行某些操作。 ```javascript $("#...

    jquery tabs实例

    **事件(Events)**:jQuery UI Tabs 提供了一系列的事件,如 `create`、`beforeActivate`、`activate` 等,可以在特定时刻执行自定义的函数。 ```javascript $("#tabs").on("tabsactivate", function(event, ui) {...

    谈谈对jquery ui tabs 的理解

    本文将介绍 jQuery UI Tabs 的属性、事件、方法及其使用技巧,帮助开发者更好地理解和使用这项技术。 ### 属性 #### 1. ajaxOptions `ajaxOptions` 属性用于控制选项卡内容通过 AJAX 加载时的行为。它需要与 `ajax...

Global site tag (gtag.js) - Google Analytics