9 ตัวอย่างการใช้งาน jquery

ผมไปเจอมาจากเว็บหนึ่ง เขาเขียนรวบรวมไว้ อันที่จริงเขาลิสต์ไว้ 10 ตัว ผมตัดออกตัวนึง เพราะมันเป็น jquery ui พื้นฐาน ในลิ้สต์รายการทั้ง 9 ตัว จะมีลิ้งก์ไปยังเว็บไซต์ต้นฉบับ ซึ่งก็อย่างที่คาด มันเป็นภาษาอังกฤษ ในเว็บไซต์จะสอนวิธีทำอย่างละเอียด เมื่อเห็นว่าเป็นภาษาอังกฤษ คนที่ไม่ถนัดก็อย่าเพิ่งท้อนะครับ ฝึกแกะไว้เถอะครับ จะมีประโยชน์ในวันข้างหน้า อย่างมหาศาล ทีเดียว หรือถ้าไม่ได้จริงๆ ก็ใช้บริการของ http://translate.google.co.th/ แปลมันซะเลย Slide tabbed box : เห็นแล้วน่าใช้เป็นอย่างยิ่งเลยละครับ เป็นแท็บ เมื่อคลิกที่หัวแท็บ ก็จะเลื่อนแสดงเนื้อหา ในแท็บนั้นๆ เหมาะอย่างยิ่งกับเว็บไซต์ที่มีพื้นที่จำกัด Please upgrade your browser แหล่งที่มา : http://www.hieu.co.uk/blog/index.php/2009/01/28/how-easy-to-create-a-slide-tabbed-box-using-jquery/ Expanding menu like Apple site : เป็นเมนูเหมือนที่ใช้ในเว็บไซต์ของแอปเปิล ครับ Please upgrade your […]

ผมไปเจอมาจากเว็บหนึ่ง เขาเขียนรวบรวมไว้ อันที่จริงเขาลิสต์ไว้ 10 ตัว ผมตัดออกตัวนึง เพราะมันเป็น jquery ui พื้นฐาน ในลิ้สต์รายการทั้ง 9 ตัว จะมีลิ้งก์ไปยังเว็บไซต์ต้นฉบับ ซึ่งก็อย่างที่คาด มันเป็นภาษาอังกฤษ ในเว็บไซต์จะสอนวิธีทำอย่างละเอียด

เมื่อเห็นว่าเป็นภาษาอังกฤษ คนที่ไม่ถนัดก็อย่าเพิ่งท้อนะครับ ฝึกแกะไว้เถอะครับ จะมีประโยชน์ในวันข้างหน้า อย่างมหาศาล ทีเดียว หรือถ้าไม่ได้จริงๆ ก็ใช้บริการของ http://translate.google.co.th/ แปลมันซะเลย

  1. Slide tabbed box : เห็นแล้วน่าใช้เป็นอย่างยิ่งเลยละครับ เป็นแท็บ เมื่อคลิกที่หัวแท็บ ก็จะเลื่อนแสดงเนื้อหา ในแท็บนั้นๆ เหมาะอย่างยิ่งกับเว็บไซต์ที่มีพื้นที่จำกัด

    แหล่งที่มา : http://www.hieu.co.uk/blog/index.php/2009/01/28/how-easy-to-create-a-slide-tabbed-box-using-jquery/

  2. Expanding menu like Apple site : เป็นเมนูเหมือนที่ใช้ในเว็บไซต์ของแอปเปิล ครับ

    http://www.kriesi.at/archives/apple-menu-improved-with-jquery

  3. Zoom image : ลองเอาเมาส์ชี้ไปที่ภาพแรกดูนะครับ ภาพจะค่อยๆขยายใหญ่ขึ้นมา น่าใช้ทีเดียว

    http://justinfarmer.com/?p=14

  4. Sliding boxes and captions to image : เมื่อเอาเมาส์ชี้ไปที่ภาพ ตัวภาพจะเลื่อนออก แสดงให้เห็นคำอธิบายภาพ อยู่ด้านหลัง ไม่เปลืองพื้นที่ดีครับ แถมตอนภาพเลื่อนออก เลื่อนแบบแอนิเมชั่นอย่างสวยงาม ด้วย

    http://buildinternet.com/2009/03/sliding-boxes-and-captions-with-jquery/

  5. Sliding image behind menu : จากเมนูที่ดูธรรมดาๆ เมื่อใช้ jquery มาช่วย มันก็ทำให้ดูดี ขึ้นอย่างน่ามหัศจรรย์

    http://snook.ca/archives/javascript/jquery-bg-image-animations/

  6. Image tab : ผมไม่รู้จะอธิบายคุณยังไงดี ลองเอาเมาส์ชี้ที่ภาพสิครับ โดยส่วนตัวแล้ว ผมชอบอันนี้นะ ไว้แสดงภาพที่หน้าแรก แจ่ม

    http://jqueryfordesigners.com/bbc-radio-1-zoom-tabs/

  7. Menu Fade : เวลาเอาเมาส์ชี้ไปที่เมนู มันจะค่อยๆเปลี่ยนสี แว้บ… ถ้าท่านมีเมนูธรรมดาๆ ลองทำตามตัวอย่างนี้ดูสิครับ เมนูท่านจะดูไฮคลาส ขึ้นมาทันที

    http://jqueryfordesigners.com/image-fade-revisited/

  8. Slider Menu :

    http://jqueryfordesigners.com/slide-out-and-drawer-effect/

  9. Tabbed Menu

    http://www.queness.com/post/106/jquery-tabbed-interfacetabbed-structure-menu-tutorial

ลองดูนะครับ ผมเชื่อว่าน่าจะเป็นประโยชน์ แก่ท่าน