ชีวิตสดใส ใช้แอนิเมชั่น jQuery

ผมไปเจอปลั๊กอินของ jQuery ตัวหนึ่งชื่อว่า spritely เป็นปลักอินที่ไว้สำหรับสร้างแอนิเมชั่นบนหน้าเว็บ น่าสนใจจริงๆครับปลักอินตัวนี้

จากคำกล่าวที่ว่า 1 ภาพสามารถแทนได้คำพูดได้ หนึ่งล้านคำ ผมก็ขออาศัยคำนี้มาใช้หน่อย เพราะผมคิดว่าให้ท่านดู Live Demo น่าจะอธิบายสิ่งที่ปลั๊กอินนี้ทำได้ ดีกว่าผมนั่งอธิบายจนน้ำลายเปรอะเป็นกระโถน

คลิกดูครับ Live Demo หรือจะดูที่นี่ก็ได้ http://www.quadrifogliorosso.com

ดาวน์โหลดโค้ดตัวอย่างที่ผมทำไว้ และไฟล์ที่จะใช้ในการสอนบทนี้

เปลี่ยนเลย์เอ้าเว็บด้วย jQuery+CSS

เชิญชม Live Demo กระตุ้มต่อมกระสันกันก่อน

เทคนิคนี้เป็นเทคนิคง่ายๆ หลักการก็คือ สร้าง css ขึ้นมา 2 ชุด แต่งให้การแสดงผลเป็น 2 แบบ แล้วก็ใช้ jQuery ช่วย switch css ไปมาระหว่างทั้ง 2 ชุด

ถึงแม้บทความจะเป็นภาษาอังกฤษ แต่ผมก็เชื่อว่าเราน่าจะอ่านได้เข้าใจไม่ยาก หรือถ้าเกิดว่าไม่ถนัดภาษาอังกฤษ ก็ลองนั่งไล่โค้ดดูครับ เมื่อเข้าใจในสิ่งที่เขาคิด เราก็สามารถสร้างสรรค์ผลงานชิ้นใหม่ ต่อยอดจากสิ่งที่เขาได้ได้อย่างไม่ยากเย็น

บทความการทำดังตัวอย่างที่ท่านได้ดูใน Live Demo อ่านได้ที่นี่ครับ http://designm.ag/tutorials/jquery-display-switch/

หวังว่าจะเป็นประโยชน์แก่ท่านที่ได้อ่าน และนำไปต่อยอดเป็นผลงานของตัวเองได้

Meerkat Jquery Popup โฆษณาโผล่หน้าเว็บ

อยากได้ตัว popup หน้าเว็บ สวยๆ ไม่รกหูรกตา ไม่สร้างความรำคาญแก่ผู้เข้าชมเว็บมากนัก ไว้สำหรับโฆษณาหรือแจ้งข่าวใหม่ๆในหน้าเว็บหรือหน้าที่เราต้องการ .. พอจะมีแนะนำสักตัวมั้ย?

คำตอบคือมี แต่ไม่แน่ใจว่าถูกใจมั้ยนะ คลิกไปดูตัวอย่างก่อนดีมั้ย?

เห็นตัวอย่างแล้ว ถูกใจมั้ย? ถ้าถูกใจก็อ่านต่อ ถ้าไม่ถูกใจก็เดี๋ยวไว้วันหลังจะหาตัวอื่นมานำเสนอใหม่

jQuery tab

ผมเชื่อว่าทุกคนรู้จักแน่นอน แต่อย่างไรก็ชมภาพกันเสียหน่อย ไม่เชื่ออย่าลบหลู่

jQuery tab ตัวนี้เป็นปลั๊กอินของ jQuery ที่อยู่ในกลุ่มของ jQuery UI ความง่ายในการใช้งานนั้นไม่ต้องพูดถึง แค่สร้าง html ให้เป็นไปตามโครงสร้างที่เขาแจ้งไว้ กับแค่ .tab() อีกกระทอกเดียว อยู่หมัด

งดงามล้ำเลิศ อีกทั้งยังสามารถเปลี่ยนธีมไปเป็นแบบที่ต้องการได้อีกอย่างไร้ขีดจำกัด

jQuery UI

jQuery UI ย่อมาจาก jQuery User Interface

หลายคนเป็นงง jQuery นั้นพอรู้แล้วว่ามันคืออะไร แต่ไอ้เจ้า jQuery UI นี่คืออะไร

หลังจากที่ jQuery ได้ถือกำเนิดขึ้นมาจาก จอร์น เรซิก ก็ได้เป็นที่กล่าวขวัญกันอย่างมากถึงเรื่องความเร็วในการทำงาน และการท่องไปตาม DOM จะพูดง่ายๆว่าเราจะอ้างถึงอ้อบเจ็กบนหน้าเพจจะเป็นเรื่องง่ายมากๆ

หลังจากนั้นก็มีคนสร้างปลั๊กอินเสริมประกอบตัว jQuery ยิ่งทำให้ jQuery เปล่งประสิทธิภาพอย่างรุนแรง หลังจากที่ปลั๊กอินออกมาเยอะแยะมากมาย เด่นบ้างด้อยบ้าง

jQuery .each เขาใช้กันยังไง

เพื่อนผมท่านหนึ่งสร้างฟอร์มให้ยูสเซอร์ป้อนค่า ครั้งละหลายๆค่า จะได้ไม่เสียเวลา โดยเพื่อนท่านนั้นใช้เท็กบ็อกแบบอะเรย์

<form id="form1" name="form1" method="post" action="">
  <p>  Product : <input type="text" name="product[]" id="product[]" />  </p>
  <p>  Product : <input type="text" name="product[]" id="product[]" />  </p>
  <p> <input type="submit" name="button" id="button" value="Submit" /> </p>
</form>

jQuery menu

การเขียนเว็บแอพพลิเคชั่น สิ่งหนึ่งที่หลีกเลี่ยงไม่ค่อยจะพ้น ก็คือเมนู การสร้างเมนูนั้นโดยปกติแล้วเราจะใช้เลเยอร์ในการสร้าง (ถ้าสร้างเองนะ) และก็มักจะติดปัญหาเรื่อง เมนูที่สร้างไปอยู่ใต้ลิสต์บ้อก มันไม่ยอมอยู่ข้างบน และอีกปัญหาหนึ่งก็คือใช้เวลาในการทำมาก อีกทั้งไม่ค่อยจะสวย

วันนี้ผมเลยมาแนะนำ ปลั๊กอินของ jQuery ที่ใช้สำหรับสร้างเมนูโดยเฉพาะ ทั้งใช้ง่าย สวยงาม และไม่ต้องเสียเวลานานๆในการเขียนเอง