ความผิดพลาดคืออาจารย์ 2

การทำ menu tab(Yetii)1

Posted on: เมษายน 11, 2008

ได้โค๊ดเมนูแบบแท็บมา ก็เลยอยากเขียนบทความ วิธีแก้ไขโค๊ดไว้ เผื่อลืม(ซึ่งก็ลืมบ่อยมาก โค๊ดดีๆ ตั้งหลายอันก็ลืมไปเยอะแล้วเหมือนกัน) และเซ็งๆ เลยหาอะไรรีแลกซ์ๆ ทำ เอาล่ะเริ่มทำกัน

มีแค่สองไฟล์ที่ใช้สำหรับทำ(file อยู่ใน spaces)

โฟล์เดอร์ที่ชื่อ Yetii
(ก็อปปี้โฟล์เดอร์นี้ไปไว้ใน server)

ไฟล์ .php ที่ชื่อ tab_search.inc.php
(เอาไว้เป็นไฟล์ตัวอย่าง เพื่อแก้ไขโค๊ด)

1. ดาวน์โหลดสองตัวนี้เอาไปไว้ใน server หรือลองใน localhost โดยใส่ในโฟเดอร์ Appserve\www\โฟเดอร์ web เรา

2. เปิดไฟล์ search.inc.php ขึ้นมา ในไฟล์นี้จะประกอบไปด้วย HTML code และ PHP code ดังนี้


<!– ส่วนนี้ใช้ลิงค์กับสไตน์ชีทในโฟล์เดอร์ Yetii ดูพาธให้ถูกต้อง–>
<link rel=”stylesheet” type=”text/css” href=”Yetii/custom.css”>
<link rel=”stylesheet” type=”text/css” href=”Yetii/white.css”>

<!– ส่วนนี้ใช้ประกาศใช้ java script –>
<script type=”text/javascript” src=”Yetii/yetii-min.js”></script>

<!– ส่วนนี้ใช้ กำหนดหัวข้อของแทบ ซึ่งประกอบด้วยแทบที่ชื่อ Selling Leads,Products,Suppliers,Buyers,Trade Shows หากใช้คุณใช้ dream เป็นตัวแก้ไข ระวังอย่าแก้ไขในหน้า design เพราะคำสั่ง
<li>…</li> ชอบหาย –>
<div class=”demolayout” id=”demo”>
<ul class=”demolayout” id=”demo-nav”>
<li><a href=”#tab1″>Selling Leads</a> </li>
<li><a href=”#tab2″>Products</a> </li>
<li><a href=”#tab3″>Suppliers</a> </li>
<li><a href=”#tab4″>Buyers</a> </li>
<li><a href=”#tab5″>Trade Shows</a> </li>
</ul>

<!– ส่วนนี้เป็นตัวกำหนดว่าในแต่ละแทบของคุณจะมีเนื้อหาอะไรบ้าง โดยจะมี id เป็นตัวที่กำหนดว่าอันใหนเป็นอันใหน หากต้องการแก้ไขเนื้อหา จะต้องให้เนื้อหาของคุณอยู่ใน tag <div>…</div>(ที่ลงพื้นเป็นไฮไลท์สีส้มไว้นั่นคื่อที่ๆ เราสามารถแก้ไขได้ จะลบแล้วพิมพ์ข้อมูลใหม่เลยหรือใส่โค๊ดอื่นๆก็ได้ ส่วนอื่นไม่ต้องแก้ค่ะ) –>
<div class=”tabs-container”>
<div class=”tab” id=”tab1” style=”text-align:center;”>
<form id=”form1″ name=”form1″ method=”post” action=””>
<input type=”text” name=”textfield” style=”width:300px;” />

<select name=”select” style=”width:250px;”>
<option value=””>Select Country/Region</option>
</select>

<label>
<input type=”submit” name=”Submit” value=”Search” class=”submit”/>
</label>
<a href=”#”>More search options</a> <br />
Find out what millions of suppliers are selling right now!
</form>
</div>
<div class=”tab” id=”tab2” style=”text-align:center;”>
<form id=”form1″ name=”form1″ method=”post” action=””>
<input type=”text” name=”textfield2″ style=”width:300px;” />

<select name=”select2″ style=”width:250px;”>
<option value=””>Select Country/Region</option>
</select>

<label>
<input type=”submit” name=”Submit3″ value=”Search” class=”submit”/>
</label>
<a href=”#”>More search options</a><br />
Find millions of products from around the world here!
</form>
</div>
<div class=”tab” id=”tab3” style=”text-align:center;”>
<form id=”form1″ name=”form1″ method=”post” action=””>
<input type=”text” name=”textfield2″ style=”width:300px;” />

<select name=”select2″ style=”width:250px;”>
<option value=””>Select Country/Region</option>
</select>

<label>
<input type=”submit” name=”Submit2″ value=”Search” class=”submit”/>
</label>
<a href=”#”>More search options</a><br />
Find millions of suppliers from around the world here!
</form>
</div>
<div class=”tab” id=”tab4” style=”text-align:center;”>
<form id=”form1″ name=”form1″ method=”post” action=””>
<input type=”text” name=”textfield22″ style=”width:300px;” />

<select name=”select3″ style=”width:250px;”>
<option value=””>Select Country/Region</option>
</select>

