Scriptdd.com

บทความบ้าบ่นของคนทำเว็บ ปี 8

Ajax ตอนที่ 3 : เลียนแบบ Tab ให้แตกต่าง

หัวข้อ บทความ แทก Ajax | CSS | HTML | JavaScript

พอดีไปเห็น Tab Content ของพวก Web Portal Site สวยๆเท่ห์ดีประกอบกับ
อยากเอามาใช้กับงานที่ทำอยู่ ไปแกะๆ Code ดูแล้ว ... ตูเขียนเองดีกว่า ว่าแล้วมาเริ่มกันเลย


ต้นฉบับของเรา Sanook.com

จากที่ดูๆแล้วมันก็เรียบร้อยดีครับ แต่ผมไม่ชอบเพราะ ของ Sanook เพราะเค้าใช้ iframe ในการแสดงผล
ทำให้ผมทำ SEO กับ Website ได้ไม่สะดวก เสียดายเนื้อหาในกรอบที่วิ่งๆถ้าไปอยู่ใน iframe
google คงเอามาทำ index ไม่ได้ ฉะนั้นไหนๆก็ทำแล้วทำ How to ให้ทุกๆท่านอ่านกันด้วยดีกว่า
งานนี้ผมไม่ได้ Copy Sanook ครับแต่ผมเลียนแบบ Sanook ฮา


ทำกรอบ html + css ก่อน

tab.html

<HTML>
<HEAD>
<TITLE>Tab Rotate</TITLE>
</HEAD>
<link rel="stylesheet" href="tab.css" type="text/css" />
<BODY>

<div id="box_tab">

<ul id="box_menu" name="box_menu">
<li id="li1" name="li1"><a href='#'>MENU1</a></li>
<li id="li2" name="li2"><a href='#'>MENU2</a></li>
<li id="li3" name="li3"><a href='#'>MENU3</a></li>
<li id="li4" name="li4"><a href='#'>MENU4</a></li>
<li id="li5" name="li5"><a href='#'>MENU5</a></li>
</ul>

<div id="box_content1" NAME="box_content1">
<h1>เนื้อหาส่วนที่ 1 </h1>
เนื้อหาส่วนที่ 1 เนื้อหาส่วนที่ 1 เนื้อหาส่วนที่ 1 เนื้อหาส่วนที่ 1 <br/>
เนื้อหาส่วนที่ 1 เนื้อหาส่วนที่ 1 เนื้อหาส่วนที่ 1 เนื้อหาส่วนที่ 1 <br/>
</div>

<div id="box_content2" NAME="box_content2">
<h2>เนื้อหาส่วนที่ 2 </h2>
เนื้อหาส่วนที่ 2 เนื้อหาส่วนที่ 2 เนื้อหาส่วนที่ 2 เนื้อหาส่วนที่ 2 <br/>
เนื้อหาส่วนที่ 2 เนื้อหาส่วนที่ 2 เนื้อหาส่วนที่ 2 เนื้อหาส่วนที่ 2 <br/>
</div>

<div id="box_content3" NAME="box_content3">
<h3>เนื้อหาส่วนที่ 3 </h3>
เนื้อหาส่วนที่ 3 เนื้อหาส่วนที่ 3 เนื้อหาส่วนที่ 3 เนื้อหาส่วนที่ 3 <br/>
เนื้อหาส่วนที่ 3 เนื้อหาส่วนที่ 3 เนื้อหาส่วนที่ 3 เนื้อหาส่วนที่ 3 <br/>
</div>

<div id="box_content4" NAME="box_content4">
<h4>เนื้อหาส่วนที่ 4 </h4>
เนื้อหาส่วนที่ 4 เนื้อหาส่วนที่ 4 เนื้อหาส่วนที่ 4 เนื้อหาส่วนที่ 4 <br/>
เนื้อหาส่วนที่ 4 เนื้อหาส่วนที่ 4 เนื้อหาส่วนที่ 4 เนื้อหาส่วนที่ 4 <br/>
</div>

<div id="box_content5" NAME="box_content5">
<h5>เนื้อหาส่วนที่ 5 </h5>
เนื้อหาส่วนที่ 5 เนื้อหาส่วนที่ 5 เนื้อหาส่วนที่ 5 เนื้อหาส่วนที่ 5 <br/>
เนื้อหาส่วนที่ 5 เนื้อหาส่วนที่ 5 เนื้อหาส่วนที่ 5 เนื้อหาส่วนที่ 5 <br/>
</div>

</div>

</BODY>
</HTML>

tab.css

#box_tab {
width: 500px;
height: 500px;
margin: 0px 0px 0px 0px;
}

#box_menu{
width: 500px;
height: 20px;
margin: 0;
padding: 0;
font-family: Tahoma, Verdana, sans-serif;
font-size: 12px;
}

#box_menu li{
display: inline;
}


#box_menu li a{
padding: 10px;
text-decoration: none;
}

ผลที่ได้คือ HTML ที่แสดงผลโดยมีเมนูรอให้คลิกเป็น Text เรียงเป็นแถวไว้ดังรูป

Download Step 1


ขั้นตอนที่ 2 กำหนด css เพิ่มให้ซ่อนๆโชว์ๆ

tab.html

<HTML>
<HEAD>
<TITLE>Tab Rotate</TITLE>
</HEAD>
<link rel="stylesheet" href="tab.css" type="text/css" />
<BODY>

<div id="box_tab">

