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


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

一  首先来介绍一下选项卡插件的作用 

jQuery UI插件折叠板可以实现页面中指定区域的折叠效果，这种效果称”手风琴”，即通过单击某个面板中的标题栏，就会展开相应的内容，当点击其他面板标题栏时，已展开的内容会自动关闭，通过这种方式，实现多个面板数据在一个页面中有序展示。 

二   选项卡插件的使用 

1．  首先来介绍一下折叠面板所用的参数 

（1）collapsible是否可折叠选项卡的内容，设置一个布尔值，如果为true，那么允许用户可折叠选项卡的内容，即首次点击展开，再点击关闭，默认值为false。  

（2）disable 设置不可用选项卡 

（3）event 设置展开选项的事件，默认值为”click”，也可以设置双击，鼠标划过事件 

（5）fx设置切换选项卡时的一些动画效果 

（6）设置被选中选项卡的index 

2.我们首先来创建一个html页面，如下： 

  1. <body>  
  2.     <div>  
  3.         <div>  
  4.             <h1>模仿面板的效果</h1>  
  5.             <div id="tabs">  
  6.             <ul>  
  7.                 <li><a href="#tabs-1">First</a></li>  
  8.                 <li><a href="#tabs-2">Second</a></li>  
  9.                 <li><a href="#tabs-3">Third</a></li>  
  10.             </ul>  
  11.             <div id="tabs-1">我是第一个选项卡 </div>  
  12.             <div id="tabs-2">我是第二个选项卡</div>  
  13.             <div id="tabs-3">N我是第三个选项卡</div>  
  14.         </div>  
  15.         </div>  
  16.     </div>  
  17.   </body>  
  18.   
  19. 3.通过编写js代码来实现功能，需要注意的是要引入文件  
  20. <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.7.1.min.js"></script>  
  21.     <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-ui-1.8.18.custom.min.js"></script>  
  22.     <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/ui-lightness/jquery-ui-1.8.18.custom.css">  
  23.   <script type="text/javascript">  
  24. 然后代码的使用  
  25. <script type="text/javascript">  
  26.   //页面加载完毕触发匿名函数  
  27.     $(document).ready(function(){  
  28.         $('#tabs').tabs({  
  29.             collapsible:true,  
  30.             selected:1,//默认展开的是第1个面板  下标从0开始的   
  31.             event:"mouseover",  
  32.             //动画效果   
  33.             fx:{  
  34. opacity:"toggle",//显示的动画效果  还有show 和fadeIn,toggle  也可以设置为opacity:0.2  0.2是透明度，透明度是0-1,1代表是完全不透明  
  35.                 height:"toggle" //高度本身展开的方式   
  36.             },                                                                    
  37.             disabled:[1,2],  //1和2不可用的面板  
  38.         });  
  39.         //改变原有选项卡的内容  
  40.         $('#tabs').tabs("url",2,"tab5.jsp");  
  41.         //添加选项卡   
  42.         $('#tabs').tabs("add","tab5.jsp","four");  
  43.         //移除选项卡  
  44.         $('#tabs').tabs("remove",1);  
  45.     });  
  46.   </script>  
  47.   
  48. 在改变原有的选项卡的内容的时候需要在html中插入一条语句：  
  49. <li><a href="${pageContext.request.contextPath}/tabs/tab4.jsp">4</a></li>  
  50. 内部是通过ajax来实现的  

相关内容