安科网

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

85931235

85931235

2012-03-28

关注 关注

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

选项卡 jquery font

85931235

85931235

0 关注 0 粉丝 0 动态

关注 关注

相关推荐

第一阶段冲刺7

初步整合三部分代码，修复漏洞！昨天基本完成了APP界面下方的选项卡的操作，今天对他的样式进行了一定优化，并且正在学习并尝试制作APP的第一个功能界面，但是我对Androidstudio的界面的格式的布局还不是很了解，以至于不能成功绘画出课程表的表格布局，遇

APCDE 2020-06-11

想自学前端，该怎么开始学，从哪学起呢？

HTML和CSS是Web开发的基本构建块。无论您的Web应用程序有多先进，或者使用什么框架和后端语言，都必须使用HTML和CSS构建前端应用程序。因此，这是在Web开发中要学习的第一件事。CSS基础知识颜色，字体，位置，盒子模型等。CSS Grid和Fle

viewerlin 2020-05-25

Android基础——高级UI组件：选项卡

--选项卡里面需要两个布局文件：一个是上面标签的布局，一个是下面内容的布局-->

安辉 2020-01-25

TotalFinder for Mac(Finder增强工具)：双模式

下面给大家带来TotalFinder for Mac：双模式，希望能够帮助大家更快的熟悉TotalFinder for Mac这款Finder增强工具！同时本站也上线了TotalFinder for Mac中文版，喜欢这款软件的可以来本站下载体验！双模式是

adc00 2020-01-04

fiddler——查看http响应

http响应可能是一个html文件、可能是一个图片、可能是一个json等。、如果http响应是html文档，可以使用web view选项卡来查看；、如果http响应是json，可以使用json tab选项卡来格式化json；

老高 2019-12-30

Android开发：制作底部选项卡TabHost

<TabHost. android:id="@android:id/tabhost". <LinearLayout. <!<FrameLayout. <TabWidget. android:id="

luoj 2011-09-13

在红旗Linux中的ftp实验配置过程

1打开图形管理工具 2 默认FTP站点上点击右键在选择属性。绝对路径选择项选择“浏览”并指定到／DATA目录中。在第75行修改内容为。1以外的所有主机都可以访问FTP服务器。欢迎和退出对话框中可以输入用户登录FTP服务器和退出登录时的文字信息。单击应用、确

xiaoguolaoshi 2008-07-20

Android 选项卡(TabHost)例子

在Android中实现选项卡的效果可以通过两种方式：在布局文件中引用TabHost，在Activity中通过Id获取TabHost的实例，或者直接继承TabActivity，直接获取TabHost的实例。-- set the tab title attri

Rgenxiao 2011-09-08

jquery tab选项卡，支持垂直选项卡滚动、水平选项卡滚动、自动选项卡切换

支持垂直选项卡滚动、水平选项卡滚动、自动选项卡切换图片就不上了，很多效果，直接看演示演示地址:http://www.corange.cn/demo/3803/index.html<!DOCTYPE html PUBLIC "-//W3C//

支离破碎 2014-06-30

简单的jQuery选项卡插件

原理其实也是很简单的，关键在于样式的定义。原本想直接使用jquery的 ui，无奈懒得理，感觉jquery ui很强大，但是用起来也很麻烦，要引用的样式也多。主要是样式不好修改。并且我也只想使用选项卡的功能，何必整这么多样式呢。

qiuhaotc 2012-02-19

微信小程序开发实现的选项卡(窗口顶部/底部TabBar)页面切换功能图文详解

本文实例讲述了微信小程序开发实现的选项卡页面切换功能。分享给大家供大家参考，具体如下：。总算做出来了.分享出来看看.'on' : ''}}" data-current="0" bindtap="swichNav&qu

bruceli 2019-05-14

基于jquery实现的tab选项卡功能示例【附源码下载】

本文实例讲述了基于jquery实现的tab选项卡功能。分享给大家供大家参考，具体如下：。jquery这款杀手级别的js框架，显然已成了开发界的标准js库，在开发一般web应用的时候，常常用到。今天找到一个实现jquery tab页的插件，效果还不错，比自己

南城小伙 2019-06-10

jquery实现选项卡切换代码实例

选项卡在网页中很常见，可以说是必备的一个元素了，网上其实也有很多案例讲解选项卡的做法，各种炫酷。写这篇文章，就是记录下自己的一个练手Demo了。主要逻辑就在于找到选项卡和内容框相对应的下标。以上所述是小编给大家介绍的jquery实现选项卡切换详解整合，希望

逆风飞舞0 2019-05-14

[转] CentOS 安装中文输入法

在linuxCentOS中安装完中文输入法之后，还不能使用，必须进行相应的设置，就如同在windows中设置中文输入法一样，必须把刚刚安装的输入法添加爱到输入法列表中。

87530399 2014-05-26

Win10系统IE11兼容性的具体设置方法

　　现在很多使用Windows系统的用户都在考虑，自己是否需要将系统升级到Win10系统，而很多用户主要是考虑到Win10系统的兼容性如何。要是和Win10以前的系统相比较，其实Win10系统的兼容性肯定没那么好，但随着微软的不断完善，所以Win10对兼容

chenyangah 2017-03-31

Win10 PC预览版14971已修复和已知问题汇总

微软今天向快速通道Insider成员推送了Windows 10创造者更新预览版14971，带来一些新功能，下面我们来看下已修复和已知问题。最初在14926版本中引入，Microsoft Edge中的选项卡上的实验性“Snooze”操作，为您提供一种方法来设

84236532 2016-11-17

如何解决WinXP电脑IE提示“此选项卡已经恢复”

　　WinXP电脑IE提示“此选项卡已经恢复”的解决方法就讲到这里了，只要在IE浏览器的Internet选项进行一些设置，之后重启就可以了。

zhangpuego 2016-07-16

Win10系统无法识别USB设备的解决方法

最近老是有用户反应Win10系统的电脑总是出现USB接口无法识别设备的问题，导致U盘、移动硬盘等无法使用，甚至连本来正常连接的USB鼠标都发生了异常，这严重影响了用户Win10系统的使用。下面小编就给大家带来解决办法，一起来看看吧。　　4.在任务管理器的“

Jiminull 2016-03-03

Win10以太网属性空白布线时网络选项卡该怎么办?

我们一般会在网络适配器属性中修改网络DNS和IP，在Win10中本地连接适配器一般被命名为以太网，有时打开以太网属性在网络选项卡中会发现列表显示为空白，如下图所示：。在任务栏搜索框中输入“服务”，回车打开服务。找到名为Network Setup Servi

小李匪盗 2015-12-21

win10桌面背景不显示怎么办 win10桌面背景不显示解决办法

在升级win10后，有朋友反映说Win10桌面背景不显示大家不用着急现在小编就为大家带来出现Win10桌面背景不显示的解决办法，感兴趣的朋友可以一起看看。　　首先我们先打开系统设置，在系统设置面板就会有一个“轻松使用”选项卡，我们选择该选项卡。　　当显示w

LiTOPPPP 2015-08-23
85931235

85931235

W3CSchool教程
HTML 教程
CSS 教程
Bootstrap 教程
Javascript 教程
jQuery 教程
后端教程
C 教程
Java 教程
PHP 教程
Python 教程
Go 教程
移动开发
Android 教程
Swift 教程
Kotlin 教程
jQuery Mobile 教程
ionic 教程
关于我们
新闻动态
联系方式
招聘英才
安科实验室
帮助与反馈

安科网(Ancii)，中国第一极客网

Copyright © 2013 - 2019 Ancii.com

京ICP备18063983号 京公网安备11010802014868号