关闭

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

1561人阅读 评论(0) 收藏 举报

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来实现的

执行的效果为:

 

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:1933550次
    • 积分:16808
    • 等级:
    • 排名:第613名
    • 原创:209篇
    • 转载:76篇
    • 译文:0篇
    • 评论:705条