ค้นหา และศึกษาบทความด้านคอมพิวเตอร์ การเขียนเว็บไซต์ ทำเว็บไซต์ ทำโปรแกรม ทำโปรแกรมบนมือถือ ออกแบบเว็บไซต์ การเขียนโปรแกรม การออกแบบเว็บไซต์ ฐานข้อมูล รวมไปถึงข่าวแวดวง IT, Computer และบทความต่าง ๆ ที่ถูกคัดสรรมาอย่างดี ด้วยเนื้อหาที่สดใหม่ กระชับ และอ่านเข้าใจง่าย ซึ่งจะทำให้คุณสามารถที่จะแก้ไขปัญหาต่าง ๆ จากบทความ และองค์ความรู้ที่ทางเราเลือกมาให้ โดยบทความทุกบทความถูกเขียนขึ้นใหม่ ในเรื่องต่าง ๆ เพื่อนำเสนอมุมมองใหม่ ๆ ให้กับผู้อ่านทุกคน
|
ประเภทบทความ
|
|
บทความด้านคอมพิวเตอร์
Tabs Menu jQuery UI การสร้าง Tabs Menu ด้วย jQuery UI
บทความวันที่ 25 พฤศจิกายน 2555
Tabs คือ คำสั่งของ jQuery UI มีไว้สำหรับการสร้างเมนูการแสดงผลข้อมูลในรูปแบบของ Tabs ซึ่งมีประโยชน์อย่างมากเวลาต้องการสร้างเว็บไซต์ที่ประกอบไปด้วย Tabs ต่าง ๆ เพื่อให้ผู้ใช้ได้เลือกข้อมูลตามที่ต้องการ
ภาพรวมของ Tabs Menu
1. ใช้คำสั่ง $('[Target_Element]').tabs() สำหรับการสร้าง Tabs
2. การสร้างเมนูย่อยของ Tabs ต่าง ๆ ดำเนินการโดย Tags ul และ li
3. ส่วนรายละเอียดภายใน Tabs ต่าง ๆ ดำเนินการโดย Tags div
ตัวอย่างโปรแกรม
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Tooltip - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<script>
$(function() {
$( '#tabs' ).tabs();
});
</script>
</head>
<body>
<div id='tabs'>
<ul>
<li><a href='#tab1'>Tab 1</a></li>
<li><a href='#tab2'>Tab 2</a></li>
<li><a href='#tab3'>Tab 3</a></li>
</ul>
<div id='tab1'>Tab 1 Detail</div>
<div id='tab2'>Tab 2 Detail</div>
<div id='tab3'>Tab 3 Detail</div>
</div>
</body>
</html>
ผลลัพธ์
.png)
คำค้นหา Tabs Menu jQuery UI, รับทำเว็บ, รับเขียนเว็บ, เรียนเขียนโปรแกรม
|
