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

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代码来实现功能，需要注意的是要引入文件

<scripttype="text/javascript"src="${pageContext.request.contextPath}/js/jquery-1.7.1.min.js"></script>

<scripttype="text/javascript"src="${pageContext.request.contextPath}/js/jquery-ui-1.8.18.custom.min.js"></script>

<linkrel="stylesheet"type="text/css"href="${pageContext.request.contextPath}/css/ui-lightness/jquery-ui-1.8.18.custom.css">

<scripttype="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插件应用之--- 选项卡插件的使用（10级学员韩晓爽课堂笔记）