jQuery插件之选项卡插件

最新推荐文章于 2022-04-12 08:47:11 发布

w_l_j

最新推荐文章于 2022-04-12 08:47:11 发布

阅读量1.8k

点赞数 1

文章标签： jquery插件 tabs stylesheet jquery function div

本文链接：https://blog.csdn.net/w_l_j/article/details/7396752

版权

选项卡（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>

w_l_j

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery插件之选项卡插件

选项卡（tabs）在页面中的使用非常广泛，尤其是各大门户网站的首页，因为以选项卡形式可以实现使用少量代码的空间展示更多内容的效果，同时，其快速的切换效果，也增加了用户的体验。在jQuery UI中，通过在页面中导入tabs插件，并调用插件中的tabs()方法直接针对列表生成对应的菜单，轻松实现这种选项卡的功能。其调用的语法格式如下：tabs(options)其中选项options的常用参数如下
复制链接

扫一扫