jQuery插件之选项卡插件

原创 2012年03月26日 21:29:34
选项卡(tabs)在页面中的使用非常广泛,尤其是各大门户网站的首页,因为以选项卡形式可以实现使用少量代码的空间展示更多内容的效果,同时,其快速的切换效果,也增加了用户的体验。在jQuery UI中,通过在页面中导入tabs插件,并调用插件中的tabs()方法直接针对列表生成对应的菜单,轻松实现这种选项卡的功能。其调用的语法格式如下:
tabs(options)
其中选项options的常用参数如下
1、collapsible  是否可以折叠选项卡的内容,设置一个布尔值,如果为true,那么,允许用户可折叠选项卡的内容,既首次单击展开,再单击关闭,默认值为false
2、disabled   设置不可用选项卡,如{disabled:[1,2]},表示选项卡中第1、2项不可用
3、event  设置触发切换选项卡的事件,默认值为“click”,也可以设置为”mousemove”
4、fx    设置切换选项卡时的一些动画效果
5、selected   设置被选项卡的index 如{selected:2},表示第二项选项卡被选中
实例
Tabs.jsp
<head>
<!-- 引入相应的jQueryUI的类库文件 -->
<script type="text/javascript" src="${ pageContext.request.contextPath}/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="${ pageContext.request.contextPath}/js/jquery-ui-1.8.18.custom.min.js">></script>
<link type="text/css" rel="stylesheet" href="${ pageContext.request.contextPath}/css/ui-lightness/jquery-ui-1.8.18.custom.css"/>
  <script type="text/javascript">
  	$(document).ready(function(){
  		$("#tabs").tabs({
  			collapsible:false,
  			selected:0,//设置默认展开的面板
  			event:"mouseover",
  			fx:{
  				opacity:1,//设置透明度0--1    1代表完全不透明    0代表完全透明
  				height:"slideDown"//展开效果    既按哪种效果展开   toggle    fadeIn    fadeOut等
  			}//,
  			//disabled:[1,2],//1和2不可用
  		});
  		//修改选项卡
  		$('#tabs').tabs("url",2,"./tabs4.jsp");
  		//添加选项卡
  		$('#tabs').tabs("add","./tabs5.jsp","fifth");
  	});
  </script>
  </head>
  <body>
  <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">我是老三</div>
		</div>
  </body>
tabs4.jsp
  <body>
   这是第4个啊
  </body>
Tabs5.jsp
  <body>
   这是第5个啊
  </body>

js自定义插件-选项卡

js自定义插件,实现方式
  • happypleasure
  • happypleasure
  • 2015年07月26日 16:47
  • 1126

从零开始写一款javascript插件(一)——tab选项卡

上一次写了《从零开始学习制作H5场景应用》系列,反响还算好,所以趁最近不是太忙,继续新的系列,从零开始写javascript插件。今天,先从最简单的开始,将已有的一个Tab选项卡切换功能改写成java...
  • hjb2722404
  • hjb2722404
  • 2016年02月19日 14:44
  • 3600

bootstrap js插件篇——下拉菜单、滚动监测、选项卡

三、下拉菜单 3.1基本结构 3.2 触发方式  注:1、测试时发现js触发的下拉菜单点时只出现无法消失,建议data-toggle触发         2、如果触发下拉菜...
  • wangjiaohome
  • wangjiaohome
  • 2015年07月14日 11:45
  • 1515

vue 插件tab选项卡

基本用法 import tab from 'components/tab_touch'; export default { data(){
  • keliyxyz
  • keliyxyz
  • 2016年08月15日 09:51
  • 3059

bootstrap选项卡效果

参赛项目信息 个人报名 队员列表--> 团体报名 ...
  • A9925
  • A9925
  • 2014年12月30日 17:24
  • 928

史上最简单的JQ选项卡

选项卡,自动选项卡,JQ选项卡,JQ自动选项卡,选项卡插件
  • xyphf
  • xyphf
  • 2016年07月11日 13:01
  • 2241

选项卡控件TabControl

判断选中的选项卡(TabPage) (1)用TabControl 的SelectedTab属性 if(tabControl1.SelectedTab == tabPage2) (2)用TabCo...
  • jixiaomeng821
  • jixiaomeng821
  • 2014年04月24日 16:07
  • 2064

如何:更改功能区上选项卡的位置,内置选项卡的前面或后面

如何:更改功能区上选项卡的位置 其他版本   可以使用“Tab 集合编辑器”来更改功能区上自定义选项卡的顺序。 可以将自定义选项卡放置在功能区...
  • wormwwww
  • wormwwww
  • 2017年06月08日 20:27
  • 219

Amaze js插件 选项卡竖置

首先你得有Amaze框架:http://amazeui.org/getting-started css: .am-nav-ver{ float:left; } .am-nav-ver>li...
  • zoujiawei6
  • zoujiawei6
  • 2016年03月03日 15:27
  • 860

简单的jquery选项卡插件

a { text-decoration: none; } ul, li, p { list-style-type: no...
  • u012289441
  • u012289441
  • 2014年12月25日 15:56
  • 266
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQuery插件之选项卡插件
举报原因:
原因补充:

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