<label>
<input type=”submit” name=”Submit4″ value=”Search” class=”submit”/>
</label>
<a href=”#”>More search options</a><br />
Find companies who want to buy your product, now.
</form>
</div>
<div class=”tab” id=”tab5” style=”text-align:center;”>
<form id=”form1″ name=”form1″ method=”post” action=””>
<input type=”text” name=”textfield222″ style=”width:250px;” />

<select name=”select4″ style=”width:150px;”>
<option value=””>All locations</option>
</select>

<select name=”select5″ style=”width:150px;”>
<option value=””>All months</option>
</select>

<label>
<input type=”submit” name=”Submit5″ value=”Search” class=”submit”/>
</label>
<a href=”#”>More search options</a><br />
Search more than 18,000 Trade Shows across 31 industries worldwide.
</form>
</div>
</div>
</div>

<!– ส่วนนี้ก็สำคัญค่ะ สามารถเซทให้แทบสามารถเปลี่ยนหน้าเองได้ กำหนดวลาได้ โดยเพิ่มโค๊ด interval:5 เข้าไปหลังบรรทัด id: ‘demo’ และต้องใส่เครื่องหมายคอมม่า (,) ต่อจากคำว่า ‘demo’ ด้วยค่ะ แล้วจึงก็อปโค๊ด interval:5 เพิ่มเข้าไป หากไม่ต้องการให้เปลี่ยนหน้า ก็ไม่ต้องเปลี่ยนอะไรแค่นี้ก็เสร็จแล้ว –>
<SCRIPT type=text/javascript>

var tabber1 = new Yetii({
id: ‘demo’
});

</SCRIPT>
<!– tabs –>

ป้ายกำกับ: , ,

4 Responses to "การทำ menu tab(Yetii)1"

ผีบ้าเก่งหนาด 5555+

อยากได้โค้ดนี้อ่าค่ะ แต่มันโหลดไม่ได้อ่าค่ะ รบกวนส่งเมลมาให้หน่อยน่ะค่ะ

nompawan@hotmail.com

ใส่ความเห็น

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / เปลี่ยนแปลง )

Twitter picture

You are commenting using your Twitter account. Log Out / เปลี่ยนแปลง )

Facebook photo

You are commenting using your Facebook account. Log Out / เปลี่ยนแปลง )

Google+ photo

You are commenting using your Google+ account. Log Out / เปลี่ยนแปลง )

Connecting to %s

หมวดหมู่

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Join 334 other followers

brush photoshop

Add new tag asp.net atsme banner Blog ไทยโดเมน.in.th brush brush photoshop brush photoshop7 brush photoshop ตึก และ นก brush photoshop นักธุรกิจ Business Marketing Day chiangmai magazine cmhappy cmhappy.com cmtoday cmtoday cmhappy download brush download brushes photoshop CS4 download brush photoshop download บรัช e-atsme flash banner free domani FTP+PHP FW mail meeting menu photoshop brush download PHP RA Red Alert3 reggae sme tab thnic virus web design wordpress Yetii Yuri การทำ flash banner กินเนื้อสด ข้าวยาก หมากแพง ความฝัน ฆ่าควาย ฆ่าหมู่ จ๊อบ บรรจบ ชมรมเว็บมาสเตอร์ & ทำ web ทำเว็บ บรัช โฟโต้ช็อป ประกันชีวิต ปริญญา ปาย สวนบวกหาด สอบกพ สอบภาค ก หนังฆ่าคนดำ หน้าที่ webmaster หมาใจดำ หวยออก 111 หางดง เชียงใหม่ อ.ไชยยันต์ ไชยพร ออกแบบเว็บ เบื่อ เร้กเก้ เลี้ยงดง เว็บ SME เว็บเชียงใหม่ แจก brush photoshop แต่งภาพ แว่นตาเกาหลี แว่นตาแฟชั่น แว่นแฟชั่น
เมษายน 2008
พฤ อา
    พ.ค. »
 123456
78910111213
14151617181920
21222324252627
282930  

Blog Stats

  • 304,539 hits

ติดตามด้วย Twitter

  • ขอบคุณรูปจากคุณหนูนะคะ (กรอบแว่นตา รุ่นCM1612 สีน้ำตาลสว่าง) #กรอบแว่น #แว่นตา #ตัดแว่น #รูปรีวิวจากลูกค้า fb.me/5QNBeq0S0 18 hours ago
  • CAT EYE Sunglass แว่นตากันแดด ทรงแคทอาย งานสวยมากค่ะ SIZE (ขนาดที่ติดขาแว่น) : 55-17-142 ของแถม : กล่องแว่น+... fb.me/VGpuYhrC 1 day ago
  • ชีวิตเราไม่ได้ดีทุกวัน เมาท์หน่อย เช้านี้เป็นไงกันมั่งคะ วันนี้ลูกค้าแจ้งปัญหามาแต่เช้า... fb.me/5CAAnA0y4 1 day ago
  • สีดำของมาเพิ่มแล้ว กรอบแว่น TR90 เอาไปตัดเลนส์ได้ค่ะ ทรงหยดน้ำ นน.เบา ขาง้างออกได้ไม่บีบขมับ 590บ.ส่งฟรี ems fb.me/94LXIV8bH 2 days ago
  • ของเข้าใหม่ แบบสวยและราคาไม่แพง มีไม่เยอะ แบบละไม่กี่อัน หมดแล้วรอปีหน้าเลย รับตัดเลนส์ค่ะ fb.me/2QAlQl4jr 3 days ago
%d bloggers like this: