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 JavaScript 库的一个扩展,提供了丰富的用户界面组件,如对话框、进度条、日期选择器、...
- **事件监听**:可以通过监听`create`, `activate`等事件来执行自定义操作。 7. **响应式设计** jQuery UI的选项卡组件支持响应式布局。通过调整CSS样式,可以根据不同屏幕尺寸改变选项卡的展示方式。 8. **...
在开发过程中,可以利用jQuery API的事件处理与DOM操作,结合jQuery UI的动画和组件,构建出富有动态感和互动性的网页应用。 综上所述,jQuery API和jQuery UI API是前端开发的重要工具,它们大大提升了JavaScript...
jQuery UI为折叠菜单提供了多种内建方法,如`activate()`用于激活指定面板,`destroy()`用于移除折叠菜单的行为,`option()`用于获取或设置当前配置等。 #### 内建动画的类型 折叠菜单支持多种动画效果,如滑动、...
4. 事件监听:包括`create`, `activate`, `beforeActivate`等,便于进行定制化操作。 5. 动画效果:通过`animation`选项,可以设置标签页切换时的过渡动画。 五、与Autocomplete的结合 在描述中提到了...
jQuery UI Tabs插件提供了丰富的事件,如`beforeActivate`、`activate`和`create`等,这些事件可以帮助我们在添加、关闭或切换标签页时执行相应的业务逻辑。例如,在关闭一个标签前,可以确认用户是否真的想关闭,...
jQuery UI 的标签组件可以通过JavaScript方便地进行初始化和控制,同时也可以通过CSS进行样式调整以适应不同的设计需求。此外,它还支持异步加载内容,使得动态更新和加载数据成为可能。 在实际应用中,可以结合...
- **事件监听**:提供如`create`、`activate`等事件,方便监听和处理用户操作。 - **API方法**:如`select`用于切换标签,`disable`和`enable`用于禁用或启用特定标签。 - **自定义样式**:jQuery UI提供了丰富的...
对于对jQuery感兴趣的开发者,还可以查看本站的其它专题,比如jQuery页面元素操作技巧、jQuery常见事件的用法、jQuery常用插件的用法等,这些内容能够进一步提升开发者在使用jQuery以及jQuery UI进行前端开发的效率...
若要禁止用户更改当前激活的面板,我们可以利用 jQuery UI Accordion 的事件和选项。Accordions 有多个事件,如 `change`、`activate` 和 `beforeActivate`,这些事件在面板状态改变时触发。 特别是 `...
jQuery本身是这个库的基石,负责DOM操作、事件处理、动画效果等,而`core.js`则扩展了jQuery的功能,为其他UI组件提供支持。 2. **Tabs插件**: `tabs.js`包含了jQuery UI的Tabs组件实现。通过引入这个文件,你...
通过以上的分析,我们可以看到JQuery UI的拖拽功能不仅易于使用,而且提供了丰富的自定义选项和事件处理能力,使得开发者可以根据需求构建出各种复杂的拖拽交互场景。无论是简单的元素移动还是复杂的拖放逻辑,...
jQuery UI /移动滑块按钮2.0.2 slidebutton插件提供了一个按钮,可通过将手柄向侧面滑动来触发。 这是一种避免意外按下按钮的简单技术。 该插件基于jQuery UI / Mobile滑块小部件。 由于此小部件在jQuery UI和jQuery...
《jQuery扁平UI设计垂直手风琴代码解析与应用》 在现代网页设计中,jQuery扁平UI设计已经成为一种流行趋势,它以其简洁、清晰的界面和流畅的用户体验深受开发者和设计师的喜爱。其中,垂直手风琴代码是jQuery UI...
jQuery UI的选项卡组件还支持一些事件,允许开发者在特定操作发生时执行自定义代码: - `create`: 当选项卡被创建时触发。 - `activate`: 当选项卡激活状态改变时触发,提供新的和旧的活动选项卡索引作为参数。 - `...
jQuery UI 手风琴还提供了一系列事件,如 `activate`、`beforeActivate` 和 `change`,这些事件可以在面板状态改变时触发,便于我们进行额外的逻辑处理。 ```javascript $("#accordion").on("activate", function...
4. **事件监听**:jQuery Accordion提供了丰富的事件,如`activate`、`beforeActivate`等,可以监听用户的操作并做出响应。例如,你可以添加一个事件监听器来在每次面板切换时执行某些操作。 ```javascript $("#...
**事件(Events)**:jQuery UI Tabs 提供了一系列的事件,如 `create`、`beforeActivate`、`activate` 等,可以在特定时刻执行自定义的函数。 ```javascript $("#tabs").on("tabsactivate", function(event, ui) {...
本文将介绍 jQuery UI Tabs 的属性、事件、方法及其使用技巧,帮助开发者更好地理解和使用这项技术。 ### 属性 #### 1. ajaxOptions `ajaxOptions` 属性用于控制选项卡内容通过 AJAX 加载时的行为。它需要与 `ajax...