jQuery插件之折叠面板插件

最新推荐文章于 2024-08-20 08:47:57 发布

w_l_j

最新推荐文章于 2024-08-20 08:47:57 发布

阅读量3.4k

点赞数

文章标签： jquery插件 div stylesheet header jquery function

本文链接：https://blog.csdn.net/w_l_j/article/details/7396719

版权

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>