<ul id="box_menu" name="box_menu">
<li id="li1" name="li1"><a href='#'>MENU1</a></li>
<li id="li2" name="li2"><a href='#'>MENU2</a></li>
<li id="li3" name="li3"><a href='#'>MENU3</a></li>
<li id="li4" name="li4"><a href='#'>MENU4</a></li>
<li id="li5" name="li5"><a href='#'>MENU5</a></li>
</ul>

<div id="box_content1" name="box_content1">
<h1>เนื้อหาส่วนที่ 1 </h1>
เนื้อหาส่วนที่ 1 เนื้อหาส่วนที่ 1 เนื้อหาส่วนที่ 1 เนื้อหาส่วนที่ 1 <br/>
เนื้อหาส่วนที่ 1 เนื้อหาส่วนที่ 1 เนื้อหาส่วนที่ 1 เนื้อหาส่วนที่ 1 <br/>
</div>

<div id="box_content2" name="box_content2" class="hidden">
<h2>เนื้อหาส่วนที่ 2 </h2>
เนื้อหาส่วนที่ 2 เนื้อหาส่วนที่ 2 เนื้อหาส่วนที่ 2 เนื้อหาส่วนที่ 2 <br/>
เนื้อหาส่วนที่ 2 เนื้อหาส่วนที่ 2 เนื้อหาส่วนที่ 2 เนื้อหาส่วนที่ 2 <br/>
</div>

<div id="box_content3" name="box_content3" class="hidden">
<h3>เนื้อหาส่วนที่ 3 </h3>
เนื้อหาส่วนที่ 3 เนื้อหาส่วนที่ 3 เนื้อหาส่วนที่ 3 เนื้อหาส่วนที่ 3 <br/>
เนื้อหาส่วนที่ 3 เนื้อหาส่วนที่ 3 เนื้อหาส่วนที่ 3 เนื้อหาส่วนที่ 3 <br/>
</div>

<div id="box_content4" name="box_content4" class="hidden">
<h4>เนื้อหาส่วนที่ 4 </h4>
เนื้อหาส่วนที่ 4 เนื้อหาส่วนที่ 4 เนื้อหาส่วนที่ 4 เนื้อหาส่วนที่ 4 <br/>
เนื้อหาส่วนที่ 4 เนื้อหาส่วนที่ 4 เนื้อหาส่วนที่ 4 เนื้อหาส่วนที่ 4 <br/>
</div>

<div id="box_content5" name="box_content5" class="hidden">
<h5>เนื้อหาส่วนที่ 5 </h5>
เนื้อหาส่วนที่ 5 เนื้อหาส่วนที่ 5 เนื้อหาส่วนที่ 5 เนื้อหาส่วนที่ 5 <br/>
เนื้อหาส่วนที่ 5 เนื้อหาส่วนที่ 5 เนื้อหาส่วนที่ 5 เนื้อหาส่วนที่ 5 <br/>
</div>

</div>

</BODY>
</HTML>

tab.css เพิ่ม

.hidden{
display:none;
}

.font18{
font-size:18px;
}

.font12{
font-size:12px;
}

ผลที่ได้ Class hidden จะไปทำให้ div ต่างๆถูกซ่อนเอาไว้ส่วน font18 และ font12 ผมจะนำไปใช้ในขั้นตอนต่อไป

Download Step 2


คลิกแล้วให้เปลี่ยน Tab

tab.html

<HTML>
<HEAD>
<TITLE>Tab Rotate</TITLE>
</HEAD>
<link rel="stylesheet" href="tab.css" type="text/css" />
<script type="text/javascript" src="tab.js"></script>
<BODY>

<div id="box_tab" name="box_tab">

<ul id="box_menu" name="box_menu">
<li id="li1" name="li1" class="font18"><a href="javascript:gettab(1);">MENU1</a></li>
<li id="li2" name="li2"><a href="javascript:gettab(2);">MENU2</a></li>
<li id="li3" name="li3"><a href="javascript:gettab(3);">MENU3</a></li>
<li id="li4" name="li4"><a href="javascript:gettab(4);">MENU4</a></li>
<li id="li5" name="li5"><a href="javascript:gettab(5);">MENU5</a></li>
</ul>

<div id="box_content1" name="box_content1">
<h1>เนื้อหาส่วนที่ 1 </h1>
เนื้อหาส่วนที่ 1 เนื้อหาส่วนที่ 1 เนื้อหาส่วนที่ 1 เนื้อหาส่วนที่ 1 <br/>
เนื้อหาส่วนที่ 1 เนื้อหาส่วนที่ 1 เนื้อหาส่วนที่ 1 เนื้อหาส่วนที่ 1 <br/>
</div>

<div id="box_content2" name="box_content2" class="hidden">
<h1>เนื้อหาส่วนที่ 2 </h1>
เนื้อหาส่วนที่ 2 เนื้อหาส่วนที่ 2 เนื้อหาส่วนที่ 2 เนื้อหาส่วนที่ 2 <br/>
เนื้อหาส่วนที่ 2 เนื้อหาส่วนที่ 2 เนื้อหาส่วนที่ 2 เนื้อหาส่วนที่ 2 <br/>
</div>

<div id="box_content3" name="box_content3" class="hidden">
<h1>เนื้อหาส่วนที่ 3 </h1>
เนื้อหาส่วนที่ 3 เนื้อหาส่วนที่ 3 เนื้อหาส่วนที่ 3 เนื้อหาส่วนที่ 3 <br/>
เนื้อหาส่วนที่ 3 เนื้อหาส่วนที่ 3 เนื้อหาส่วนที่ 3 เนื้อหาส่วนที่ 3 <br/>
</div>

