天天看点
返回

转载：JqueryUI学习笔记-选项卡tabs

转载于：http://blog.csdn.net/dc15822445347/article/details/22308901 [html] view plain copy print ?

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="UTF-8">  
  5. <title>Insert title here</title>  
  6. <link rel="stylesheet"  
  7.     href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">  
  8. <script src="http://code.jquery.com/jquery-1.9.1.js"></script>  
  9. <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>  
  10. <script type="text/javascript">  
  11.     $(function() {  
  12.         $("#tabs").tabs({  
  13.             //配置当前打开的选项卡的索引，可以使用bool值或者int值，默认为1  
  14.             //bool值仅当collapsible属性为true时可以使用，表示默认选项卡为折叠状态  
  15.             //如果是int值，表示当前打开的选项卡的索引，如果是负数将从最后的选项卡开始索引  
  16.             active : true,  
  17.             //配置选项卡是否可以折叠，默认是false  
  18.             collapsible : false,  
  19.             //禁用选项卡，可以使用bool值或者int数组，但是用了感觉没效果啊，因为是disabled，不是disable，fuck  
  20.             disabled : false,  
  21.             //激活选项卡的方式，默认为click  
  22.             //"mouseover"表示鼠标移动到标题上即激活选项卡  
  23.             //"click"表示鼠标点击激活选项卡  
  24.             event : "click",  
  25.             //设置选项卡高度，可以配置为"auto","fill","content"，默认为"content"  
  26.             //"auto"表示选项卡高度将被设置成最高的那个选项卡的高度  
  27.             //"fill"表示扩展到基于选项卡的父容器的可用高度  
  28.             //"content"表示每个选项卡将以自身内容为高度  
  29.             heightStyle : "content",  
  30.             //设置选项卡隐藏的方式,可以设置bool值，number值，String值或者Object，默认值为null  
  31.             //bool值表示是否有隐藏特效，如果为true，将以默认的时间和动画淡出选项卡  
  32.             //number值表示选项卡将以指定的时间（单位毫秒）和默认动画淡出。  
  33.             //String值表示选项卡将以指定的动画效果隐藏，动画时间为默认值  
  34.             //Object值表示可以配置动画的类型和动画时间以及动画的延迟时间,effect,delay,duration,easing  
  35.             hide : "slideUp",  
  36.             //设置选项卡显示的方式，参数和hide相同  
  37.             show : "blind",  
  38.             //设置选项卡激活之后的回调方法，即点击另外一个选项卡在show动画完成之后执行的方法  
  39.             //传入的ui对象有四个属性，他们都是Jquery对象  
  40.             //一个是newTab，代表新的选项卡，  
  41.             //一个是newPanel，代表新的选项卡的面板  
  42.             //一个是oldTab，代表旧的选项卡  
  43.             //一个是oldPanel，代表旧的选项卡的面板  
  44.             //也可以使用绑定的方式将该事件绑定到选项卡上:$("#tabs").on("tabsactivate",function(event,ui){});  
  45.             activate : function(event, ui) {  
  46.                 alert("选项卡已激活");  
  47.             },  
  48.             //设置选项卡即将激活的回调方法，可以阻止选项卡激活，传入的参数和activate事件相同，也可以使用绑定的方式将该事件绑定到选项卡上  
  49.             beforeActivate : function(event, ui) {  
  50.                 alert("选项卡即将激活");  
  51.             },  
  52.             //设置选项卡内容加载之前的回调方法，只有使用ajax加载内容的选项卡即将激活之后才会触发该事件  
  53.             //传入的ui对象中有四个属性  
  54.             //一个是tab，即将被加载的选项卡  
  55.             //一个是panel，即将被加载的选项卡面板  
  56.             //一个是jqXHR，发送请求的jquery封装的XMLHttpRequest对象  
  57.             //一个是ajaxSettings，ajax请求的配置属性  
  58.             beforeLoad : function(event, ui) {  
  59.                 alert("选项卡内容即将加载");  
  60.             }  
  61.         });  
  62.         $("#destroy").button().click(function() {  
  63.             $("#tabs").tabs("destroy");//销毁选项卡方法,会将选项卡变成普通的html标签  
  64.         });  
  65.         $("#disableAll").button().click(function() {  
  66.             $("#tabs").tabs("disable");//禁用所有选项卡方法  
  67.         });  
  68.         $("#disable1").button().click(function() {  
  69.             $("#tabs").tabs("disable", 0);//禁用某个选项卡方法  
  70.         });  
  71.         $("#enableAll").button().click(function() {  
  72.             $("#tabs").tabs("enable");//禁用某个选项卡方法  
  73.         });  
  74.         $("#enable1").button().click(function() {  
  75.             $("#tabs").tabs("enable", 0);//禁用某个选项卡方法  
  76.         });  
  77.         $("#load1").button().click(function() {  
  78.             $("#tabs").tabs("load", 0);//重新加载某个选项卡方法，应该与ajax加载同时使用  
  79.         });  
  80.         $("#isDisabled").button().click(function() {  
  81.             var disabled = $("#tabs").tabs("option", "disabled");//获取选项卡disabled属性值  
  82.             alert(disabled);  
  83.         });  
  84.         $("#show").button().click(function() {  
  85.             var show = $("#tabs").tabs("option", "show");//获取选项卡show属性值  
  86.             alert(show);  
  87.         });  
  88.         $("#option").button().click(function() {  
  89.             var option = $("#tabs").tabs("option");//获取选项卡所有配置项  
  90.             var props = "";  
  91.             for ( var p in option) {  
  92.                 props += p + " = " + option[p] + "\n";  
  93.             }  
  94.             alert(props);  
  95.         });  
  96.         $("#setActive0").button().click(function() {  
  97.             $("#tabs").tabs("option", "active", 0);//设置选项卡active属性值为0  
  98.         });  
  99.         $("#setMulti").button().click(function() {  
  100.             $("#tabs").tabs("option", {  
  101.                 show : false,  
  102.                 hide : false  
  103.             });//设置选项卡多个属性值  
  104.         });  
  105.         $("#reFresh").button().click(function() {  
  106.             $("#tabs").tabs("refresh");//刷新选项卡,效果不详，还有待考证  
  107.         });  
  108.         $("#sortTabs").button().click(function() {  
  109.             var tabs = $("#tabs");  
  110.             tabs.find(".ui-tabs-nav").sortable({  
  111.                 axis:"x",  
  112.                 stop:function(){  
  113.                     tabs.tabs("refresh");  
  114.                 }  
  115.             });  
  116.         });  
  117.     });  
  118. </script>  
  119. </head>  
  120. <body>  
  121.     <div id="tabs">  
  122.         <ul>  
  123.             <li><a href="#tab1"><span>tab1</span></a></li>  
  124.             <li><a href="#tab2"><span>tab2</span></a></li>  
  125.             <li><a href="content.html"><span>ajax加载</span></a></li>  
  126.             <li><a href="#tab4"><span>tab4</span></a></li>  
  127.         </ul>  
  128.         <div id="tab1">  
  129.             <p>第一个tab页面</p>  
  130.         </div>  
  131.         <div id="tab2">  
  132.             <p>第二个tab页面</p>  
  133.         </div>  
  134.         <div id="tab4">  
  135.             <p>第四个tab页面</p>  
  136.             <p>第四个tab页面</p>  
  137.             <p>第四个tab页面</p>  
  138.         </div>  
  139.     </div>  
  140.     <button id="destroy">销毁选项卡</button>  
  141.     <button id="disableAll">禁用所有选项卡</button>  
  142.     <button id="disable1">禁用第一个选项卡</button>  
  143.     <button id="enableAll">启用所有选项卡</button>  
  144.     <button id="enable1">启用第一个选项卡</button>  
  145.     <button id="load1">加载第一个选项卡</button>  
  146.     <button id="isDisabled">获取选项卡是否禁用状态</button>  
  147.     <button id="show">获取选项卡显示动画</button>  
  148.     <button id="option">获取选项卡所有配置信息</button>  
  149.     <button id="setActive0">激活第一个选项卡</button>  
  150.     <button id="setMulti">设置选项卡多个配置项</button>  
  151.     <button id="reFresh">刷新选项卡</button>  
  152.     <button id="sortTabs">使选项卡标题可移动</button>  
  153. </body>  
  154. </html>   
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet"
	href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" target="_blank" rel="external nofollow" >
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script type="text/javascript">
	$(function() {
		$("#tabs").tabs({
			//配置当前打开的选项卡的索引，可以使用bool值或者int值，默认为1
			//bool值仅当collapsible属性为true时可以使用，表示默认选项卡为折叠状态
			//如果是int值，表示当前打开的选项卡的索引，如果是负数将从最后的选项卡开始索引
			active : true,
			//配置选项卡是否可以折叠，默认是false
			collapsible : false,
			//禁用选项卡，可以使用bool值或者int数组，但是用了感觉没效果啊，因为是disabled，不是disable，fuck
			disabled : false,
			//激活选项卡的方式，默认为click
			//"mouseover"表示鼠标移动到标题上即激活选项卡
			//"click"表示鼠标点击激活选项卡
			event : "click",
			//设置选项卡高度，可以配置为"auto","fill","content"，默认为"content"
			//"auto"表示选项卡高度将被设置成最高的那个选项卡的高度
			//"fill"表示扩展到基于选项卡的父容器的可用高度
			//"content"表示每个选项卡将以自身内容为高度
			heightStyle : "content",
			//设置选项卡隐藏的方式,可以设置bool值，number值，String值或者Object，默认值为null
			//bool值表示是否有隐藏特效，如果为true，将以默认的时间和动画淡出选项卡
			//number值表示选项卡将以指定的时间（单位毫秒）和默认动画淡出。
			//String值表示选项卡将以指定的动画效果隐藏，动画时间为默认值
			//Object值表示可以配置动画的类型和动画时间以及动画的延迟时间,effect,delay,duration,easing
			hide : "slideUp",
			//设置选项卡显示的方式，参数和hide相同
			show : "blind",
			//设置选项卡激活之后的回调方法，即点击另外一个选项卡在show动画完成之后执行的方法
			//传入的ui对象有四个属性，他们都是Jquery对象
			//一个是newTab，代表新的选项卡，
			//一个是newPanel，代表新的选项卡的面板
			//一个是oldTab，代表旧的选项卡
			//一个是oldPanel，代表旧的选项卡的面板
			//也可以使用绑定的方式将该事件绑定到选项卡上:$("#tabs").on("tabsactivate",function(event,ui){});
			activate : function(event, ui) {
				alert("选项卡已激活");
			},
			//设置选项卡即将激活的回调方法，可以阻止选项卡激活，传入的参数和activate事件相同，也可以使用绑定的方式将该事件绑定到选项卡上
			beforeActivate : function(event, ui) {
				alert("选项卡即将激活");
			},
			//设置选项卡内容加载之前的回调方法，只有使用ajax加载内容的选项卡即将激活之后才会触发该事件
			//传入的ui对象中有四个属性
			//一个是tab，即将被加载的选项卡
			//一个是panel，即将被加载的选项卡面板
			//一个是jqXHR，发送请求的jquery封装的XMLHttpRequest对象
			//一个是ajaxSettings，ajax请求的配置属性
			beforeLoad : function(event, ui) {
				alert("选项卡内容即将加载");
			}
		});
		$("#destroy").button().click(function() {
			$("#tabs").tabs("destroy");//销毁选项卡方法,会将选项卡变成普通的html标签
		});
		$("#disableAll").button().click(function() {
			$("#tabs").tabs("disable");//禁用所有选项卡方法
		});
		$("#disable1").button().click(function() {
			$("#tabs").tabs("disable", 0);//禁用某个选项卡方法
		});
		$("#enableAll").button().click(function() {
			$("#tabs").tabs("enable");//禁用某个选项卡方法
		});
		$("#enable1").button().click(function() {
			$("#tabs").tabs("enable", 0);//禁用某个选项卡方法
		});
		$("#load1").button().click(function() {
			$("#tabs").tabs("load", 0);//重新加载某个选项卡方法，应该与ajax加载同时使用
		});
		$("#isDisabled").button().click(function() {
			var disabled = $("#tabs").tabs("option", "disabled");//获取选项卡disabled属性值
			alert(disabled);
		});
		$("#show").button().click(function() {
			var show = $("#tabs").tabs("option", "show");//获取选项卡show属性值
			alert(show);
		});
		$("#option").button().click(function() {
			var option = $("#tabs").tabs("option");//获取选项卡所有配置项
			var props = "";
			for ( var p in option) {
				props += p + " = " + option[p] + "\n";
			}
			alert(props);
		});
		$("#setActive0").button().click(function() {
			$("#tabs").tabs("option", "active", 0);//设置选项卡active属性值为0
		});
		$("#setMulti").button().click(function() {
			$("#tabs").tabs("option", {
				show : false,
				hide : false
			});//设置选项卡多个属性值
		});
		$("#reFresh").button().click(function() {
			$("#tabs").tabs("refresh");//刷新选项卡,效果不详，还有待考证
		});
		$("#sortTabs").button().click(function() {
			var tabs = $("#tabs");
			tabs.find(".ui-tabs-nav").sortable({
				axis:"x",
				stop:function(){
					tabs.tabs("refresh");
				}
			});
		});
	});
