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>

相关文章推荐

封装jquery插件很简单

其实,封装jquery插件很简单。 先看看,封装模板是什么?看下这个light-weight模式: javascript 代码 111213141...

【JQuery】JQuery封装的小例子

一、前言      JQuery是一个JS函数库,可以简单标记被添加到网页中。这个js库封装了各种选择器,可以捕获我们使用的html页面的节点。然后对html进行操作。二、封装是什么      我们可...

tabox 左右滑动选项卡封装jquery插件

/***demo******/ tabBOX左右滑动   body{margin:0;padding:0;}   ul,li{margin:0;padding:0;l...

jQuery插件2(拖拽draggable/放置droppable/排序sortable/面板折叠accordion/横向选项卡tabs/对话框dialog/menu/微调spinner/框提示)

1、拖曳插件——draggable 通过调用draggable()方法,实现各种拖曳元素的效果,调用格式如下: $(selector). draggable({options}) options...

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

jQuery插件应用之 --- 选项卡插件的使用 一  首先来介绍一下选项卡插件的作用 jQuery UI插件折叠板可以实现页面中指定区域的折叠效果,即通过单击某个面板中的标题栏,就会展开相应的内...

jQuery响应式内容选项卡插件效果

  • 2017年05月02日 10:10
  • 33KB
  • 下载

Jquery选项卡插件

  • 2014年10月27日 15:54
  • 59KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQuery插件之选项卡插件
举报原因:
原因补充:

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