<div id="box_content4" name="box_content4" class="hidden">
<h1>เนื้อหาส่วนที่ 4 </h1>
เนื้อหาส่วนที่ 4 เนื้อหาส่วนที่ 4 เนื้อหาส่วนที่ 4 เนื้อหาส่วนที่ 4 <br/>
เนื้อหาส่วนที่ 4 เนื้อหาส่วนที่ 4 เนื้อหาส่วนที่ 4 เนื้อหาส่วนที่ 4 <br/>
</div>

<div id="box_content5" name="box_content5" class="hidden">
<h1>เนื้อหาส่วนที่ 5 </h1>
เนื้อหาส่วนที่ 5 เนื้อหาส่วนที่ 5 เนื้อหาส่วนที่ 5 เนื้อหาส่วนที่ 5 <br/>
เนื้อหาส่วนที่ 5 เนื้อหาส่วนที่ 5 เนื้อหาส่วนที่ 5 เนื้อหาส่วนที่ 5 <br/>
</div>

</div>
</BODY>
</HTML>

tab.js

function display(sID) {

oObj = document.getElementById(sID);
if (oObj) {
oObj.style.display='inline';
}
}

function hide(sID) {
oObj = document.getElementById(sID);
if (oObj) {
oObj.style.display='none';
}
}

function gettab(id){

for (i=1;i<=5;i++)
{
if (id == i)
{
display("box_content"+i);
document.getElementById("li"+i).className ='font18';
}else{
hide("box_content"+i);
document.getElementById("li"+i).className ='font12';
}
}

}

html ในตัวอย่างนี้จะมีการเรียกใช้ Javascript จาก tab.js โดยเมื่อเราคลิกที่ tab เมนู code จะมีการเรียก
javascript gettab ใช้งานโดนส่งค่า id ของ tab นั้นๆ เข้าไป เมื่อเรียกใช้ gettab script จะทำการวนลูป 5 ครั้ง
เพื่อตรวจสอบค่า และสั่งให้ display หรือ hide id นั้นและจะปรับ class ของ li ตาม id ให้ font เล็กใหญ่
ตามที่เราคลิก tab

Download Step 3


สั่งให้ Tab วิ่งเปลี่ยนไปเรื่อยๆ

tab.html

<HTML>
<HEAD>
<TITLE>Tab Rotate</TITLE>
</HEAD>
<link rel="stylesheet" href="tab.css" type="text/css" />
<script type="text/javascript" src="tab.js"></script>
<BODY>

<div id="box_tab" name="box_tab">

<ul id="box_menu" name="box_menu">
<li id="li1" name="li1" class="font18"><a href="javascript:gettab(1);">MENU1</a></li>
<li id="li2" name="li2"><a href="javascript:gettab(2);">MENU2</a></li>
<li id="li3" name="li3"><a href="javascript:gettab(3);">MENU3</a></li>
<li id="li4" name="li4"><a href="javascript:gettab(4);">MENU4</a></li>
<li id="li5" name="li5"><a href="javascript:gettab(5);">MENU5</a></li>
</ul>

<div id="box_content1" name="box_content1">
<h1>เนื้อหาส่วนที่ 1 </h1>
เนื้อหาส่วนที่ 1 เนื้อหาส่วนที่ 1 เนื้อหาส่วนที่ 1 เนื้อหาส่วนที่ 1 <br/>
เนื้อหาส่วนที่ 1 เนื้อหาส่วนที่ 1 เนื้อหาส่วนที่ 1 เนื้อหาส่วนที่ 1 <br/>
</div>

<div id="box_content2" name="box_content2" class="hidden">
<h1>เนื้อหาส่วนที่ 2 </h1>
เนื้อหาส่วนที่ 2 เนื้อหาส่วนที่ 2 เนื้อหาส่วนที่ 2 เนื้อหาส่วนที่ 2 <br/>
เนื้อหาส่วนที่ 2 เนื้อหาส่วนที่ 2 เนื้อหาส่วนที่ 2 เนื้อหาส่วนที่ 2 <br/>
</div>

<div id="box_content3" name="box_content3" class="hidden">
<h1>เนื้อหาส่วนที่ 3 </h1>
เนื้อหาส่วนที่ 3 เนื้อหาส่วนที่ 3 เนื้อหาส่วนที่ 3 เนื้อหาส่วนที่ 3 <br/>
เนื้อหาส่วนที่ 3 เนื้อหาส่วนที่ 3 เนื้อหาส่วนที่ 3 เนื้อหาส่วนที่ 3 <br/>
</div>

<div id="box_content4" name="box_content4" class="hidden">
<h1>เนื้อหาส่วนที่ 4 </h1>
เนื้อหาส่วนที่ 4 เนื้อหาส่วนที่ 4 เนื้อหาส่วนที่ 4 เนื้อหาส่วนที่ 4 <br/>
เนื้อหาส่วนที่ 4 เนื้อหาส่วนที่ 4 เนื้อหาส่วนที่ 4 เนื้อหาส่วนที่ 4 <br/>
</div>

