วันศุกร์ที่ 6 มกราคม พ.ศ. 2555

สอนทำ Tab menu ขั้นเทพ ด้วย jQuery

Tab menu for jQuery
        ขึ้นหัวบล็อกอย่างนี้ Tab menu ที่ผมจะนำเสนอในวันนี้ต้องไม่ธรรมดาครับ เป็นCodeที่เขียนขึ้นเองครับ เป็นTab menuแสดงผลแบบเลื่อนแสดงผลอัตโนมัติครับ โดยที่เราไม่จำเป็นต้องคลิกเลือกแถบ Menu ของ Tab ทุกครั้งที่เราต้องการจะดูครับ มันจะเลื่อนไปยังMenuถัดๆไปของTabให้เราอัตโนมัติ การทำงานจะเหมือนกับการทำสไลด์โชว์รูปภาพนั่นแหละครับ
        สำหรับ Tab menu นี้ สามารถดูตัวอย่างจากเว็บ sanook และ mthai ผมได้แนวคิดมาจากเว็บเหล่านั้นแหละครับ ^__^ “

มาดูโค๊ดกันเลยครับ
<!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" />
<script src="../js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
//Script By http://php-for-ecommerce.blogspot.com
$ttab=function(ele,time){
var tabs_show=ele.children('.ttabshow');
ttabtt=ele.children('.ttabhead').children('.ttab_cont_title');
ttabtt.find('li:first').addClass('ttabactive');
$ttab_auto(ttabtt,time,tabs_show);
ttabtt.find('li').click(function(){
clearInterval(play);
$ttab_show(ttabtt,$(this).attr('ttabno'),tabs_show);
$ttab_auto(ttabtt,time,tabs_show);
});
tabs_show.hover(function(){
clearInterval(play);
}, function() {
$ttab_auto(ttabtt,time,tabs_show);
}); 
}
$ttab_show=function(ttabtt,tabno,tabshow){
$test=ttabtt.find('li').removeClass('ttabactive');
ttabtt.find('li[ttabno="'+tabno+'"]').addClass('ttabactive');
var w_tab=tabshow.find('li').width();
var wi=w_tab*(tabno-1);
tabshow.find('.ttabs').css({'display':'none','left':-wi});
tabshow.children('.ttabs').fadeIn(1000);
}
$ttab_auto = function(ttabtitle,time,showarea){
play = setInterval(function(){ 
ttab = ttabtitle.find('.ttabactive').next();
if ( ttab.length === 0) {
ttab = ttabtitle.find('li:first');
}
$ttab_show(ttabtitle,ttab.attr('ttabno'),showarea);
}, time); 
}
$(document).ready(function(){
$ttab($('.ttabcont'),4000);//$ttab(พื้นที่แสดงTab,เวลาสำหรับแสดงผล แบบmillisecond)
});
</script>
<title>สร้าง Tab menu ด้วย jQuery</title>
<style>
.ttabcont {
font-family:Tahoma, Geneva, sans-serif;
float:left;
width:750px;
overflow: hidden;
position: relative;
}
.ttabhead {
clear:both;
background:#CC0;
height:30px;
}
.ttabcont ul {
list-style:none;
}
.ttabhead ul li {
float:left;
color:#FFF;
font-weight:bold;
margin:0px 2px 0px 2px;
line-height:30px;
cursor:pointer;
padding:0 15px;
}
.ttabactive {
background:#993;
}
.ttabshow {
float: left;
width: 1000em;
overflow: hidden;
position: relative;
background:#993;
padding:5px;
}
.ttabshow ul {
float: left;
margin: 0;
padding: 0;
overflow: hidden;
position: relative;
}
.ttabshow ul li {
float: left;
margin: 0px;
width:750px;
}
</style>
</head>
<body>
<div class="ttabcont">
<div class="ttabhead">
<ul class="ttab_cont_title">
<li ttabno="1">สินค้าแนะนำ</li>
<li ttabno="2">สินค้าขายดี</li>
<li ttabno="3">สินค้ามาใหม่</li>
</ul>
<br style="clear:both;" />
</div>
<div class="ttabshow">
<ul class="ttabs"><!--สามารถเขียนคำสั่งดึงข้อมูลจาก database มาแสดงภายใต้ tag <li> ได้-->
<li><img src="prod_img/thumb/1DXMcUJqLbOj.gif" width="90" height="90" /><img src="prod_img/thumb/1DXMcUJqLbOj.gif" width="90" height="90" /><img src="prod_img/thumb/1DXMcUJqLbOj.gif" width="90" height="90" /><img src="prod_img/thumb/1DXMcUJqLbOj.gif" width="90" height="90" /><img src="prod_img/thumb/1DXMcUJqLbOj.gif" width="90" height="90" /><img src="prod_img/thumb/1DXMcUJqLbOj.gif" width="90" height="90" /><img src="prod_img/thumb/1DXMcUJqLbOj.gif" width="90" height="90" /><br /><img src="prod_img/thumb/1DXMcUJqLbOj.gif" width="90" height="90" /><img src="prod_img/thumb/1DXMcUJqLbOj.gif" alt="" width="90" height="90" /><img src="prod_img/thumb/1DXMcUJqLbOj.gif" alt="" width="90" height="90" /><img src="prod_img/thumb/1DXMcUJqLbOj.gif" alt="" width="90" height="90" /><img src="prod_img/thumb/1DXMcUJqLbOj.gif" alt="" width="90" height="90" /><img src="prod_img/thumb/1DXMcUJqLbOj.gif" alt="" width="90" height="90" /><img src="prod_img/thumb/1DXMcUJqLbOj.gif" alt="" width="90" height="90" /><br />
<img src="prod_img/thumb/1DXMcUJqLbOj.gif" alt="" width="90" height="90" /><img src="prod_img/thumb/1DXMcUJqLbOj.gif" alt="" width="90" height="90" /><img src="prod_img/thumb/1DXMcUJqLbOj.gif" alt="" width="90" height="90" /><img src="prod_img/thumb/1DXMcUJqLbOj.gif" alt="" width="90" height="90" /><img src="prod_img/thumb/1DXMcUJqLbOj.gif" alt="" width="90" height="90" /><img src="prod_img/thumb/1DXMcUJqLbOj.gif" alt="" width="90" height="90" /><img src="prod_img/thumb/1DXMcUJqLbOj.gif" alt="" width="90" height="90" /> </li>
<li><img src="prod_img/thumb/2sXIWf6SteNB.gif" width="90" height="90" /><img src="prod_img/thumb/2sXIWf6SteNB.gif" width="90" height="90" /><img src="prod_img/thumb/2sXIWf6SteNB.gif" alt="" width="90" height="90" /><img src="prod_img/thumb/2sXIWf6SteNB.gif" alt="" width="90" height="90" /><img src="prod_img/thumb/2sXIWf6SteNB.gif" alt="" width="90" height="90" /><img src="prod_img/thumb/2sXIWf6SteNB.gif" alt="" width="90" height="90" /><img src="prod_img/thumb/2sXIWf6SteNB.gif" alt="" width="90" height="90" /><br />
<img src="prod_img/thumb/2sXIWf6SteNB.gif" alt="" width="90" height="90" /><img src="prod_img/thumb/2sXIWf6SteNB.gif" alt="" width="90" height="90" /><img src="prod_img/thumb/2sXIWf6SteNB.gif" alt="" width="90" height="90" /><img src="prod_img/thumb/2sXIWf6SteNB.gif" alt="" width="90" height="90" /> <img src="prod_img/thumb/2sXIWf6SteNB.gif" alt="" width="90" height="90" /><img src="prod_img/thumb/2sXIWf6SteNB.gif" alt="" width="90" height="90" /><img src="prod_img/thumb/2sXIWf6SteNB.gif" alt="" width="90" height="90" /><br />
<img src="prod_img/thumb/2sXIWf6SteNB.gif" alt="" width="90" height="90" /><img src="prod_img/thumb/2sXIWf6SteNB.gif" alt="" width="90" height="90" /><img src="prod_img/thumb/2sXIWf6SteNB.gif" alt="" width="90" height="90" /><img src="prod_img/thumb/2sXIWf6SteNB.gif" alt="" width="90" height="90" /><img src="prod_img/thumb/2sXIWf6SteNB.gif" alt="" width="90" height="90" /><img src="prod_img/thumb/2sXIWf6SteNB.gif" alt="" width="90" height="90" /><img src="prod_img/thumb/2sXIWf6SteNB.gif" alt="" width="90" height="90" /> </li>
<li><img src="prod_img/thumb/cfUVlmomEUyf.gif" width="90" height="75" /><img src="prod_img/thumb/cfUVlmomEUyf.gif" alt="" width="90" height="75" /><img src="prod_img/thumb/cfUVlmomEUyf.gif" alt="" width="90" height="75" /><img src="prod_img/thumb/cfUVlmomEUyf.gif" alt="" width="90" height="75" /><img src="prod_img/thumb/cfUVlmomEUyf.gif" alt="" width="90" height="75" /><img src="prod_img/thumb/cfUVlmomEUyf.gif" alt="" width="90" height="75" /><img src="prod_img/thumb/cfUVlmomEUyf.gif" alt="" width="90" height="75" /><br />
<img src="prod_img/thumb/cfUVlmomEUyf.gif" alt="" width="90" height="75" /><img src="prod_img/thumb/cfUVlmomEUyf.gif" alt="" width="90" height="75" /><img src="prod_img/thumb/cfUVlmomEUyf.gif" alt="" width="90" height="75" /><img src="prod_img/thumb/cfUVlmomEUyf.gif" alt="" width="90" height="75" /><img src="prod_img/thumb/cfUVlmomEUyf.gif" alt="" width="90" height="75" /><img src="prod_img/thumb/cfUVlmomEUyf.gif" alt="" width="90" height="75" /><img src="prod_img/thumb/cfUVlmomEUyf.gif" alt="" width="90" height="75" /><br />
<img src="prod_img/thumb/cfUVlmomEUyf.gif" alt="" width="90" height="75" /><img src="prod_img/thumb/cfUVlmomEUyf.gif" alt="" width="90" height="75" /><img src="prod_img/thumb/cfUVlmomEUyf.gif" alt="" width="90" height="75" /><img src="prod_img/thumb/cfUVlmomEUyf.gif" alt="" width="90" height="75" /><img src="prod_img/thumb/cfUVlmomEUyf.gif" alt="" width="90" height="75" /><img src="prod_img/thumb/cfUVlmomEUyf.gif" alt="" width="90" height="75" /><img src="prod_img/thumb/cfUVlmomEUyf.gif" alt="" width="90" height="75" /> </li>
</ul>
</div>
<br style="clear:both;" />
</div>
</body>
</html>
วิธีเรียกใช้งานคือคำสั่ง
$(document).ready(function(){//หมายถึง ถ้าdocumentนี้ถูกโหลดขึ้นมาแล้ว ให้ tab function ($ttab) ทำงานได้
$ttab($('.ttabcont'),4000);//$ttab(พื้นที่แสดงTab,เวลาแสดงผลแบบmillisecond) $ttab คือชื่อ function นะจะ
});
        คุณสามารถนำโค๊ดที่ผมสอนไปดัดแปลงกับเว็บไซต์ของคุณได้ นี่เป็นแค่ตัวอย่างคร่าวๆครับ ผมไม่ได้เขียนคำสั่ง PHP+MySQL เพื่อดึงข้อมูลจากฐานข้อมูลมาแสดง เพราะขี้เกียจครับ ^__^''

