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>

使用jQuery实现顺滑折叠面板

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

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

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

Bootstrap 折叠(Collapse)插件

1、使用折叠(Collapse)插件可以创建可折叠的分组或面板accordion: Bootstrap 折叠(Collapse)插件 ...
  • boonyaxnn
  • boonyaxnn
  • 2017年03月21日 18:02
  • 885

Jquery实现的一个DIV层面板的折叠/展开效果

Jquery实现的一个DIV层面板的折叠/展开效果_网页代码站(www.webdm.cn) *{margin:0;padding:0;} body { font-size: 14px; li...
  • qq_32340877
  • qq_32340877
  • 2017年01月08日 15:09
  • 3598

jQuery之折叠面板

1:折叠面板可以将不同分类的内容分别放在不同的面板中,这些面板在页面中层叠摆放,用户可以通过单击各个面板的标题来展开该面板,查看面板的内容, 与此同时,将自动折叠隐藏其他面板        $(...
  • woshisap
  • woshisap
  • 2012年05月07日 00:23
  • 8193

css+jquery实现折叠面板效果

折叠菜单           body{         background:grey;         font-family:Microsoft Yahei;       ...
  • u014469537
  • u014469537
  • 2018年01月25日 21:56
  • 87

jquery展开折叠面板特效

  • 2015年12月11日 18:00
  • 26KB
  • 下载

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

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

折叠的jquery插件

折叠的jquery插件
  • zyu67
  • zyu67
  • 2017年12月25日 16:57
  • 28

jquery 漂亮的折叠菜单(插件)

  • 2009年11月26日 16:22
  • 67KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQuery插件之折叠面板插件
举报原因:
原因补充:

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