Linux教程網 >> Linux編程 >> Linux編程 >> jQuery插件應用之 --- 選項卡插件的使用

jQuery插件應用之 --- 選項卡插件的使用

日期：2017/3/1 10:25:39 编辑：Linux編程

一首先來介紹一下選項卡插件的作用

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來實現的