|
หลาย ๆ คนคงจะเคยเห็น หรือ พบเจอเว็บใหญ่ ๆ ที่เขาใ้ช้เทคนิคนี้กันบ้างแล้วตัวอย่างที่เห็นบ่อยที่สุดก็คือ ที่เว็บวีดีโอยอดฮิต อย่าง Youtube เมื่อเวลาเราคลิกที่ปุ่ม Share vdo จะมีส่วนของโค้ดที่จะให้ก๊อปเลื่อนลงไป โดยที่ไม่ต้องรีเฟรชหน้าใหม่ ทำให้สะดวก และ ง่ายกับการใช้งานของผู้ใช้งาน
วันนี้ก็เลยจะพาเพื่อน ๆ ได้ทดลองทำดูกัน เผื่อจะมีใครเอาไปใช้กับเว็บตัวเอง หรือ เอาไปต่อยอดต่อไปได้ ซึ่งผมคงไม่ได้ทำแบบขั้นเทพอะไร เอาแบบง่าย ๆ ให้พอรู้ และเข้าใจกันก็คงจะเพียงพอ
โค้ด </html>
<meta http-equiv="content-Type" content="text/html; charset=TIS-620"> <script language="JavaScript"> function fncShow(ctrl){ // ฟังก์ชั่นสำหรับ แสดง (Show) ส่งค่า id ของ DIV หรือ Table TD TR document.getElementById(ctrl).style.display = ''; //สั่งให้แสดง document.getElementById('embed_button').innerHTML ='<input type="submit" name="Submit" value="Hide Embed" onClick="JavaScript:fncHide(\'embed_div\');">'; // หลังจากสั่งให้แสดงเสร็จ ก็ทำการเปลี่ยนสถานะของปุ่มเป็น "ซ่อน" } function fncHide(ctrl){ // ฟังก์ชั่นสำหรับ ซ่อน ส่งค่า id ของ DIV หรือ Table TD TR document.getElementById(ctrl).style.display = 'none'; //สั่งให้แสดง document.getElementById('embed_button').innerHTML ='<input type="submit" name="Submit" value="Show Embed" onClick="JavaScript:fncShow(\'embed_div\');">'; // หลังจากสั่งให้ซ่อนแล้ว ก็ทำการเปลี่ยนสถานะของปุ่มเป็น "แสดง" } </script>
<table width="100%"> <tbody><tr> <td width="7%" id="embed_button"><input type="submit" name="Submit" value="Show Embed" onclick="JavaScript:fncShow('embed_div');"></td> </tr> <tr id="embed_div" style="display:none; "><!-- จุดที่เราต้องการจะแสดง หรือ ซ่อน ในตัวอย่างนี้คือ TR ของ Table --> <td> Embed this VDO :<input type="text" id="code_embed" value="<iframe title=" code-father.com"="" src="http://www.code-father.com>" width="450" height="180" frameborder="0" allowfullscreen="">" size="75" onclick="this.focus(); this.select();"> <br> Link to this page : <input name="textfield" type="text" size="75" value="http://www.code-father.com" onclick="this.focus(); this.select();"> </td><!-- เนื้อหาที่ต้องการแสดงให้กับผู้ใช้งานได้เห็น --> </tr> </tbody></table> </html> *********************************** ขออธิบายขยายความเพิ่มเติมกันอีกสักนิด ถึงกระบวนการทำงานของบทความนี้นะครับ - เมื่อเปิดมาทีแรก จะเห็นเพียงแค่ปุ่ม "Show Embed" เพื่อให้คลิก เริ่มแรกจะยังไม่แสดงส่วนเนื้อหาให้ผู้ใช้ได้เห็น
ตามคำสั่ง
<tr id="embed_div" style="display:none; "> เพราะต้องการให้คลิกก่อนจึงจะแสดงผล - เมื่อคลิกที่ปุ่ม "Show Embed" ระบบจะส่งค่า id ของ TR ไปยังฟังก์ชั่น ด้วยคำสั่ง
<input type="submit" name="Submit" value="Show Embed" onclick="JavaScript:fncShow('embed_div');">
- ที่ฟังก์ชั่น
fncShow ก็จะสั่งให้แสดงผล ด้วยคำสั่ง
document.getElementById(ctrl).style.display = ''; และทำการเปลี่ยนปุ่ม "Show Embed" เป็น "Hide Embed" เพื่อให้ผู้ใช้ได้คลิกปิดได้หากไม่ต้องการ
- เพียงแค่นี้ผู้ใช้ก็จะสามารถเห็นข้อมูลที่เราซ่อนไว้ได้ และหากต้องการปิด หรือ ซ่อน ก็คลิกที่ปุ่ม "Hide Embed"
ยิ่งอธิบายก็เหมือนจะทำให้เรื่องง่าย ๆ กลายเป็นเรื่องยาก ยังไงก็ไม่รู้ ลองก๊อปโค้ดไปทดสอบดูกันเลย จะได้เห็นผลกับตาว่ามันทำงานได้จริงหรือเปล่า
*** หากสังเกตุดี ๆ หลายคนอาจจะสงสัยว่า ตรงฟังก์ชั่น ทำไมตัวหนึ่งใช้ส่งค่าเข้าไป แต่อีกตัวหนึ่งไม่เห็นส่งค่าเ้ข้าไปหล่ะ document.getElementById(ctrl).style.display = ''; //สั่งให้แสดง document.getElementById('embed_button').innerHTML ='<input type="submit" name="Submit" value="Hide Embed" onClick="JavaScript:fncHide(\'embed_div\');">';
ตรงสีเขียว ๆ นั่นหล่ะครับ คือ ม้นใช้ได้ทั้งสองแบบ ขึ้นอยู่กับลักษณะการใช้งาน หากใช้งานแค่จุดเดียว หรือ ฟอร์มเดียว เราก็ไม่จำเป็นต้องส่งค่าตัวแปร จะง่ายกว่า โดยระบุค่า ID เข้าไปเลย
แต่ถ้าหากฟังก์ชั่นนี้มีการใช้งานร่วมกันในหลาย ๆ ฟอร์ม หรือ หลาย ๆ หน้า เราก็จะทำฟังก์ัชั่นไว้ในไฟล์ .js เพื่อเรียกเข้ามาใ้ช้ร่วมกันได้ในหลาย ๆ หน้า เราก็แค่ส่ง ID เข้าไปในฟังก์ชั่น โค้ดของเราก็จะไม่เยอะ ทำให้ง่ายเวลาแก้ไขฟังก์ชั่น เพราะจะแก้เพียงแค่ที่เดียว คือในไฟล์ .js ของเรานั่นเอง
|
