Post archive
Category: jQuery
-
ลบแถวออกจากตารางด้วย 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 -
วิธีใช้งาน jTip – The Jquery Tool Tip
Live Demo ผมได้เคยแนะนำ jquery plugin ตัวนี้ไปทีนึงแล้ว jquery-tooltips มาคราวนี้ผมจะแสดงวิธีการนำ jTip ไปใช้งาน
READ MORE -
jtip The jQuery tooltip
Live Demo | Download code ทูลทิป ไว้ใช้สำหรับแสดงคำอธิบายของอะไรสักอย่างที่อยู่บนหน้าเพจ แบบว่า พอเราเอาเมาส์ไปชี้ปุ๊บ มันก็จะแสดงคำอธิบายออกมาปั๊บ ไรเงี้ย ผมเองจะใช้มันประจำ เพราะบางครั้งหน้าเพจมันมีเนื้อที่จำกัด เลยต้องหาเทคนิคมาซ่อนรายละเอียดบางอย่างไว้ หรือบางทีผมก็ใช้สำหรับแสดงคำอธิบายวิธีป้อนข้อมูลในเท็กบ้อก ว่าคุณจะต้องใส่ข้อมูลรูปแบบไหน ตัวเลขอย่างเดียว หรือตัวหนังสือภาษาอังกฤษเท่านั้น เป็นต้น ทูลทิปตัวที่ผมจะนำเสนอวันนี้ เป็นปลั๊กอินของ jQuery ซึ่งใช้งานง่ายมากๆ แค่ใช้คำสั่งไม่กี่บรรทัด เราก็จะได้ทูลทิป อันงดงามมาใช้ในเว็บของเรา เริ่มกันเลยดีกว่าครับ
READ MORE -
jQuery plugin หน้าตาเหมือนทูลบาร์ของ office 2007
jQuery Ribbon เป็นปลั๊กอินที่ใช้สำหรับสร้างทูลบาร์หน้าตาเหมือน office 2007 แจ่มครับผม เห็นครั้งแรกนี่ถึงกับอึ้งเลยผม มันทำได้ไงวะ คุณสามารถดาวน์โหลดปลั๊กอินตัวนี้ และอ่านรายละเอียดวิธีการใช้งานได้ที่ http://jqueryribbon.codeplex.com/ และสามารถดูตัวอย่างแบบสดๆ ได้ที่นี่ http://dev.mikaelsoderstrom.se/scripts/jquery/ribbon/ อย่ารอช้าครับผม รีบนำมันไปใช้งานด่วน
READ MORE -
ต้องติ๊กนะ
วันนี้เขียนโค้ดเช็กฟอร์มหลังจากยูสเซอร์ซับมิต ข้อมูล แล้วทีนี้ในฟอร์มมันจะมีเช็กบ้อกตัวหนึ่ง ซึ่งยูสเซอร์ต้องติ๊ก เพื่อยืนยันว่าเขาได้อ่านรายละเอียดของข้อกำหนด เรียบร้อยแล้ว ไอ้เช็กบ้อกตัวนี้แหละที่เป็นเรื่องของวันนี้ ผมนั่งคิดอยู่ตั้งนาน ว่า เอ… เราจะเช็กยังไงหว่า ถึงจะรู้ว่าเขายังไม่ได้ ติ๊กตรงเช็กบ้อก ต้องนั่งเสียเวลาอยู่ตั้งพักนึง กว่าจะนึกได้ เลยต้องเขียนบันทึกไว้เสียหน่อย จะได้ไว้อ่านเองวันหลัง 1 <input type="checkbox" name="readed" id="readed" value="1"><input type="checkbox" name="readed" id="readed" value="1"> 2 3 4 5 6 if( !$("readed").attr("checked") ){ alert(""); } if( !$("readed").attr("checked") ){ alert(""); } แค่เนี้ย .attr(“checked”) เป็นการ get ค่าจากแอทริบิวต์ checked ซึ่งถ้าเช็กบ้อกถูกติ๊ก มันจะเป็น true แต่ถ้าไม่ถูกเช็ก มันจะมีค่าเป็น […]
READ MORE
