关闭

jQuery插件之选项卡插件

标签: jquery插件tabsstylesheetjqueryfunctiondiv
1565人阅读 评论(0) 收藏 举报
选项卡(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>

1
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:402559次
    • 积分:5930
    • 等级:
    • 排名:第4422名
    • 原创:210篇
    • 转载:15篇
    • 译文:0篇
    • 评论:38条
    文章分类
    最新评论