<div id="box_content5" name="box_content5" class="hidden">
<h1>เนื้อหาส่วนที่ 5 </h1>
เนื้อหาส่วนที่ 5 เนื้อหาส่วนที่ 5 เนื้อหาส่วนที่ 5 เนื้อหาส่วนที่ 5 <br/>
เนื้อหาส่วนที่ 5 เนื้อหาส่วนที่ 5 เนื้อหาส่วนที่ 5 เนื้อหาส่วนที่ 5 <br/>
</div>
<script type="text/javascript">
rotate(1,1000);
</script>

</div>
</BODY>
</HTML>

tab.js

function rotate(id,settime){
if (id >5){id=1;}
gettab(id);
id++;
timer = setTimeout("rotate("+id+","+settime+")", settime);

}

script ที่เพิ่มมานี้จะใช้วิธี settimeout ที่ 1 วินาที และสั่งให้เรียก function rotate โดยใน rotate นี้
ก็จะสั่งให้เรียก function gettab เปลี่ยน tab ตาม id ไปเรื่อยๆ และ settimeout สำหรับ id ต่อไปใหม่อีกครั้ง

Download Step 4


ขั้นตอนสุดท้าย ทำให้คลิกแล้วหยุดรอซักพักแล้วเปลี่ยน Tab ต่อ ^^

tab.html

<HTML>
<HEAD>
<TITLE>Tab Rotate</TITLE>
</HEAD>
<link rel="stylesheet" href="tab.css" type="text/css" />
<script type="text/javascript" src="tab.js"></script>
<BODY>

<div id="box_tab" name="box_tab">

<ul id="box_menu" name="box_menu">
<li id="li1" name="li1" class="font18"><a href="javascript:clicktab(1);">MENU1</a></li>
<li id="li2" name="li2"><a href="javascript:clicktab(2);">MENU2</a></li>
<li id="li3" name="li3"><a href="javascript:clicktab(3);">MENU3</a></li>
<li id="li4" name="li4"><a href="javascript:clicktab(4);">MENU4</a></li>
<li id="li5" name="li5"><a href="javascript:clicktab(5);">MENU5</a></li>
</ul>

<div id="box_content1" name="box_content1">
<h1>เนื้อหาส่วนที่ 1 </h1>
เนื้อหาส่วนที่ 1 เนื้อหาส่วนที่ 1 เนื้อหาส่วนที่ 1 เนื้อหาส่วนที่ 1 <br/>
เนื้อหาส่วนที่ 1 เนื้อหาส่วนที่ 1 เนื้อหาส่วนที่ 1 เนื้อหาส่วนที่ 1 <br/>
</div>

<div id="box_content2" name="box_content2" class="hidden">
<h1>เนื้อหาส่วนที่ 2 </h1>
เนื้อหาส่วนที่ 2 เนื้อหาส่วนที่ 2 เนื้อหาส่วนที่ 2 เนื้อหาส่วนที่ 2 <br/>
เนื้อหาส่วนที่ 2 เนื้อหาส่วนที่ 2 เนื้อหาส่วนที่ 2 เนื้อหาส่วนที่ 2 <br/>
</div>

<div id="box_content3" name="box_content3" class="hidden">
<h1>เนื้อหาส่วนที่ 3 </h1>
เนื้อหาส่วนที่ 3 เนื้อหาส่วนที่ 3 เนื้อหาส่วนที่ 3 เนื้อหาส่วนที่ 3 <br/>
เนื้อหาส่วนที่ 3 เนื้อหาส่วนที่ 3 เนื้อหาส่วนที่ 3 เนื้อหาส่วนที่ 3 <br/>
</div>

<div id="box_content4" name="box_content4" class="hidden">
<h1>เนื้อหาส่วนที่ 4 </h1>
เนื้อหาส่วนที่ 4 เนื้อหาส่วนที่ 4 เนื้อหาส่วนที่ 4 เนื้อหาส่วนที่ 4 <br/>
เนื้อหาส่วนที่ 4 เนื้อหาส่วนที่ 4 เนื้อหาส่วนที่ 4 เนื้อหาส่วนที่ 4 <br/>
</div>

<div id="box_content5" name="box_content5" class="hidden">
<h1>เนื้อหาส่วนที่ 5 </h1>
เนื้อหาส่วนที่ 5 เนื้อหาส่วนที่ 5 เนื้อหาส่วนที่ 5 เนื้อหาส่วนที่ 5 <br/>
เนื้อหาส่วนที่ 5 เนื้อหาส่วนที่ 5 เนื้อหาส่วนที่ 5 เนื้อหาส่วนที่ 5 <br/>
</div>
<script type="text/javascript">
rotate(1,1000);
</script>
</div>
</BODY>
</HTML>

tab.js

function clicktab(id){

for (i=1;i<=5;i++)
{
if (id == i)
{
display("box_content"+i);
document.getElementById("li"+i).className ='font18';
}else{
hide("box_content"+i);
document.getElementById("li"+i).className ='font12';
}
}

stoper();
timer = setTimeout("rotate("+id+","+1000+")", 5000);
}

function stoper() {
clearTimeout(timer);
}

Function clicktab ที่เพิ่มเข้ามานี้จะทำงานเมื่อมีการคลิก ที่ tab เมื่อคลิกแล้ว script ก็จะเรียก tab และข้อมูลนั้นๆมาแสดง
และ setTimeout ใหม่ที่ 5 วินาที (หยุดให้ user อ่านข้อมูล) และเมื่อครบตามเวลาก็ค่อยเปลี่ยน tab ต่อไปเรื่อยๆ
เวลาใช้งานจริงๆอาจจะปรับช่วงเวลาให้มากกว่านี้ก็ได้ครับ

