jQuery插件之折叠面板插件

原创 2012年03月26日 21:21:42
jQuery  UI插件折叠面板(accordion)可以实现展开页面中指定区域的折叠放置效果,这种效果俗语“手风琴”,既通过单击某块面板中的标题栏,就会展开相应的内容,当单击其他面板标题栏时,已展开的内容会自动关闭,通过这种方式,实现多面板数据在一个页面中有序展示。其调用语法格式为:
accordion(options)
其中选项options常用的参数如下所示:
animated    设置折叠时的效果,默认为“slide”;也可以自定义动画。如果设置为false,表示不要折叠时的动画效果
active  设置默认展开的主体选择,默认值为“1”
autoHeight   内容高度是否设置为自动增高,默认值为“true”
event    设置展开选项的事件,默认值为“click”,也可以设置双击,鼠标滑过事件
fillSpace   设置内容是否充满父元素的高度,默认值为“false”,如果设定为true,那么,autoHeight参数设置的值无效
icon  设置小图标,其设置的格式为{“header”:”主题默认图标类别名”,”head rSelected”:”主题选中时图标类别名”}
实例:
<head>
<!-- 引入相应的jQueryUI的类库文件 -->	
<script type="text/javascript" src="${ pageContext.request.contextPath}/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="${ pageContext.request.contextPath}/js/jquery-ui-1.8.18.custom.min.js">></script>
<link type="text/css" rel="stylesheet" href="${ pageContext.request.contextPath}/css/ui-lightness/jquery-ui-1.8.18.custom.css"/>
  <script type="text/javascript">
  	//页面加载完毕   触发匿名函数
  	$(document).ready(function(){
  		$("#accordion").accordion(
  			{
  				header:"h3",//header设置头标题  标签必须是h3,如果更改则没有效果
  				animated:false,//是否有动画效果 false是没有动画效果      默认值为slide
  				event:"mouseover",//event事件处理方式click点击事件    mouse代表鼠标移动的事件处理
  				autoHeight:true,
  				//设置小图标
  				icon:{
  					header:"h3",
  					headerSelected:"h6"
  				}//,
  				//active:1 //如果写了这句话,会打开第二个----设置默认展开主题   默认是0 既展开第一个
  			}
  		);
  		//获取手风琴中的options的值
  		//var avtiveVal = $("#accordion").accordion("option","active");
  		//设置值
  		var avtiveVal = $("#accordion").accordion("option","active",2);
  		alert(avtiveVal);
  	});
  </script>
  </head>
  <body>
   <div>
   	<div>
   		<h1>模仿手风琴效果</h1>
   		<div id="accordion">
   			<div>
   				<h3><a href="#">first</a></h3>
   				<div>欢迎进入第1个界面内容</div>
   			</div>
   			<div>
   				<h3><a href="#">second</a></h3>
   				<div>欢迎进入第2个界面内容</div>
   			</div>
   			<div>
   				<h3><a href="#">third</a></h3>
   				<div>欢迎进入第3个界面内容</div>
   			</div>
   		</div>
   	</div>
   </div>
  </body>

相关文章推荐

关于折叠菜单插件及其操作

关于折叠菜单 可以先去http://www.runoob.com/bootstrap/bootstrap-collapse-plugin.html,找到折叠,点进去 这里要注意,点击动作的...

[JQ权威指南]折叠面板插件accordion

JQuery Ui 插件accordion可以实现页面中指定区域的折叠效果,这种效果俗语“手风琴”。即通过单击某块面板中的标题栏,就会展开响应的内容,单击其他面板标题栏时,已展开的内容会自动自动关闭,...

【JQuery UI】面板折叠插件——accordion

面板折叠插件可以实现页面中指定区域类似“手风琴”的折叠效果,即点击标题时展开内容,再点另一标题时,关闭已展开的内容,调用格式如下: $(selector).accordion({options}...

jquery插件编写(以折叠面板为例)

 创建一个 jQuery 插件所推荐的方法是,先创建一个允许使用美元符号 ($) 的包装器函数。在默认情况下,美元符号可能与其他 JavaScript 框架发生冲突,如果将插件包装在一个函数中,...

使用jQuery实现顺滑折叠面板

jQuery UI有折叠面板框架Accordion,但是我在使用这个框架的时候发现嵌套使用时会出现问题:最外层折叠面板从第二个开始展开时子内容无法完全显示,代码的height被置为了0 。我在CSS中...

折叠面板的改进【Amaze UI】

折叠面板或者说折叠列表在移动端的使用非常广泛,不仅可以让页面渲染地更简洁,而且使用起来也是很大方,很实用。在做项目的过程中,我应用到了这个功能,进行了改进并应用,接下来详细讲解。 结果展示: ...

十三、CollapsiblePane——可折叠面板、HTMLEditor——网络版文本编辑器

 CollapsiblePane可折叠面板,用于隐藏或显示一个面板。 举例如下:1.       添加一个ScriptManage2.       添加两个Panel        asp:Panel...

Jquery-UI—制作可折叠面板(accordion)

先来看一下效果: 使用jquery-ui制作如可折叠选项卡非常简单: 第一步:引入 jquery 和 jquery-ui 文件。 注 jquery-ui 要放在jquery引入之后。因为要引...

7 款基于 HTML5 Canvas 的超炫 3D 动画效果

在以前,想要在浏览器中实现3D动画效果是非常困难的,但是自从HTML5诞生之后,这就变得十分简单了。遗憾的是,目前的浏览器对3D渲染效果还不是非常理想,尤其是渲染速度,可能用chrome和safari...

jQuery插件2(拖拽draggable/放置droppable/排序sortable/面板折叠accordion/横向选项卡tabs/对话框dialog/menu/微调spinner/框提示)

1、拖曳插件——draggable 通过调用draggable()方法,实现各种拖曳元素的效果,调用格式如下: $(selector). draggable({options}) options...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQuery插件之折叠面板插件
举报原因:
原因补充:

(最多只允许输入30个字)