jQuery插件应用之 --- 选项卡插件的使用

jQuery插件应用之 --- 选项卡插件的使用
一  首先来介绍一下选项卡插件的作用
jQuery UI插件折叠板可以实现页面中指定区域的折叠效果,这种效果称”手风琴”,即通过单击某个面板中的标题栏,就会展开相应的内容,当点击其他面板标题栏时,已展开的内容会自动关闭,通过这种方式,实现多个面板数据在一个页面中有序展示。
二   选项卡插件的使用
1.	首先来介绍一下折叠面板所用的参数
(1)collapsible是否可折叠选项卡的内容,设置一个布尔值,如果为true,那么允许用户可折叠选项卡的内容,即首次点击展开,再点击关闭,默认值为false。 
(2)disable 设置不可用选项卡
(3)event 设置展开选项的事件,默认值为”click”,也可以设置双击,鼠标划过事件
(5)fx设置切换选项卡时的一些动画效果
(6)设置被选中选项卡的index
2.我们首先来创建一个html页面,如下:
<body>
    <div>
    	<div>
    		<h1>模仿面板的效果</h1>
    		<div id="tabs">
			<ul>
				<li><a href="#tabs-1">First</a></li>
				<li><a href="#tabs-2">Second</a></li>
				<li><a href="#tabs-3">Third</a></li>
			</ul>
			<div id="tabs-1">我是第一个选项卡 </div>
			<div id="tabs-2">我是第二个选项卡</div>
			<div id="tabs-3">N我是第三个选项卡</div>
		</div>
    	</div>
    </div>
  </body>

3.通过编写js代码来实现功能,需要注意的是要引入文件
<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 rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/ui-lightness/jquery-ui-1.8.18.custom.css">
  <script type="text/javascript">
然后代码的使用
<script type="text/javascript">
  //页面加载完毕触发匿名函数
  	$(document).ready(function(){
  		$('#tabs').tabs({
  			collapsible:true,
  			selected:1,//默认展开的是第1个面板  下标从0开始的 
  			event:"mouseover",
  			//动画效果 
  			fx:{
opacity:"toggle",//显示的动画效果  还有show 和fadeIn,toggle  也可以设置为opacity:0.2  0.2是透明度,透明度是0-1,1代表是完全不透明
  				height:"toggle" //高度本身展开的方式 
  			},                                                                  
  			disabled:[1,2],  //1和2不可用的面板
  		});
  		//改变原有选项卡的内容
  		$('#tabs').tabs("url",2,"tab5.jsp");
  		//添加选项卡 
  		$('#tabs').tabs("add","tab5.jsp","four");
  		//移除选项卡
  		$('#tabs').tabs("remove",1);
  	});
  </script>

在改变原有的选项卡的内容的时候需要在html中插入一条语句:
<li><a href="${pageContext.request.contextPath}/tabs/tab4.jsp">4</a></li>
内部是通过ajax来实现的


执行的效果为:
 


 

你可能感兴趣的:(html,jquery,function,jquery插件,div,stylesheet)