Download Step 5 Final

ที่เหลือก็สุดแล้วแต่ใครจะจับไปแต่งตัวให้แสดงผลสวยๆยังไงต่อไปแหล่ะครับ
ตัวอย่างจริงที่ผมทำไว้ใช้งานที่ Songburi.com ครับ


สรุป

จากตัวอย่างนี้ผมคงแสดงให้เห็นการเรียนรู้แบบเลียนแบบแล้วนะครับ ^^ เรามีตัวอย่างมากมายใน Internet รอบๆตัวเรา
เพียงแต่เปลี่ยนมันเป็นการเรียนรู้อย่างฉลาด

การเล่น Ajax , Javascript พวกนี้หัดๆไว้ครับ Javascript, CSS, DOM แล้วจะเล่นอะไรแบบนี้ได้เยอะไว้คราวหน้า
ผมจะมาแนะนำการเขียนแบบนี้ให้ได้อ่านอีก ขอบคุณครับ

ปล. -__- แล้วมันเกี่ยวกับ Ajax ตรงไหนฟะเนี่ยบทความนี้ เอิ้กๆ

รูปคุณ Read (43,489) Comments (48) 2007-07-04 21:58:26

ความคิดเห็น

เก่งจิงๆ นะครับ

ผมขอเอาไปใช้งานบ้างนะ

รูปคุณ ต้น โดยคุณ ต้น 2007-07-05 01:43:57

เพิ่มเติมครับเฮีย

ไฟล์

tab.html

<HTML>
<HEAD>
<TITLE>Tab Rotate</TITLE>
</HEAD>

ขอเพิ่มเป็นให้มี DTD ด้วยได้มั้ยฮ้าาา

เปลี่ยนเป็น

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="th">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tab Rotate</title>
</head>

สำหรับบุคคลที่สงสัยอ่านเพิ่มเติมเรื่อง DOCTYPE ที่นี่นะฮ้าาาา

http://www.thaicss.com/main/doctype.html

ขอบคุณฮ้าาา

รูปคุณ pornAntha โดยคุณ pornAntha 2007-07-05 02:37:15

ก็ตั้งใจเขียนให้ Code มันดูง่ายๆและสั้นที่สุดแหล่ะ พรเอาไปโมใส่ CSS แบบหนักๆ
จัดให้สวยๆดู แล้วเอามา post โชว์ก็ได้ว่าใครจะแต่งสวยได้ยังไงบ้าง

รูปคุณ 9AuM โดยคุณ 9AuM 2007-07-05 07:12:28


http://www.servdd.com Web Hosting คุณภาพบริหารงานโดยนายอ้ำ
http://www.wp4seo.com wp4SEO ระบบช่วยบริหาร Wordpress Blog จำนวนมาก
http://www.welovetopup.com weLoveTopup เติมเงินออนไลน์ให้ส่วนลดมากที่สุดในตลาด

ขอบคุณมากครับ สำหรับความรู้ดีดี...

รูปคุณ NoOneLoveMe โดยคุณ NoOneLoveMe 2007-07-06 09:50:30

ดีมากๆครับ

รูปคุณ ว้าว โดยคุณ ว้าว 2007-07-06 15:06:57

เยี่ยมจิง . แบบนี้มีก็อปไปแปะงานตัวเอง .. หุหุ

รูปคุณ 9Nott โดยคุณ 9Nott 2007-07-08 00:06:36

ผมกำลังทำ tab แบบตัวอย่าง Songburi.com ที่ให้มา

มีปัญหาคาใจ ติดตรงที่หัวข้อ tab ที่ต้องเปลี่ยนรูปเมื่อกำลังแสดงรายละเอียดใน tab เช่น tab_update_3_1.gif ก็ต้องเปลี่ยนเป็น tab_update_3.gif หลังจากให้แสดงรายการของ tab 3

ผมสงสัยว่าไฟล์พวก tab_update_3.gif มันถูกเขียน ถูกกำหนดไว้ตรงไหนอะครับ พยายามลองถูกผิด ก็ไม่สำเร็จซะที

พอดีเป็นมือใหม่อะครับ ช่วยแนะนำและยกตัวอย่างหน่อยนะครับ ต้องใช้งานจริงๆ

รูปคุณ ผู้มาเยือน โดยคุณ ผู้มาเยือน 2007-07-08 20:34:03

เรียนคุณ ผู้มาเยือน

แนะนำให้ลองแกะดูเองครับฮาๆ เพราะผมโมของ Songburi.com ต่างหาก
รูปที่เปลี่ยนได้ผมใช้ javascript swapimage ของ dreamweaver มาทำน่ะครับ

รูปคุณ 9AuM โดยคุณ 9AuM 2007-07-09 22:12:48


http://www.servdd.com Web Hosting คุณภาพบริหารงานโดยนายอ้ำ
http://www.wp4seo.com wp4SEO ระบบช่วยบริหาร Wordpress Blog จำนวนมาก
http://www.welovetopup.com weLoveTopup เติมเงินออนไลน์ให้ส่วนลดมากที่สุดในตลาด

เอ๋ะ ...มันทำกันงี้นี่เอง ฮิฮิ

(ทำไม่เป็นแต่ขออ่านประดับสมองไว้บ้าง)

:D

รูปคุณ ble3d โดยคุณ ble3d 2007-07-10 02:39:59

