关闭

jQuery插件之折叠面板插件

标签: jquery插件divstylesheetheaderjqueryfunction
2575人阅读 评论(0) 收藏 举报
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>

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:403724次
    • 积分:5938
    • 等级:
    • 排名:第4428名
    • 原创:210篇
    • 转载:15篇
    • 译文:0篇
    • 评论:38条
    文章分类
    最新评论