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

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


หนังสือ Selenium IDE for Starter มีขายแล้ววันนี้ เขียนโดยผมเอง วัชรเมธน์ ชิษณุคุปต์ ศรีเนธิโรทัย

ทำไมต้องใช้ Selenium IDE

ความสุข
ลองคิดดูจากเมื่อก่อนเราเขียนโปรแกรมเสร็จแล้ว เราต้องมาทดสอบโปรแกรมว่าทำงานถูกต้องหรือเปล่าซ้ำๆ น่าเบื่อ พอเรานำ Selenium IDE มาใช้ เราเขียนโค้ดเสร็จ กด Selenium IDE เพื่อให้มันช่วยป้อนข้อมูล ช่วยคลิก ช่วยตรวจข้อมูลว่าถูกต้องหรือไม่ เราแค่นั่งจิบกาแฟและมอง เมื่อทดสอบเสร็จมันจะรายงานผลด้วยว่าไม่ผ่านตรงไหนบ้าง

ความผ่อนคลาย
เมื่อการทำงานซ้ำๆเดิมๆ น่าเบื่อหน่ายเราปล่อยให้เป็นหน้าที่ของผู้ช่วยอัตโนมัติ (Selenium IDE) เสียแล้ว เราก็นั่งทำงานอย่างไม่น่าเบื่อ ชิวๆ มีพลัง

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

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

Selenium IDE for Starter

Selenium IDE for Starter



ต้องการซื้อคลิกที่นี่

https://leanpub.com/seleniumideforstarter

แสดงความคิดเห็น

comments