Post archive
Category: jQuery
-
ใช้ jQuery และ UI โดยไม่ต้องโหลดมาเก็บในเครื่อง
ใช้ google cdn แทนไง include เข้ามาเลย <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/i18n/ui.datepicker-th.js"></script> <link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/redmond/jquery-ui.css" media="all" /><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/i18n/ui.datepicker-th.js"></script> <link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/redmond/jquery-ui.css" media="all" />
READ MORE -
อ่าว … กูเกิลมันเก็บ theme ของ jQuery UI ไว้ด้วยนี่นา
ถ้าใครเป็นแฟนพันธ์แท้ของ jQuery จะทราบดีว่า การเรียกใช้งาน jQuery และ jQuery UI นั้นทำได้ 2 แบบ
READ MORE -
jQuery ปฎิทิน
ใกล้ปีใหม่ปฎิทินเป็นเรื่องสำคัญ ก็เลยได้ฤกษ์แนะนำปลั๊กอินของ jQuery ที่เกี่ยวกับปฎิทินสักหน่อย ปลั๊กอินที่จะแนะนำต่อไปนี้ สามารถนำไปประยุกต์ ประกอบกับโปรเจ็กของท่าน ขยายขีดความสามารถของโปรแกรมที่เขียน ให้ดูดี มีคลาส ได้อย่างไม่ยากเย็น และบางตัวที่เป็นปฏิทินแบบเต็มหน้าจอ สามารถนำไปประยุกต์ทำ todo list หรือ event calendar ได้สบายๆแบบไม่ต้องเขียนเองให้มาก
READ MORE -
ป้อนได้เฉพาะตัวเลข
เวลาเขียนโปรแกรมนี่สิ่งหนึ่งที่ต้องทำเป็นประจำเลยก็คือ เช็กความถูกต้องของข้อมูลที่ป้อนในฟอร์ม เป็นงานที่โปรแกรมเมอร์มือเก๋า เบื่อหน่ายกันยิ่งนัก จะไม่ตรวจสอบความถูกต้องเลยก็ไม่ได้ เพราะในบางครั้งเราอุตส่าเขียนข้อความชี้แจงไว้ท้ายกล่องเท็กบ้อก ว่าให้ป้อนเฉพาะตัวเลข ไม่วายที่ยูสเซอร์จะใจดี ป้อนเครื่องหมายคั่นหลักพันมาให้ด้วย (25,000) ครั้นพอเราบอกว่าเอางี้ละกันงั้น ให้ป้อนเครื่องหมายคั่นหลักพันมาให้ด้วย ก็ไม่วายอีกที่ยูสเซอร์บางคนเขาไม่ชอบป้อนเครื่องหมายคั่นหลักพัน เพราะโปรแกรมที่เขาใช้อยู่เป็นประจำไม่เห็นจะต้องป้อน มันเลยคุ้นเคย ฮ่วย….
READ MORE -
ตัวหนังสือวิ่งมาราธอน
เมื่อก่อนตอนทำเว็บใหม่ๆ แท็กที่มักจะเป็นที่นิยมใช้กันบ่อยๆ คือ <marquee> ไว้ทำตัวหนังสือวิ่ง ถึงแม้ว่ามันจะวิ่งเหมือนคนเป็นโรคโปลิโอ คือ วิ่งกระตุก งึกๆงักๆ แต่ก็ยังดีกว่าไม่มีอะไรเคลื่อนไหวบนหน้าจอเอาเสียเลย เดี๋ยวนี้ไม่ค่อยเห็นมีคนใช้ และพูดถึงกันน้อยมาก อาจจะเนื่องจากมีแอนิเมชั่นในรูปแบบอื่นๆ ให้เล่นเยอะแยะมากมาย <marquee> เลยถูกลืมจากสารบบ
READ MORE -
จัดการข้อมูลในฟอร์มด้วย .val()
คำสั่ง val() นี่ถือว่าเป็นคำสั่งเด็ดดวงเลยก็ว่าได้ เพราะเราคือผู้ทำเว็บแอพพลิเคชั่น ย่อมหลีกหนีไม่พ้น เรื่องตรวจสอบฟอร์มว่าป้อนไม่ป้อน ติ๊กไม่ติ๊ก บังคับให้ต้องป้อนข้อมูลหรือไม่ เป็นต้น ถ้าเทียบกับ javascript เดิม คำสั่งนี้จะเทียบได้กับ document.form1.textbox_name.valuedocument.form1.textbox_name.value ย๊าวยาว… คำสั่ง val() นี้คำสั่งเดียว สามารถใช้ได้ทั้ง ดึงค่าและกำหนดค่า เรามาดูรายละเอียดกันครับ ว่าใช้งานอย่างไร val() parameter : none คำสั่งนี้ใช้สำหรับดึงค่า value ออกมาจากคอนโทรลในฟอร์ม จำพวก textbox , checkbox , listbox เป็นต้น ตัวอย่างการใช้งาน Live Demo
READ MORE -
คำสั่ง clone() ของ jquery
clone(copyHandlers) copyHandlers : (true|false) เป็นเครื่องหมายบอกว่า ให้โคลน event ไปด้วยหรือไม่ ถ้าเป็น true ก็จะโคลนนิ่ง event ไปด้วย ถ้าเป็น false จะโคลนเฉพาะอีลิเม้นท์ ไม่โคลน event ของอีลิเม้นท์ไป return : selector คำสั่งนี้ใช้สำหรับโคลนนิ่งอีลิเม้นท์พร้อมกับสิ่งที่อยู่ภายในอีลิเม้นท์นั้นทั้งหมด คำสั่งนี้ถ้าใช้มันเดี่ยวๆจะไม่เกิดอะไรขึ้นเลย มันแค่โคลนเก็บไว้ในหน่วยความจำเท่านั้น หรือถ้าท่านใช้ตัวแปรเข้าไปรับค่า มันก็เก็บไว้ในตัวแปรเท่านั้น ดูนี่ $(‘p’).clone(false); var tag_p = $(‘p’).clone(false);$(‘p’).clone(false); var tag_p = $(‘p’).clone(false); 2 คำสั่งด้านบนไม่เกิดผลอะไรขึ้นมาบนเพจเลย ท่านจะต้องนำสิ่งที่ได้จากคำสั่งนี้ไปทำอย่างอื่นต่อ เช่น โคลนนิ่งมาแล้วให้เพิ่มเข้าไปในฟอร์ม เป็นต้น ตัวอย่างการใช้งาน Live Demo
READ MORE
