About DwThai.Com 00

DwThai.Com Logo

DwThai.Com

Tip and Trick Dreamweaver

ก่อตั้งเมื่อปีพุทธศักราช ๒๕๔๖





ค้นหาข้อมูลใน DwThai.Com

Dreamweaver with jQuery ผนึกกำลังสร้างเว็บ [Article ID : 148]


เรื่อง : Dreamweaver กับ jQuery ผนึกกำลังสร้างเว็บ

คราวนี้จะมาแนะนำ Extension ใหม่สักตัว เป็น Extension ที่จะทำให้โปรแกรม Dreamweaver ของเราสามารถพัฒนางานร่วมกับ JQuery ได้ง่ายขึ้น แต่ตอนนี้หลายคนอาจจะยังสงสัยว่าแล้ว jQuery คืออะไร ผมจะอธิบายง่าย ๆ สั้น ๆ ดังนี้นะครับ

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



จากตัวอย่างข้างต้น เป็นความสามารถหนึ่งที่ jQuery มีให้เรา ซึ่งถ้าเป็นการเขียนโค้ด JavaScript ด้วยตนเองแล้ว หากต้องการแสดงผลดังกล่าว คงเป็นเรื่องที่ไม่ง่ายเลย แต่ด้วย jQuery ทำให้เราพัฒนาเว็บได้ง่ายขึ้น

เริ่มปฏิบัติการใช้งาน jQuery กับ Dreamweaver

ก่อนที่ท่านจะใช้งาน JQuery ได้ท่านต้องทำการ Download ไฟล์โปรแกรม JQuery มาเสียก่อน ซึ่งไฟล์นี้จะเป็น Engine ในการทำงานของ JQuery และหากท่านต้องการใช้งาน JQuery กับโปรแกรม Dreamweaver ท่านต้องทำการ Download ตัว Extension มาติดตั้งกับโปรแกรม โดยท่านสามารถ Download ได้จากหน้า Download ของเว็บ DwThai.Com หรือกดที่ Link ด้านล่างนี้

เมื่อท่านได้ไฟล์มาแล้วสำหรับตัว jQuery ซึ่งเป็นไฟล์นามสกุล JS ให้ท่านทำการนำไฟล์นี้ไปวางยังโฟลเดอร์เดียวกับที่ท่านวางไฟล์เว็บไซต์ของท่าน สำหรับไฟล์ Extension ให้ท่านทำการติดตั้งกับโปรแกรมของท่าน

การใช้งาน jQuery

หลังจากที่ได้ทำการติดตั้ง Extension แล้ว ท่านสามารถใช้งาน JQuery API Extension ที่ได้ทำการติดตั้งกับโปรแกรมได้ โดยอาจจะเรียกใช้ผ่านหน้าต่าง Snippets ดังรูป


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

ผมจะแนะนำการใช้งาน jQuery เล็กน้อยกับบทความนี้ โดยให้ผู้อ่านลองทำตาม ดังนี้

1. ทำการเรียกใช้ไฟล์ jquery.js โดยท่านสามารถทำได้ ดังนี้

เลือกไฟล์ได้แล้วกดปุ่ม OK

2. ทำการสร้างปุ่มกดขึ้นมา 1 ปุ่ม โดยให้ปุ่มนี้ชื่อว่า clickShow ดังรูป


Click ที่ปุ่ม No

ได้ปุ่มกดขึ้นมา


จากนั้นให้ท่านทำการแทรกรูปภาพลงไปยังเว็บเพจสัก 1 รูปภาพ โดยเมื่อทำการแทรกรูปภาพเสร็จแล้วที่ Properties ของรูปภาพ ให้ท่านกำหนดชื่อรูปภาพเป็น imgShow ดังรูป

จากนั้นให้ท่านทำการเปิดไปที่มุมมองของ Code ของโปรแกรม Dreamweaver แล้วทำการกดที่ไอคอน Script : Script ที่ Common

กดปุ่ม OK ผ่านไปโดยไม่ต้องทำการพิมพ์ข้อความใด ๆ ลงไปที่ Dialog Box

จะได้โค้ดสำหรับการเขียน JavaScript ขึ้นมาดังรูป

