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

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

• Download jQuery
• Download JQuery API Extension

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

การใช้งาน jQuery

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

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

เลือกไฟล์ได้แล้วกดปุ่ม 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/ ขอบคุณครับ