PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

การเลื่อน jQuery UI tab อัตโนมัติ ตามเวลาที่กำหนด

30 October 2010 By


ศึกษาความสามารถในส่วนอื่นของ jQuery UI Tab ได้ด้วยตัวเองที่
http://jqueryui.com/demos/tabs/#method-rotate

ตัวอย่าง

รายละเอียดย่อยหัวข้อแท็บที่ 1

รายละเอียดย่อยหัวข้อแท็บที่ 2

รายละเอียดย่อยหัวข้อแท็บที่ 3

โค้ดสำหรับทดสอบ
 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery ui tab</title>
<?php
$jquery_ui_v="1.8.5";
$theme=array(
	"0"=>"base",
	"1"=>"black-tie",
	"2"=>"blitzer",
	"3"=>"cupertino",
	"4"=>"dark-hive",
	"5"=>"dot-luv",
	"6"=>"eggplant",
	"7"=>"excite-bike",
	"8"=>"flick",
	"9"=>"hot-sneaks",
	"10"=>"humanity",
	"11"=>"le-frog",
	"12"=>"mint-choc",
	"13"=>"overcast",
	"14"=>"pepper-grinder",
	"15"=>"redmond",
	"16"=>"smoothness",
	"17"=>"south-street",
	"18"=>"start",
	"19"=>"sunny",
	"20"=>"swanky-purse",
	"21"=>"trontastic",
	"22"=>"ui-darkness",
	"23"=>"ui-lightness",
	"24"=>"vader"
);
$jquery_ui_theme=$theme[6];
?>
<link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/<?=$jquery_ui_v?>/themes/<?=$jquery_ui_theme?>/jquery-ui.css" />
<style type="text/css">
/* ปรับขนาดตัวอักษรของข้อความใน tabs 
สามารถปรับเปลี่ยน รายละเอียดอื่นๆ เพิ่มเติมเกี่ยวกับ tabs
*/
.ui-tabs{
	font-family:tahoma;
	font-size:11px;
}
</style>
</head>

<body>

<div id="tabs">
	<ul>
		<li><a href="#tabs-1">หัวข้อแท็บที่ 1</a></li>
		<li><a href="#tabs-2">หัวข้อแท็บที่ 2</a></li>
		<li><a href="#tabs-3">หัวข้อแท็บที่ 3</a></li>
	</ul>
	<div id="tabs-1">
		<p>รายละเอียดย่อยหัวข้อแท็บที่ 1</p>
	</div>
	<div id="tabs-2">
		<p>รายละเอียดย่อยหัวข้อแท็บที่ 2</p>
	</div>
	<div id="tabs-3">
		<p>รายละเอียดย่อยหัวข้อแท็บที่ 3</p>
	</div>
</div>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function(){
	// แทรกโค้ต jquery
	// กำหนดแบบทั่วไป
//	$("#tabs").tabs()
	
	// กำหนดแบบ ให้เลื่อน tab อัตโนมัติตามเวลาที่กำหนด
	// 1000 เท่ากับ 1 วินาที ตัวอย่างกำหนด 5000 เลื่อนทุกๆ 5 วินาที
	// true คือเมื่อเลื่อนจนถึงลำดับสุดท้าย ให้วนกลับมาเริ่มต้นใหม่
	// fกำหนดเป็น false ถ้าต้องการให้ทำการเลื่อนอัตโนมัติแค่ครั้งเดียว
	$("#tabs").tabs().tabs("rotate", 5000,true); 

	// กำหนดแบบเลื่อนหัวข้อซ้าย ขวาได้
	//	$("#tabs").tabs().find(".ui-tabs-nav").sortable({axis:'x'});
	
	// กำหนดแบบให้ซ่อนรายละเอียด เมื่อคลิกที่หัวข้อแท็บซ้ำ
	// $("#tabs").tabs({collapsible: true});

	 // กำหนดให้แสดงรายละเอียดเมื่อนำเมาท์มาอยู่เหนือหัวข้อแท็บ
	 // $("#tabs").tabs({event: 'mouseover'});
});
</script>

</body>
</html>

 


Tags:: tab jquery jquery ui





URL สำหรับอ้างอิง