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