ความสามารถของโปรแกรม
1. เลื่อนแสดงผลจากซ้ายไปขวาอัตโนมัติ โดยที่ไม่จำเป็นต้องคลิกเลือก Menu ของ Tab ทุกครั้ง
2. หากคลิกเลือกที่ Menu ของ Tab ใดๆ เวลาการเลื่อนแสดงผล จะถูกResetให้เป็น 0 ใหม่อีกครั้ง
3. หากกำลังดูเนื้อหาใน Tab menu ใดๆอยู่ โดยที่เมาส์ วางอยู่บนพื้นที่ Tab menu นั้นๆ (Mouse hover) เวลาจะหยุดและResetให้เป็น 0 การแสดงผลแบบเลื่อนอัตโมมัติจะหยุดนิ่ง แต่เมื่อเอาเมาส์ออก (Mouse out) เวลาก็จะเริ่มทำงานต่อไป การแสดงผลก็จะเป็นแบบเลื่อนอัตโนมัติต่อไป
4. ใน1หน้าเว็บเพจ สามารถแสดง tab ได้ไม่จำกัด โดยสามารถใช้คำสั่ง
$ttab($('.ttabcont1'),4000);
$ttab($('.ttabcont2'),4000);
$ttab($('.ttabcont3'),4000);
.
.
.
5.แสดงผลไม่ผิดเพี๊ยนและทำงานได้ดีทุกเบราเซอร์ เพราะเราใช้jQuery
DEMO ->http://pluto.host22.com/tab-jquery/tabjquery.php
เขียนโดย ที่ ป้ายกำกับ:

2 ความคิดเห็น :

  1. ไม่ระบุชื่อ15 กุมภาพันธ์ 2555 เวลา 17:46

    ผมลองเอา code ไป run แล้วปรากฏว่ารูปใน tab แรก ไปแสดงใน tab อื่นหมดเลยครับ มีวิธีแก้มั้ยครับ

    ตอบลบ
    คำตอบ
    1. PHPWIN15 กุมภาพันธ์ 2555 เวลา 17:52

      ลองเช็คโค๊ดHTML หรือCSS ที่คุณได้แก้ไขดูให้ดีครับ
      แนะนำให้ใช้ตาราง(Table)ในการจัดLayoutแสดงผลรูปในTabครับ

      ลบ

สมัครสมาชิก: ส่งความคิดเห็น ( Atom )