การเลื่อน jQuery UI tab อัตโนมัติ ตามเวลาที่กำหนด
30 October 2010ศึกษาความสามารถในส่วนอื่นของ 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>
บทความในหมวดที่่น่าสนใจ อื่นๆ
บทความคนเข้าอ่านวันนี้
10 Sep 10 การแสดง ข้อมูลใน infowindows ของ google map ด้วย ajax ใน jQuery อ่าน 4074 25 Sep 08 ใช้ PHP สร้าง Javascript อย่างง่าย อ่าน 4725 04 Oct 10 รู้จัก และใช้งาน php sdk สำหรับ facebook เพิ่มขึ้น อ่าน 4235 04 Aug 09 การส่งข้อมูลแบบ post ด้วย ajax ของ jquery อ่าน 11026 26 Aug 10 ใช้ comments.get เรียกและ บันทึก facebook comment ล่าสุด ลงฐานข้อมูล ด้วย jQuery อ่าน 2806 18 Aug 10 ใช้ php ดึงรูปภาพ จากโฟลเดอร์ มาแสดง พร้อม เทคนิค แบ่งหน้า อ่าน 6458 20 Aug 09 jQuery ป้องกัน การคลิกขวา ในหน้าเว็บไซต์ อ่าน 3045 24 Feb 11 ยืนยันการเปลี่ยนแปลงข้อมูลใน select option ด้วย javascript อย่างง่าย อ่าน 2530 03 Nov 10 การเพิ่ม ลบ แก้ไข แบ่งหน้า ข้อมูล ด้วย jquery ajax อย่างง่าย อ่าน 7029 22 Mar 09 สร้างฟังก์ชันโชว์รูปภาพขนาดใหญ่ด้วย javascript แบบง่าย อ่าน 5411 25 Mar 09 ใช้งาน cookie ในการจำค่าชื่อผู้ใฃ้และรหัสผ่าน ด้วย javascript และ php อ่าน 3104 19 Jul 10 การนำ ระบบสมาชิก ของ facebook มาประยุกต์ใช้ อ่าน 6735 14 Sep 10 การดึงข้อมูล จากฐานข้อมูล สร้าง xml ไฟล์ ด้วย php อ่าน 5484 20 Oct 10 สร้าง video playlist ของ jwplayer jquery plugin ด้วย xml และการใช้งาน อ่าน 4209 18 Oct 08 สร้างเมนูแนวตั้ง ด้วย CSS ไม่ต้องใช้ตารางอย่างง่าย อ่าน 4633 25 Sep 08 javasdcript กับการเข้ารหัส encoding และการถอดรหัส decoding อ่าน 4243 25 Sep 08 การจัดรูปแบบทศนิยมของตัวเลขใน javascript อ่าน 6199 06 Sep 10 ประยุกต์ การ invite friends ใน facebook มาใช้งาน อ่าน 3996 13 Oct 11 แนะนำการใช้งาน การเชื่อมต่อ facebook ด้วย php sdk v.3.1.1 อ่าน 2271 06 Jan 09 สร้างฟังก์ชัน javascript เช็ค check email อย่างง่าย อ่าน 6795