เมื่อได้แล้วจากนั้นนำ Cursor ไปวางไว้ระหว่าง TAG <scripr>...CURSOR..</script> แล้วไปที่หน้าต่าง Snippets (Window -> Snippets) ที่หน้าตางนี้ ให้เราเลือกที่รายการ jQuery แล้วเลือกไปที่รายการ Events การกดที่เครื่องหมาย + ด้านหน้า เราจะเห็นรายการที่เขียนว่า Document Ready ให้เราทำการ Double Click ที่รายการนี้ เราก็จะได้โค้ดสำหรับ jQuery ขึ้นมา ดังรูป


ในระหว่างโค้ดที่ท่านได้ทำการเพิ่มเข้าไป ให้ท่านทำการพิมพ์ต่อไปนี้ลงไป

$(document).ready(function() {
       // do stuff when DOM is ready
             $('#clickShow').click(function(){
                
                    $('#imgShow').toggle('slow');
                
           });
     });


ในการพิมพ์โค้ด ท่านอาจจะใช้ระบบ Code Hints ที่แนะนำไปแล้วก็ได้นะครับ ตามสะดวกเลยครับ หรือท่านจะไปเลือกโค้ดเข้ามาจากหน้าต่าง Snippets ก็ได้เช่นเดียวกัน เมื่อได้โค้ดแล้วให้ท่านทำการดูผลกับ Browser ของท่านครับ ก็เป็นอันเสร็จสิ้นการใช้งาน jQuery เบื้องต้นครับ หากท่านใดสนใจความสามารถอื่น ๆ ของ jQuery ท่านสามารถศึกษาเพิ่มเติมได้จากเว็บ http://jquery.com/ ขอบคุณครับ
เกือบลืม...ก่อนจากกันในบทความนี้ ผมขอสรุปง่าย ๆ ตรงนี้ว่า หากท่านต้องการใช้งาน jQuery ท่านต้องมีความรู้ดังต่อไปนี้ประกอบ
  1. HTML
  2. DOM (Document Object Model)
  3. CSS
  4. JavaScript
สำหรับมือใหม่ที่เข้ามาอ่านบทความนี้อาจจะงงสักเล็กน้อย แต่ผมคิดว่าด้วยความตั้งใจของท่าน คงไม่ยากเกินที่จะเรียนรู้กันครับ...
About the Author
Mr.Sittichai Raksasuk

Mr.Sittichai Raksasuk

Sittichai is a Web Developer and Web Technology Instructor for over 10 yrs. He is also a webmaster of dwthai.com and author jQuery with Dreamweaver (2010). DwThai.Com is a website for web developer using Adobe Dreamweaver.

Contact with him : dwthai@gmail.com



บทความอื่นที่คุณอาจสนใจ

การสร้าง Gallery รูปภาพแบบกดรูปแล้วขยายได้ด้วย Lightbox for Dreamweaver

เรื่อง : Image Gallery ด้วย Lightbox for Dreamweaver (่jQuery) การสร้างห้องแสดงภาพหรือที่เราอาจเรียกก...  

เริ่มต้นรู้จักกับ Extensions และการติดตั้ง Extension

เรื่อง : เริ่มต้นรู้จักกับ Extensions และการติดตั้ง Extension ให้กับโปรแกรม Dreamweaver Dreamweaver Extension...  

Extension ช่วยเขียนภาษา PHP

เรื่อง : Extension ช่วยเขียน PHP ไม่ได้ทำการ Update เนื้อหาที่หน้า Extension กันสะนาน มาในครั้งนี้จะเป็นการแนะ...  

สร้างปุ่ม Check ALL ให้กับรายการที่มีการใช้ Checkboxes (เลือกทั้งหมด)

เรื่อง : การสร้างปุ่มเลือก Checkbox ทั้งหมด (Check All for Checkboxes) Checkbox เป็น Input รูปแบบนึงที่น...  


Copyright ©2003-2019 dwthai.com. All rights reserved.
This website was created by : S.raksasuk.

ติดต่อ DwThai.Com

e-mail : dwthai@gmail.com
mobile: 08-9495-7296

เขียน Guestbook : DwThai.Com

*
*
*