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

Posts Tagged ‘tab

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

มีแค่สองไฟล์ที่ใช้สำหรับทำ(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 –>

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

หมวดหมู่

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

Join 335 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 แต่งภาพ แว่นตาเกาหลี แว่นตาแฟชั่น แว่นแฟชั่น
ตุลาคม 2019
พฤ อา
« พ.ย.    
 123456
78910111213
14151617181920
21222324252627
28293031  

Blog Stats

  • 344,211 hits

ติดตามด้วย Twitter

  • กูบ่าเจื่อบ่าแคว้นมั่ง #กลิ่นกาสะลองep15 #กลิ่นกาสะลอง 2 months ago
  • RT @natthaporn5800: กูรอซีนนี้จนใจจะขาดแล้วอีเหี้ย ความฉิบหายของมึงสองป้อลูก #กลิ่นกาสะลองep14 https://t.co/Vy8tBcrV14 2 months ago
  • มีคนแจ้งแอดมินเพจจอมทองให้เคลียร์ทางให้หมอกับอี่นายเรียบร้อยละ #กลิ่นกาสะลองep12 #กลิ่นกาสะลอง #โอ้ยยยน่อ https://t.co/n5LP9AxYHR 2 months ago
  • ใจ๋หมะดี #กลิ่นกาสะลอง https://t.co/9KHyRz8uy7 3 months ago
  • 😭😭😭หายใจไม่ทั่วท้อง ฮานิบะเห้ย. #กลิ่นกาสะลอง #กลิ่นกาสะลองep10 https://t.co/kjOLfWniFr 3 months ago