ศึกษาความสามารถในส่วนอื่นของ 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>
