ได้โค๊ดเมนูแบบแท็บมา ก็เลยอยากเขียนบทความ วิธีแก้ไขโค๊ดไว้ เผื่อลืม(ซึ่งก็ลืมบ่อยมาก โค๊ดดีๆ ตั้งหลายอันก็ลืมไปเยอะแล้วเหมือนกัน) และเซ็งๆ เลยหาอะไรรีแลกซ์ๆ ทำ เอาล่ะเริ่มทำกัน
มีแค่สองไฟล์ที่ใช้สำหรับทำ(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 –>
