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

转载 2012年03月26日 21:52:35

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

执行的效果为:

 

相关文章推荐

jQueryUI中Datepicker(日历)插件的介绍和使用(10级学员 郞志课堂笔记)

jQueryUI中Datepicker(日历)插件的介绍和使用 Datepicker插件的属性: 属性 数据类型 默认值 说明 ...

jQuery插件autoComplete介绍(10级学员 张帅鹏总结)

jQuery插件autoComplete介绍 概述:AutoComplete为自动填充,展示之意。用户在使用文本框搜索信息时,使用插件的autoplete方法绑定文本框。当在文本框中输入某个字符时,...

JQueryUI插件----手风琴效果(10级学员 赵成举课堂笔记)

JQueryUI插件----手风琴效果 今天我们介绍一下JQuery中UI插件中的手风琴效果,效果图如下: 像这种能够展开和折叠的div在我们项目的开发中经常需要用到,这样能够使界面更加绚...

JqueryUI插件---对话框的使用(10级学员 乔宇课堂总结)

Jquery 中的对话框的设置以及使用          对话框:首先,我们知道我们这个jquery中的对话框,我们必须使用jquery的js和css,那么我们必须引入必须的js和css了.   ...

oracle其他数据对象 --- 视图(10级学员 韩晓爽课堂总结)

oracle其他数据对象 --- 视图 一 介绍: 1.什么是视图:     视图是从一个表或多个表中导出的虚表,它与常规表不同之处在于它并不存储数据,它只是在一个存储的查询中定义.视图同真实表...

Spring中的依赖注入(10级学员 韩晓爽课堂总结)

Spring中的依赖注入   Spring中依赖注入的方式有两种:使用setter方法注入和使用构造器注入 第一种:set方法和构造器 -- 基本属性的注入   set注入是一种直接方式,缺点...

通过工具来监控webService请求和返回时的数据(10级学员 韩晓爽课堂总结)

通过工具来监控webService请求和返回时的数据 一  引言 我们通过WsExplorer和Tcp/Ip Monitor两种工具俩检测wsdl的传送数据的方式, 使用这两种工具的作用:...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQuery插件应用之--- 选项卡插件的使用(10级学员 韩晓爽课堂笔记)
举报原因:
原因补充:

(最多只允许输入30个字)