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

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


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

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

เก็บการเปลี่ยนแปลงของโค้ดทุกบรรทัด

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

สามารถทดสอบเขียนโค้ด โดยไม่ต้องกลัวโค้ดจะพังด้วยกระบวนการการแตก branch

รู้การเปลี่ยนแปลงของโค้ดทุกๆบรรทัด ทำให้ลดปัญหา "เราทำอะไรไปบ้างวะ" อีกทั้งสามารถยกเลิกการเปลี่ยนแปลงโค้ดได้อย่างง่ายดายเพียงแค่คลิกปุ่ม Discard ทุกอย่างก็กลับมาเหมือนเดิม

อีกหลายอย่าง เขียนอธิบายไว้ในหนังสือเล่มนี้แล้ว

Git สำหรับโปรแกรมเมอร์

Git สำหรับโปรแกรมเมอร์



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

https://leanpub.com/gitforbeginner