ผมปวดหัวมากเลยครับ...ลองทำตามแบบที่ท่านอธิบายก็ OK นะครับ..
พอผมใช้ โปรแกรม CSS_Tab ช่วยสร้างหัวสำหรับ Tab แล้วก็เปลี่ยนจาก id ของมันที่กำหนดว่า tabs10 ที่เค้าให้มา เป็น box_tab เหมือนท่าน..แต่มันไม่สามารถแสดงหัว CSS ได้อ่ะครับ

Code ต้นฉบับ

body {
margin:0;
padding:0;
font: bold 10px/1.5em Verdana;
}
img {
border: none;
}

#box_tab {
float:left;
width:100%;
font-size:93%;
border-bottom:1px solid #2763A5;
line-height:normal;
}
#box_tab ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#box_tab li {
display:inline;
margin:0;
padding:0;
}
#box_tab a {
float:left;
background:url("tableft10.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#box_tab a span {
float:left;
display:block;
background:url("tabright10.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}

#box_tab a span {float:none;}

#tabs9 a:hover span {
color:#FFF;
}
#box_tab a:hover {
background-position:0% -42px;
}
#box_tab a:hover span {
background-position:100% -42px;
}

#box_tab #current a {
background-position:0% -42px;
}
#box_tab #current a span {
background-position:100% -42px;
}



<div id="box_tab">
<ul>
<li id="li1" name="li1"><span><a href="javascript:clicktab(1);">ข่าวไอที</a></span></li>
<li id="li2" name="li2"><span><a href="javascript:clicktab(2);">ข่าวเศรษฐกิจ</a></span></li>
<li id="li3" name="li3"><span><a href="javascript:clicktab(3);">ข่าวการเมือง</a></span></li>
<li id="li4" name="li4"><span><a href="javascript:clicktab(4);">ข่าวบันเทิง</a></span></li>
<li id="li5" name="li5"><span><a href="javascript:clicktab(5);">ข่าวกีฬา</a></span></li>
</ul>
</div>

---------------
มันไม่ยอมขี้นให้ผมอ่ะครับ...ผมแก้จนทุกทางแล้ว..คิดว่าน่าจะติดที่ current เพราะมันน่าจะเป็นการสร้างตำแหน่งการกรอบพื้นหลังให้กับ Tab เพื่อตีกรอบให้เป็น 4 เหลี่ยม แต่ว่า ผมจะต้องเปลี่ยน li ให้เป็นเหมือนกับของท่านก็คือ li1,li2..li5 อ่ะครับ...มันเลยไม่ทำงานเลย (id เดิมของมันเป็น current อ่ะครับ)

รบกวนปรึกษาด้วยครับ...

แล้วถ้าผมอยากจะทำแบบ Swarp Image ผมจะต้องเขียนยังไงอ่ะครับ...ปวดหัวตึบ ๆ รบกวนสอนผมทีนะครับ เห็นแก่คนโง่ ๆ อย่างผมด้วยนะครับ...อยากมีความรู้มั่งอ่ะครับ อ้อ พอดีผมจะเขียนเว็บโรงเรียนอ่ะครับ..

ขอบคุณครับ

รบกวนท่านพอจะแนะนำผมหน่อยได้ป่าวครับ...

รูปคุณ NoOneLoveMe โดยคุณ NoOneLoveMe 2007-07-10 15:50:00

อ้อ..!!~ อีกนิดครับ พอดีผมเอา Code ไปฝากไว้ที่เว็บนึงเพื่อส่งตัวอย่างให้ท่านดูรบกวนดูให้ผมด้วยนะครับ

http://www.tcdl.info/testajax/tab.php

ขอบคุณครับ

รูปคุณ NoOneLoveMe โดยคุณ NoOneLoveMe 2007-07-10 15:58:33

แหะ แหะ !!~ งมทำจนค่ำ ก็ไม่ได้ แต่ผมลองทำไว้ 3 แบบอ่ะครับ..

http://www.tcdl.info/testajax/tab.php

http://www.tcdl.info/testajax/tabimg.php

http://www.tcdl.info/testajax/tabtext.php

ผมอยากได้ตัวแรกมากอ่ะครับ..แต่ไม่มีปัญญา แบบที่ 2 ก็อยากได้ แต่ไม่รู้ว่าจะต้องทำยังไงรูปมันถึงจะเปลี่ยนอ่ะ ..งงงงงง มากครับ

รบกวนดูให้ผมหน่อยครับ

รูปคุณ NoOneLoveMe โดยคุณ NoOneLoveMe 2007-07-10 17:54:46

คุณ 9AuM อธิบายได้ละเอียดมากครับ สุดยอด!
ว่าแต่มีใครอยากลอง Yahoo! UI Library (YUI) บ้างครับ Library เพียบเลย หุหุ...
http://developer.yahoo.com/yui/

รูปคุณ TaTump โดยคุณ TaTump 2007-07-11 19:31:23


หนทางสู่ความลำบากแสนสบาย หนทางสู่ความสบายแสนลำบาก

www.memo8.com | www.gump.in.th

 

เจ๋งมากๆ ครับ

รูปคุณ the DtTvB โดยคุณ the DtTvB 2007-07-11 22:43:46

ขอยีมหน่อยครับ

รูปคุณ slax โดยคุณ slax 2007-07-25 14:12:21

ถ้าอย่างนั้น เวลาจะโหลดเว็บขึ้นมาหน้านึง ก็ต้องดาวน์โหลดข้อมูลทั้งหมด(ถ้าจะทำแบบนี้ทั้งหมด)

