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插件应用之 --- 选项卡插件的使用

相关推荐