</script>
</head>
<body>
	<div id="tabs">
		<ul>
			<li><a href="#tab1" target="_blank" rel="external nofollow" ><span>tab1</span></a></li>
			<li><a href="#tab2" target="_blank" rel="external nofollow" ><span>tab2</span></a></li>
			<li><a href="content.html" target="_blank" rel="external nofollow" ><span>ajax加载</span></a></li>
			<li><a href="#tab4" target="_blank" rel="external nofollow" ><span>tab4</span></a></li>
		</ul>
		<div id="tab1">
			<p>第一个tab页面</p>
		</div>
		<div id="tab2">
			<p>第二个tab页面</p>
		</div>
		<div id="tab4">
			<p>第四个tab页面</p>
			<p>第四个tab页面</p>
			<p>第四个tab页面</p>
		</div>
	</div>
	<button id="destroy">销毁选项卡</button>
	<button id="disableAll">禁用所有选项卡</button>
	<button id="disable1">禁用第一个选项卡</button>
	<button id="enableAll">启用所有选项卡</button>
	<button id="enable1">启用第一个选项卡</button>
	<button id="load1">加载第一个选项卡</button>
	<button id="isDisabled">获取选项卡是否禁用状态</button>
	<button id="show">获取选项卡显示动画</button>
	<button id="option">获取选项卡所有配置信息</button>
	<button id="setActive0">激活第一个选项卡</button>
	<button id="setMulti">设置选项卡多个配置项</button>
	<button id="reFresh">刷新选项卡</button>
	<button id="sortTabs">使选项卡标题可移动</button>
</body>
</html>
web jquery ui tabs
上一篇: 张孝祥老师编写的EL函数标签库第8章 标准标签库(JSTL)
下一篇: 2.5 评估 GroupLens数据集

继续阅读