เวลาว่างๆ กับการตกแต่งรูป

 
ตย.ภาพที่เอาโค๊ดไปใช้ในเว็บ cmhappy.com แต่ยังไม่ได้อัพโหลดเรย

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

 มีแค่สองไฟล์ที่ใช้สำหรับทำ(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;" />
        &nbsp;&nbsp;
        <select name="select" style="width:250px;">
          <option value="">Select Country/Region</option>
        </select>
        &nbsp;
        <label>
          <input type="submit" name="Submit" value="Search"  class="submit"/>
        </label>
        &nbsp; <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;" />
        &nbsp;&nbsp;
        <select name="select2" style="width:250px;">
          <option value="">Select Country/Region</option>
        </select>
        &nbsp;
        <label>
        <input type="submit" name="Submit3" value="Search"  class="submit"/>
        </label>
        &nbsp; <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;" />
        &nbsp;&nbsp;
        <select name="select2" style="width:250px;">
          <option value="">Select Country/Region</option>
        </select>
        &nbsp;
        <label>
        <input type="submit" name="Submit2" value="Search"  class="submit"/>
        </label>
        &nbsp; <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;" />
        &nbsp;&nbsp;
        <select name="select3" style="width:250px;">
          <option value="">Select Country/Region</option>
        </select>
        &nbsp;
        <label>
        <input type="submit" name="Submit4" value="Search"  class="submit"/>
        </label>
        &nbsp; <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;" />
        &nbsp;&nbsp;
        <select name="select4" style="width:150px;">
          <option value="">All locations</option>
        </select>
        &nbsp;
        <select name="select5" style="width:150px;">
          <option value="">All months</option>
        </select>
        &nbsp;
        <label>
        <input type="submit" name="Submit5" value="Search"  class="submit"/>
        </label>
        &nbsp; <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 -->

ปล. มาอ่านอีกรอบคงไม่งงนะ

edit @ 19 Feb 2008 10:44:12 by inmyhead