แล้วถ้าจะทำให้โหลดข้อมูลตอนคลิ๊กล่ะครับ แบบว่าเราอยู่หน้าแรก แล้วพอกดลิงค์ไปที่หน้า webboard(มันจะขึ้น loading) โดยที่จะค่อยๆโหลดหน้าเว็บบอร์ดมาโดยไม่มีการ refresh(แบบ เอ้่อ Windows live Mail มั๊ง) มันต้องทำยังไงครับ?

รูปคุณ Mr.Whisper โดยคุณ Mr.Whisper 2007-08-18 14:52:54

ถ้าจะเอาอย่างนั้น

http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/index.htm

ตามสะดวกครับ

รูปคุณ 9AuM โดยคุณ 9AuM 2007-08-19 01:38:36


http://www.servdd.com Web Hosting คุณภาพบริหารงานโดยนายอ้ำ
http://www.wp4seo.com wp4SEO ระบบช่วยบริหาร Wordpress Blog จำนวนมาก
http://www.welovetopup.com weLoveTopup เติมเงินออนไลน์ให้ส่วนลดมากที่สุดในตลาด

ขอบคุณครับ

ปล.มีคนฟังผมพูดรู้เรื่องด้วยแฮะ - -"

รูปคุณ Mr.Whisper โดยคุณ Mr.Whisper 2007-08-20 13:16:01

เยี่ยมมาก ได้ความรู้เยอะเลย

รูปคุณ Me โดยคุณ Me 2007-09-16 22:58:00

คุณพี่ อั้ม ครับ ตอนนี้ผมเดือดร้องสุด ๆ ช่วยผมหน่อยได้มั้ยครับ

รูปคุณ ตั๊ก โดยคุณ ตั๊ก 2007-09-18 12:18:07

พอจะยกตัวอย่าง js ที่ใช้ใน tab ตรงเมนูด้านบนกับทางซ้ายมือ ได้มั้ยครับ

ของเว็บ songburi น่ะครับ เพราะลองเข้าไปดูแล้วเยอะมากกกกกกกกกกกกก

จับจุดไม่ถูกเลย

รบกวนด้วยนะครับ

รูปคุณ น้องพี โดยคุณ น้องพี 2007-10-04 00:57:48

อยากรู้ว่า มันจะเอาไปใช้กัน Php ที่ include page ได้มั้ยคับ
คือแทนที่

เนื้อหาส่วนที่ 2 เนื้อหาส่วนที่ 2 เนื้อหาส่วนที่ 2 เนื้อหาส่วนที่ 2 <br/>
เนื้อหาส่วนที่ 2 เนื้อหาส่วนที่ 2 เนื้อหาส่วนที่ 2 เนื้อหาส่วนที่ 2

ด้วยโค้ด include("/var/www/vhosts/555.com/httpdocs/Update/show_news.php"); ได้หรือป่าวคับ พอดีเขียน php บนเว็บ Thaiavrillavigne.com แล้วเวลากดลิงค์ตัวแปร ?page= แล้วมันทำให้เว็บเปลี่ยนหน้าทั้งหน้าบ่อยคับ

รูปคุณ ปฏิวัติ โดยคุณ ปฏิวัติ 2007-10-14 22:30:55

ขอบคุณมากคัรบ คุณคือคนสำคัญของโลกจริงๆๆๆ

รูปคุณ นายสังข์ โดยคุณ นายสังข์ 2007-11-09 10:56:23

ไม่ทราบว่าสามารถทำ tab ที่เวลาเอาเมาท์ไปชี้แล้วมี list menu ย่อย ช่วยแนะนำหน่อย

รูปคุณ ยาดี โดยคุณ ยาดี 2007-11-09 11:22:37

ทำเมนูแบบ tab ง่ายๆด้วยโปรแกรม CSS Tab Designer ลองไปโหลดมาใช้กันดูนะครับ ที่ http://samarn.multiply.com/reviews/item/4

รูปคุณ samarn โดยคุณ samarn 2008-02-12 09:55:15

ใน Dreamweaver CS3 มันมามาให้เลยอ่า

ลองไปดูที่ Spry ดิ

รูปคุณ hanamigi_ter โดยคุณ hanamigi_ter 2008-03-26 20:59:07

ขอบคุณสำหรับความรู้ครับ

รูปคุณ bank โดยคุณ bank 2008-05-14 11:34:49

อันนี้ดีมากเลยครับที่สอน

ผมมีที่แนะนำครับ

ถ้าใครใช้ Dreamweaver CS3 ไปดูส่วนของ spry คับ

มัน gen มาให้เลย เทพมากๆๆๆ

รูปคุณ แกะ โดยคุณ แกะ 2008-06-20 03:23:49

ขอบคุณมากนะครับ ตอนนี้นำไปประยุกต์ใช้ได้หายส่วนแล้วครับ~!
(โมโค้ดจาก li ไปเป็น div หมดแระ) ขอบคุณที่อธิบายนะครับ

รูปคุณ วุฒิ โดยคุณ วุฒิ 2008-10-24 07:44:34

ขอบคุณมาก ๆ งับ สุดยอดไปเลย

รูปคุณ นิว โดยคุณ นิว 2008-11-11 14:29:20

ขอบพระคุณมากครับ เว็บนี้ช่วยผมฉลาดขึ้นเยอะเลยอ่ะครับ

รูปคุณ ภานุวัฒน์ โดยคุณ ภานุวัฒน์ 2008-12-20 21:27:26

