แท็บเมนู tab menu แนวตั้งอย่างง่าย ด้วย jQuery
08 February 2011ตัวอย่างแท็บเมนู tab menu แนวตั้งอย่างง่าย ด้วย jQuery สำหรับแสดงข้อมูล เป็นแนวทาง
สามารถปรับแต่งการแสดงผลได้ตามต้องการ หรือนำไปประยุกต์ใช้กับการดึงข้อมูลแบบ ajax
เพิ่มเติม
ตัวอย่างโค้ดทั้งหมด
<!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>vertical icon tab</title>
<style type="text/css">
ul.ver_icon_tab{
position:relative;
float:left;
list-style:none;
padding:0px;
margin:0px;
display:block;
width:500px; /* ความกว้างทั้งหมด = ความกว้างเมนูด้านซ้าย + ความกว้างเนื้อหา ฝั่งขวา */
height:250px; /* ความสูงทั้งหมด */
background-color:#9CF;
}
ul.ver_icon_tab li.b_icon{
position:absolute;
padding:0px;
margin:0px;
list-style:none;
display:block;
width:100px; /* ความกว้างเมนูด้านซ้าย */
height:50px; /* ความสูงเมนูด้านซ้าย */
}
ul.ver_icon_tab li.b_icon a{
display:block;
width:100px; /* ความกว้างเมนูด้านซ้าย */
height:50px; /* ความสูงเมนูด้านซ้าย */
cursor:pointer;
}
ul.ver_icon_tab li.b_icon ul{
position:absolute;
padding:0px;
margin:0px;
list-style:none;
top:0px;
left:100px; /* ขยับความกว้างเนื้อหา ฝั่งขวา ออกมา เท่ากับ ความกว่างเมนูด้านซ้าย */
}
ul.ver_icon_tab li.b_icon ul li.vertical_detail_show{
position:absolute;
padding:0px;
margin:0px;
list-style:none;
display:none;
width:400px; /* ความกว้างของส่วนเนื้อหา ฝั่งขวา */
height:250px; /* ความสูงทั้งหมด */
}
</style>
</head>
<body>
<ul class="ver_icon_tab">
<li class="b_icon" style="background-color:#DDEAD9;"><a href="#"></a>
<ul>
<li class="vertical_detail_show" style="background-color:#DDEAD9;display:block;">Data 1</li>
</ul>
</li>
<li class="b_icon" style="background-color:#BDE3E7;"><a href="#"></a>
<ul>
<li class="vertical_detail_show" style="background-color:#BDE3E7;">Data 2</li>
</ul>
</li>
<li class="b_icon" style="background-color:#EEEFAB;"><a href="#"></a>
<ul>
<li class="vertical_detail_show" style="background-color:#EEEFAB;">Data 3</li>
</ul>
</li>
<li class="b_icon" style="background-color:#EBC8C1;"><a href="#"></a>
<ul>
<li class="vertical_detail_show" style="background-color:#EBC8C1;">Data 4</li>
</ul>
</li>
<li class="b_icon" style="background-color:#E2BEE9;"><a href="#"></a>
<ul>
<li class="vertical_detail_show" style="background-color:#E2BEE9;">Data 4</li>
</ul>
</li>
</ul>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function(){
$(".b_icon").each(function(j,k){
var top_p=(50*j)+"px"; /* 50 คือความสูงเมนูด้านซ้าย */
var top_p2="-"+(50*j)+"px"; /* 50 คือความสูงเมนูด้านซ้าย */
$(this).css("top",top_p);
$(this).find("li.vertical_detail_show").css("top",top_p2);
});
$("li.b_icon a").click(function(){
if($(this).parent("li").hasClass("b_icon")==true){
$("li.vertical_detail_show").hide();
$(this).parent("li").find("li.vertical_detail_show").show();
}
});
});
</script>
</body>
</html>
บทความในหมวดที่่น่าสนใจ อื่นๆ
บทความคนเข้าอ่านวันนี้
13 Oct 08 คำสั่ง SQL BETWEEN อ่าน 9316 10 Sep 10 การแสดง ข้อมูลใน infowindows ของ google map ด้วย ajax ใน jQuery อ่าน 3342 26 Mar 10 ความแตกต่าง ระหว่าง ฟังก์ชัน strstr กับ strrchr และ การประยุกต์ ใช้งาน อ่าน 1272 07 Jun 09 กำหนดรายการใน listbox ที่ 2 จากเงื่อนไขการเลือก listbox ที่ 1 ด้วย ajax ใน jquery อย่างง่าย อ่าน 5731 04 Jan 10 ดึงไฟล์ xml (rss) ไฟล์แบบ cross domain มาแสดงด้วย ajax ใน jQuery อย่างง่าย อ่าน 3700 12 May 10 แนวทาง การดึงข้อมูล แบบ real time ด้วย ajax ใน jQuery อ่าน 9203 09 Nov 11 แนวทางการสร้างเมนูหลายภาษา อย่างง่ายด้วย php และ javascript อ่าน 1205 09 Oct 10 สร้าง album และ อัพโหลด รูป photo ขึ้น facebook ด้วย php sdk อ่าน 3587 06 Jan 09 สร้างฟังก์ชัน javascript เช็ค check email อย่างง่าย อ่าน 5923 09 Oct 09 ขยายขนาดความสูงของ iframe ตามความสูงของเพจที่แสดง ด้วย jQuery อ่าน 3653 02 Dec 10 แทรก emoticon ด้วย javascript ฟังก์ชัน ให้กับ ckeditor อ่าน 2320 05 Jul 10 ทบทวน วันที่ date object ใน javascript อ่าน 2831 18 Mar 09 เพิ่มลดขนาดตัวอักษรในหน้าเว็บแบบง่ายด้วย jQuery อ่าน 3155 14 Mar 09 สร้าง tooltip กล่องข้อความตัวช่วยเหลือได้ง่ายด้วย jQuery อ่าน 7993 12 Sep 10 การดึง attribute และค่าต่างๆ จาก xml ไฟล์ด้วย jQuery อย่างง่าย อ่าน 2531 13 Oct 08 คำสั่ง SQL LIKE อ่าน 4599 17 Nov 09 พิมพ์ข้อมูลใน textbox เพื่อ เพิ่มรายการใน listbox ด้วย jQuery อ่าน 4713 06 Dec 11 การใช้งาน css จัดตำแหน่ง ซ้อนข้อความบนรูปภาพอย่างง่าย อ่าน 967 25 Sep 08 ทบทวนคำสั่ง sql อ่าน 9303 04 Mar 09 ใช้ jQuery ย้ายค่าระหว่าง multiple list box อย่างง่าย อ่าน 6980