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

原创 2012年03月26日 22:24:12
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来实现的


执行的效果为:
 


 

相关文章推荐

jQuery插件应用之--- 选项卡插件的使用(10级学员 韩晓爽课堂笔记)

jQuery插件应用之 --- 选项卡插件的使用 一  首先来介绍一下选项卡插件的作用 jQuery UI插件折叠板可以实现页面中指定区域的折叠效果,即通过单击某个面板中的标题栏,就会展开相应的内...

tabox 左右滑动选项卡封装jquery插件

/***demo******/ tabBOX左右滑动   body{margin:0;padding:0;}   ul,li{margin:0;padding:0;l...

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

1、拖曳插件——draggable 通过调用draggable()方法,实现各种拖曳元素的效果,调用格式如下: $(selector). draggable({options}) options...

jQuery插件之选项卡插件

选项卡(tabs)在页面中的使用非常广泛,尤其是各大门户网站的首页,因为以选项卡形式可以实现使用少量代码的空间展示更多内容的效果,同时,其快速的切换效果,也增加了用户的体验。在jQuery UI中,通...
  • w_l_j
  • w_l_j
  • 2012年03月26日 21:29
  • 1596

jQuery响应式内容选项卡插件效果

  • 2017年05月02日 10:10
  • 33KB
  • 下载

Jquery选项卡插件

  • 2014年10月27日 15:54
  • 59KB
  • 下载

jQuery 选项卡插件 FengTab by FungLeo

好无聊啊,权当练手,写了一个选项卡插件Html 结构 Demo 1 Title 1 Title 2 ...
  • FungLeo
  • FungLeo
  • 2015年09月04日 18:44
  • 1228
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQuery插件应用之 --- 选项卡插件的使用
举报原因:
原因补充:

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