ขอบคุณมากเลยค่ะ

รูปคุณ เอ โดยคุณ เอ 2009-01-07 12:30:55

เขียนดีจัง

รูปคุณ เม โดยคุณ เม 2009-01-09 15:20:36

thank you very big!

รูปคุณ bank bank โดยคุณ bank bank 2009-02-11 18:38:36

พี่ๆๆครับ อยากได้โค้ดเหมือนตัวต้นฉบับครับ
ช่วยผมทีเถอะครับ
ขอบคุณมากๆนะครับ

รูปคุณ running โดยคุณ running 2009-02-16 10:10:02

ลองทำตามแล้วมันไม่ยอมเปลี่ยนtabให้
แต่ว่าซ่อนtabอื่นๆไว้
จะทำไงดี
ลองมาหลายครั้งแล้ว

ใครที่รู้ช่วยตอบที
ต้องการด่วนมากค่ะ
จะเอาไปทำprojectค่ะ

ขอบคุณล่วงหน้านะคะ

รูปคุณ สุพัตรา โดยคุณ สุพัตรา 2009-08-10 18:33:59

ขอบคุณมากครับกับการสอน มีแบบนี้ดีครับ น้อง ๆ จะได้นำไปขยายต่อ

รูปคุณ nakarak โดยคุณ nakarak 2009-09-21 09:54:07

ขอเอาไปใช้หน่อยนะคะ ขอบคุณมากค่ะ

รูปคุณ น้ำขิง โดยคุณ น้ำขิง 2010-01-01 21:03:07

พอจะมี ตัวอย่างของ วีบี ดอทเน็ตไหมครับ

อ่านแล้วงง ครับ

ลองแปลงมาแล้วก็ไม่ได้ครับ

รูปคุณ อาร์ม โดยคุณ อาร์ม 2010-02-01 21:56:59

ขอบคุณมากเลย ได้เอาไปใช้

รูปคุณ TipSiam.com โดยคุณ TipSiam.com 2010-03-26 12:16:30

ขอบคุณครับ ขออนุญาติเอาไปประยุกต์ใช้ที่เว็บพร้อมเครดิตครับ

รูปคุณ sunback โดยคุณ sunback 2010-03-27 16:37:00

กำลังหาวิธีเขียนอยู่เลยครับ กำลังจะแกะโค๊ดเขาเอา มาเจอบทความนี้ ก๊อปแม่งเลย 555+

รูปคุณ นายอบ โดยคุณ นายอบ 2010-06-22 13:41:25

ขอบคุณนะคะ สำหรับความรู้ ดีดี

สำหรับเปิ้ล เขียนโปรแกรมไม่เก่ง แต่ เล่นไปเรื่อยๆๆ ลองเอาโค้ด ของพี่ไปรันดู
มันใช้งานได้จริง เลยลองเล่นไปเรื่อยๆๆ สนุกดีคะ

รูปคุณ apple โดยคุณ apple 2010-07-29 16:51:14

ขอบคุณครับ

รูปคุณ jao โดยคุณ jao 2010-10-17 15:13:36

ขอบคุณมากๆเลยค่ะ สุดยอด

รูปคุณ ree โดยคุณ ree 2011-01-14 16:39:55

ขอบคุณมากครับ

รูปคุณ somnuk17 โดยคุณ somnuk17 2011-03-19 15:20:49

setTimeout("rotate("+id+","+settime+")", settime);

ผมงงมากตรงนี้มันทำเซตอะไรยังไงหรอครับ ช่วยอธิบายหน่อยจะได้ไหมอะ ขอบคุณครับ

"rotate("+id+","+settime+")" งงว่ามันจะมาต่อ string ทำไมอะครับ

รูปคุณ bank โดยคุณ bank 2011-07-03 11:52:43

ว้าว กำลังหาอยู่พอดี ขอบคุณมากครับ... สวดยอด เดี๋ยวลองทำตามก่อนนะครับ

รูปคุณ nanaphat โดยคุณ nanaphat 2012-10-21 17:07:25

ร่วมแสดงความคิดเห็น



ขอความกรุณา ปัญญาชน ทุกๆท่าน รณรงค์การใช้ภาษาไทยให้ถูกต้อง
กรุณา ลงความคิดเห็นโดยใช้ภาษาไทยให้เป็นภาษาไทย งดการใช้ภาษาวัยรุ่น,
แอ๊บแบ๊ว บอกตรงๆปัญญาอ่อน !! Admin นั่งอ่านแล้วปวดหัว

เข้าระบบ


จำไว้ด้วยนะจ้ะ

สมัครสมาชิก
ลืมรหัสผ่าน

บทความล่าสุด

Gallery

Tags

Internet MySQL Music CSS Downloads Developer Gallery ASP Diary Plugin PHP Search Engine Testdrive Honda Firefox AIS HTML Clip Video barcampbkk2 Web2.0 SMS Perl Ajax Software Motorcycle FTR ล้อหมอบ MSN Live Google Security

อื่นๆ ...

เพื่อนบ้าน

สถิติส่วนตัว

คลิกรับ Feed สิจ๊ะ

TwitterCounter for @9aum

Scriptdd.com | ctdd Version 3.0 ติดต่อฐานข้อมูลทิ้งสิ้น 6 ครั้งใช้เวลาประมวลผล 0.1573 วินาที
โปรแกรมโดย 9AuM | ออกแบบโดย styleshout