Post archive
Tag: jQuery
-
การสร้างเนื้อหาแบบ 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 -
selector ของ jQuery
selector คืออะไร คือตัวที่เราจะใช้สำหรับอ้างอิงไปถึงออบเจ็กต่างๆ ที่อยู่บนหน้าเพจ ดูตัวอย่าง javascript กันก่อนนะครับ document.getElementById(’username’); document.getElementByTagName(’p’);document.getElementById(‘username’); document.getElementByTagName(‘p’); คำสั่งแรกจะอ้างอิงไปถึง อะไรก็ตามที่อยู่บนหน้าเพจที่มี id เท่ากับ username คำสั่งที่สอง อ้างอิงไปถึงแท็ก p ทุกตัวที่อยู่บนหน้าเพจ ทีนี้เรามาดู selector ในรูปแบบ css #username{font-size:16px;} .classname{font-size:18px;} p a{font-size:20px;}#username{font-size:16px;} .classname{font-size:18px;} p a{font-size:20px;} #username จะอ้างไปถึงออบเจ็กที่มี id เท่ากับ username .classname จะอ้างไปถึงอ้อบเจ็กทุกตัวที่เรากำหนด class เท่ากับ classname p a จะอ้างไปถึง แท็ก a ที่อยู่ภายใต้แท็ก p ทุกตัวในเพจ จากที่กล่าวมาท่านพอจะเข้าใจบ้างนะครับว่า selector คืออะไร ้ ทีนี้เรามาว่ากันถึง selector ของ […]
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 -
วิธีใช้งาน 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
