รูปการเปิดดูตัวอย่างการใช้งานของLibaryต่างๆที่มากับJQuery UI
ให้คลิกที่ไฟล์ index.html ดังรูป
รูปการเปิดไฟล์index.html
จากนั้นให้กด F12 เพื่อดูตัวอย่างการใช้งานLibary ต่างๆครับ
รูปการรัน(F12)เพื่อดูตัีวอย่างLibaryต่างๆ
เราสามารถก๊อปปี้โค๊ดของตัวอย่างต่างๆที่JQuery UI มีมาให้ นำมาใช้ร่วมกับงานหรือระบบงานของเราได้ครับ และต่อไปนี้ผมจะยกตัวอย่างการใช้งาน Dialog Alert ให้ได้เห็นภาพกันครับ
ท่านสามารถเปิดดูตัวอย่าง การใช้งาน Dialog Alert ได้ที่โฟลเดอร์ dialog ตามรูปครับ
จะเห็นได้ว่าในโฟล dialog มีไฟล์ต่างๆเก็บอยู่ข้างในโฟลเดอร์นี้ ซึ่งประกอบด้วย
1 ไฟล์ default.html เป็นไฟล์แสดงdialogมาตรฐานที่นิยมใช้แสดงข้อความอธิบายหรือแนะนำ
รูปตัวอย่างDialog Basic
2 ไฟล์ index.html เป็นไฟล์หน้าโฮมเพจในการเลือกดู dialog ทั้งหมด
3 ไฟล์ modal-confirmation.html เป็นไฟล์ตัวอย่างการใช้งานdialog ที่ใช้แสดงขึ้นมาเพื่อให้ผู้ใช้กดยืนยันหรือยกเลิกการทำงานของโปรแกรม เช่น แสดงdialogนี้ขึ้นมาเพื่อถามเรา่ว่าจะลบข้อมูลนี้หรือไม่ เป็นต้น
รูปตัวอย่างDialog Confirmation(ยืนยัน)
4 ไฟล์ modal-form.html เป็นไฟล์ตัวอย่างการใช้งาน Dialog ประเภทฟอร์มกรอกข้อมูล ซึ่งเป็นDialogที่แสดงขึ้น เพื่อให้ผู้ใช้งานกรอกข้อมูลตามที่ต้องการ เช่น ชื่อ,นามสกุล,ที่อยู่,เบอร์โทร เป็นต้น
รูปตัวอย่าง Dialog Form
5 ไฟล์ modal-message.html เป็นไฟล์ตัวอย่างการใช้งาน Dialog ประเภทแจ้งเตือนหรือแสดงผลลัพธุ์การทำงาน ซึ่งลำดับต่อไปผมจะขออธิบายการใช้งานของ Dialog นี้ครับ
รูปตัวอย่าง Dialog Message
การใช้งาน Dialog Message ตามแบบฉบับของผมอ่ะนะ
1.เลือกThemeที่จะนำมาใช้แสดงผล ดังรูป
2.เรียกไฟล์ JQuery และ JQuery UI มาใช้
3.จากนั้นใ้ห้พิมพ์โค๊ดตามนี้เลยครับ
4.กดF12เพื่อรันดูผลลัพธุ์ของโปรแกรม จากนั้นให้กดปุ่ม ShowDialog จะได้ผลลัพธุ์ดังรูปคับ
แจกไฟล์ที่ใช้ประกอบการอธิบายในบทความนี้ JQuery , dialog_alert.php
