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

最新推荐文章于 2024-10-09 11:42:00 发布

hanxiaoshuang321123

最新推荐文章于 2024-10-09 11:42:00 发布

阅读量806

点赞数

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

本文链接：https://blog.csdn.net/hanxiaoshuang123/article/details/7396962

版权

jQuery插件应用之 --- 选项卡插件的使用
一  首先来介绍一下选项卡插件的作用
jQuery UI插件折叠板可以实现页面中指定区域的折叠效果，这种效果称”手风琴”，即通过单击某个面板中的标题栏，就会展开相应的内容，当点击其他面板标题栏时，已展开的内容会自动关闭，通过这种方式，实现多个面板数据在一个页面中有序展示。
二   选项卡插件的使用
1．	首先来介绍一下折叠面板所用的参数
（1）collapsible是否可折叠选项卡的内容，设置一个布尔值，如果为true，那么允许用户可折叠选项卡的内容，即首次点击展开，再点击关闭，默认值为false。 
（2）disable 设置不可用选项卡
（3）event 设置展开选项的事件，默认值为”click”，也可以设置双击，鼠标划过事件
（5）fx设置切换选项卡时的一些动画效果
（6）设置被选中选项卡的index
2.我们首先来创建一个html页面，如下：
<body>
    <div>
    	<div>
    		<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">N我是第三个选项卡</div>
		</div>
    	</div>
    </div>
  </body>

3.通过编写js代码来实现功能，需要注意的是要引入文件
<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 rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/ui-lightness/jquery-ui-1.8.18.custom.css">
  <script type="text/javascript">
然后代码的使用
<script type="text/javascript">
  //页面加载完毕触发匿名函数
  	$(document).ready(function(){
  		$('#tabs').tabs({
  			collapsible:true,
  			selected:1,//默认展开的是第1个面板  下标从0开始的 
  			event:"mouseover",
  			//动画效果 
  			fx:{
opacity:"toggle",//显示的动画效果  还有show 和fadeIn,toggle  也可以设置为opacity:0.2  0.2是透明度，透明度是0-1,1代表是完全不透明
  				height:"toggle" //高度本身展开的方式 
  			},                                                                  
  			disabled:[1,2],  //1和2不可用的面板
  		});
  		//改变原有选项卡的内容
  		$('#tabs').tabs("url",2,"tab5.jsp");
  		//添加选项卡 
  		$('#tabs').tabs("add","tab5.jsp","four");
  		//移除选项卡
  		$('#tabs').tabs("remove",1);
  	});
  </script>

在改变原有的选项卡的内容的时候需要在html中插入一条语句：
<li><a href="${pageContext.request.contextPath}/tabs/tab4.jsp">4</a></li>
内部是通过ajax来实现的


执行的效果为：