Post archive
Tag: Live Demo
-
jQuery กับการจัดการ CSS
การทำเว็บเดี๋ยวนี้เราไม่ค่อยใช้ตารางในการจัดวางโครงสร้างกันแล้ว เรานิยมใช้ CSS มาช่วยจัดการการแสดงผล เรียกได้ว่า CSS เข้ามามีบทบาทมากกว่าเมื่อก่อน jQuery นั้นมีคำสั่งจัดการ CSS อยู่ 3 คำสั่ง คือ addClass(names) removeClass(names) toggleClass(name) ผมจะอธิบายไล่ไปทีละคำสั่งเลยนะครับ addClass(names) ใช้สำหรับเพิ่มชื่อคลาสเข้าไปใน element ใดๆ โดยจะไม่ไปทับคลาสเดิม html นั้นในอีลิเม้นท์ตัวหนึ่งๆ สามารถมีคลาสได้หลายคลาสอยู่แล้ว names :(string) ชื่อคลาสที่เราต้องการเพิ่ม ในกรณีต้องการเพิ่มทีเดียวหลายคลาส ให้คั่นคลาสแต่ละตัวด้วยช่องว่าง
READ MORE -
คำสั่ง removeAttr ของ jQuery
Live Demo ในกรณีที่เราต้องการ remove attribute ออกจาก element ภายในเพจ jQuery ได้เตรียมคำสั่งไว้คำสั่งหนึ่งคือ removeAttr อย่างถ้าสมมติว่า ในฟอร์มของเรามีช่องเท็กบ้อกช่องหนึ่ง ซึ่งเราเซตไว้ว่าให้อ่านได้อย่างเดียว <input type="text" name="username" id="username" readonly="readonly" /><input type="text" name="username" id="username" readonly="readonly" /> แล้วเราต้องการให้ยูสเซ่อร์สามารถป้อนข้อมูลเข้าไปในช่องเท็กบ้อกนี้ได้ เราก็ใช้คำสั่ง $(‘#username’).removeAttr( ‘readonly’ );$(‘#username’).removeAttr( ‘readonly’ );
READ MORE -
คำสั่ง attr ของ jQuery
Live Demo คำสั่ง attr ของ jQuery นั้นไว้สำหรับดึงค่าจาก attribute ของ element ในเพจ หรือใช้สำหรับกำหนดค่าให้กับ attribute ก็ได้ครับ การดึงค่า ไวยากรณ์ จะเป็นดังนี้ : attr(attrname)attr(attrname) attrname : คือ ชื่อ attribute ดูตัวอย่างครับ จะเข้าใจชัดเจนขึ้น $(‘#get’).click(function(){ alert( $(‘img’).attr( ‘src’ ) ); //= http://www.select2web.com/wp-content/themes/typebased/styles/default/logo.jpg alert( $(‘img’).attr( ‘alt’ ) ); //= select2web alert( $(‘img’).attr( ‘width’ ) ); //= 400 }); <img src="http://www.select2web.com/wp-content/themes/typebased/styles/default/logo.jpg" alt="select2web" […]
READ MORE -
การสร้างเนื้อหาแบบ on the fly ด้วย jQuery
Live Demo มันเป็นอะไรที่ง่ายเอามากๆครับ ดูโค้ดเลยละกัน แล้วผมจะอธิบายทีหลัง <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <title>Insert element on the fly</title> <script type="text/javascript"> $(document).ready(function(){ var inner = $(‘<h1>This is H1</h1>’); $(‘#content’).html( inner ); }) </script> </head> <body> <div id="content"> </div> </body> </html><!DOCTYPE html PUBLIC "-//W3C//DTD […]
READ MORE -
วิธีการตรวจสอบ checkbox ด้วย jQuery
เช็กบ้อกมี attribute ตัวหนึ่งที่จะเป็นตัวบอกว่า ตัวมันเองถูกติ๊กเลือกหรือเปล่า คือ checked ถ้าหากว่าผู้ใช้ติ๊กเครื่องหมายถูก checked จะมีค่าเท่ากับ true ถ้าไม่ถูกเช็กจะมีค่าเท่ากับ false jQuery นั้นมีคำสั่งดึงค่าค่าจาก attribute ของคอนโทรลตัวไหนๆ ก็ตามง่ายๆ ดูตัวอย่าง Live Demo <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <title>jquery checkbox checked</title> <script type="text/javascript"> $(document).ready(function(){ $(‘#button’).click(function(){ alert( $(‘#checkbox’) .attr( ‘checked’ ) ); }); […]
READ MORE -
ลบแถวออกจากตารางด้วย jQuery
ขอเล่นกับตารางและ jQuery อีกสักบทความ เหมือนเดิมครับ เน้นที่ง่ายๆ เอาไปประยุกต์ต่อ บทความในตอนนี้สิ่งที่จะทำคือ เมื่อท่านคลิกแถวไหนของตาราง แถวนั้นก็จะถูกลบออกไปจากตารางทันที มาดูกันครับว่า ทำอย่างไร Live Demo โครงสร้าง HTML : <table id="table"> <tr> <th>ลำดับ</th> <th>สาขา</th> </tr> <tr> <td>1</td> <td>สุรวงศ์</td> </tr> <tr> <td>2</td> <td>เพชรบุรีตัดใหม่</td> </tr> </table><table id="table"> <tr> <th>ลำดับ</th> <th>สาขา</th> </tr> <tr> <td>1</td> <td>สุรวงศ์</td> </tr> <tr> <td>2</td> <td>เพชรบุรีตัดใหม่</td> </tr> </table> include jQuery เข้ามา : <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> เขียนโค้ด : $(document).ready(function(){ […]
READ MORE -
เพิ่มแถวเข้าไปในตารางด้วย jQuery
มันเป็นอะไรที่ง่ายมากๆครับผม ถ้าเกิดว่าเราเขียนด้วย javascript ธรรมดา คงต้องใช้โค้ดหลายบรรทัดทีเดียว แต่ถ้าใช้ jQuery นะแค่ 2-3 บรรทัดเอง จ้า มาดูกันว่าทำยังไง ภาพสำเร็จหน้าตาอย่างนี้ Live Demo โครงสร้าง HTML : เตรียมปุ่มไว้ด้วย พอคลิกปุ่ม ให้เพิ่มแถวเข้าไป <input type="button" name="button" id="button" value="เพิ่มแถว" /> <table id="table"> <tr> <th>ลำดับ</th> <th>สาขา</th> </tr> <tr> <td>1</td> <td>สุรวงศ์</td> </tr> <tr> <td>2</td> <td>เพชรบุรีตัดใหม่</td> </tr> </table><input type="button" name="button" id="button" value="เพิ่มแถว" /> <table id="table"> <tr> <th>ลำดับ</th> <th>สาขา</th> </tr> <tr> <td>1</td> […]
READ MORE -
ไฮไลท์แถวในตารางด้วย jQuery
การทำไฮไลท์แถวในตาราง ก็เพื่อให้ยูสเซ่อร์มองได้สะดวก เมื่อข้อมูลมันเยอะๆ ผลลัพธ์จะเป็นดังภาพครับ Live Demo มาดูกันครับว่าทำอย่างไร โครงสร้าง HTML : <table id="table"> <tr> <th>ลำดับ</th> <th>สาขา</th> </tr> <tr class=’even’ > <td>1</td> <td>สุรวงศ์</td> </tr> <tr class=’odd’ > <td>2</td> <td>เพชรบุรีตัดใหม่</td> </tr> <tr class=’even’ > <td>3</td> <td>รามอินทราทีมA</td> </tr> </table><table id="table"> <tr> <th>ลำดับ</th> <th>สาขา</th> </tr> <tr class=’even’ > <td>1</td> <td>สุรวงศ์</td> </tr> <tr class=’odd’ > <td>2</td> <td>เพชรบุรีตัดใหม่</td> </tr> <tr class=’even’ > […]
READ MORE -
ทำ Autocomplete ด้วย jQuery Autocomplete Plugin
อ่านกันหรือยัง jquery-autocomplete วันนี้ผมจะมานำเสนอ การใช้งาน jQuery Autocomplete Plugin ลองคลิก Live Demo ดูครับ คุณสมบัติของปลั๊กอินตัวนี้ มากมายนัก แต่ผมจะนำเสนอ แบบที่ใช้งานง่ายที่สุด ให้ท่าน ถ้าเกิดว่าท่าน อยากจะใช้งานมันแบบสุดๆ ปรับแต่งมันแบบสุดๆ ก็คงต้องขอให้ท่านศึกษาจากเว็บไซต์ ต้นฉบับเขา ราตรียาวนานฝันยุ่งเหยิง เริ่มต้นกันเลยดีกว่า
READ MORE -
มหัศจรรย์แห่งทูลทิป clueTip : A jQuery Plugin
คุณอ่านกันหรือยัง 4 tooltip ปลั๊กอิน อย่างเทพ วิธีใช้งาน jTip – The Jquery Tool Tip ทูลทิปตัวนี้มันสุดยอดมากเลยครับท่าน คุณสมบัตินี่เพียบเลยครับ มีความยืดหยุ่นในการใช้งานสูง คุณต้องลองเล่นเดโมในเว็บเขาดูนะครับ แล้วจะเห็นจริง อย่างที่ผมพูด Online Demo
READ MORE
