การสร้าง Popup หรือ Dialog สวย ๆ ด้วย jQuery UI
jQuery เป็น library ของ Javascript ที่ช่วยให้เราใช้ Javascript ได้ง่าย และรวดเร็ว ตามสโลแกนของ jQuery ที่ ว่า Write less, do more.
สำหรับการสร้าง Popup ความจริง Javascript มีฟังก์ชัน Alert() ให้ใช้ได้ทันที แต่มีข้อจำกัดที่เราไม่สามารถเปลี่ยนข้อความส่วนหัว หรือปรับแต่งใด ๆ ได้ แต่ถ้าใช้ Jquery สร้าง Popup ทำให้ได้ Popup สวย ๆ มีหลายแบบ ปรับแต่งข้อความต่าง ๆ ได้ตามต้องการ และถ้าใช้ควบคู่กับการติดต่อกับฐานข้อมูล เช่น ผ่าน Php และ mySQL ด้วยแล้ว ทำให้สามารถ สร้าง Dialog รับข้อมูล นำข้อมูลไปประมวลผลบน Server และ รายงานผล โดยใช้ Popup โดยไม่ต้องเปลี่ยนหน้า เช่น
ดาวน์โหลดไฟล์ตัวอย่าง คลิกที่นี่
จากตัวอย่าง จะเห็นว่า มีฟอร์ม และมีการส่งข้อความไปยัง PHP และส่งผลกลับจาก PHP แล้วนำมาแสดงผ่าน Popup ของ jQuery (อ่านเรื่อง การส่งข้อมูลจาก jQuery ไปยัง PHP คลิกที่นี่)
Popup หรือ ที่เรียกว่า Dialog ของ jQuery เป็นอีก library หนึ่ง ชื่อ jQuery UI เข้าถึงได้ที่ http://www.jqueryui.com ซึ่งนอกจาก Dialog แล้ว ยังมีอื่น ๆ อีก เช่น การสร้างแถบ(Tab) การซ่อน/แสดงข้อความ(Accordion) ปฏิทิน (Date picker)และ ปุ่ม ต่าง ๆ เป็นต้น โดยมีรูปแบบ Themes ให้เลือกจำนวนมาก Dialog ในตัวอย่างข้างบน ใช้ Theme ชื่อ le-frog
Dialog ของ jQuery UI มีหลายอย่าง ได้แก่
ขั้นตอนการสร้าง Dialog มีดังนี้
คำอธิบายโค้ด
ดาวน์โหลดไฟล์ simple.html และไฟล์ป js ไฟล์ css คลิกที่นี่
สำหรับการสร้าง Popup ความจริง Javascript มีฟังก์ชัน Alert() ให้ใช้ได้ทันที แต่มีข้อจำกัดที่เราไม่สามารถเปลี่ยนข้อความส่วนหัว หรือปรับแต่งใด ๆ ได้ แต่ถ้าใช้ Jquery สร้าง Popup ทำให้ได้ Popup สวย ๆ มีหลายแบบ ปรับแต่งข้อความต่าง ๆ ได้ตามต้องการ และถ้าใช้ควบคู่กับการติดต่อกับฐานข้อมูล เช่น ผ่าน Php และ mySQL ด้วยแล้ว ทำให้สามารถ สร้าง Dialog รับข้อมูล นำข้อมูลไปประมวลผลบน Server และ รายงานผล โดยใช้ Popup โดยไม่ต้องเปลี่ยนหน้า เช่น
จากตัวอย่าง จะเห็นว่า มีฟอร์ม และมีการส่งข้อความไปยัง PHP และส่งผลกลับจาก PHP แล้วนำมาแสดงผ่าน Popup ของ jQuery (อ่านเรื่อง การส่งข้อมูลจาก jQuery ไปยัง PHP คลิกที่นี่)
Popup หรือ ที่เรียกว่า Dialog ของ jQuery เป็นอีก library หนึ่ง ชื่อ jQuery UI เข้าถึงได้ที่ http://www.jqueryui.com ซึ่งนอกจาก Dialog แล้ว ยังมีอื่น ๆ อีก เช่น การสร้างแถบ(Tab) การซ่อน/แสดงข้อความ(Accordion) ปฏิทิน (Date picker)และ ปุ่ม ต่าง ๆ เป็นต้น โดยมีรูปแบบ Themes ให้เลือกจำนวนมาก Dialog ในตัวอย่างข้างบน ใช้ Theme ชื่อ le-frog
Dialog ของ jQuery UI มีหลายอย่าง ได้แก่
- Dialog พื้นฐาน เป็น Popup ทั่วไป
- แบบเคลื่อนไหว (Animation) เช่น มีการเลื่อนลงหรือขึ้น เมื่อปิด หรือเปิด
- Basic Modal เป็น Dialog พื้นฐาน แต่ เมื่อเปิดจะไม่สามารถทำกิจกรรมบนหน้าเว็บได้ ้ต้องคลิกปิด Dialog ก่อน จึงจะทำงานต่อไปได้ โดยมีการ overlay หน้าเว็บเพื่อให้ทราบว่า ไม่สามารถทำงานในขณะที่ dialog ยังเปิดอยู่
- Modal Confirmation เมื่อเปิดจะไม่สามารถทำกิจกรรมบนหน้าเว็บได้ ้ต้องคลิกปิด Dialog ก่อน จึงจะทำงานต่อไปได้ โดยมีการ overlay หน้าเว็บเพื่อให้ทราบว่า ไม่สามารถทำงานในขณะที่ dialog ยังเปิดอยู่
- Modal Form เป็น Dialog แบบ Modal ใช้สำหรับรับการป้อนข้อมูลจากหน้าเว็บ
- Modal Message เป็น Dialog แบบ Modal ใช้สำหรับบอกข้อมูล
ขั้นตอนการสร้าง Dialog มีดังนี้
- สร้างไฟล์ jquery ที่เกี่ยวข้อง และ เลือกรูปแบบ Template ที่ต้องการ จากเว็บไซต์ http://jqueryui.com
- เรียกใช้งาน dialog ที่ต้องการ
1. การสร้างไฟล์และเลือกรูปแบบ Theme
- ไปที่เว็บ http://www.jqueryui.com คลิกปุ่ม download
- จะพาไปหน้า Download Builder ซึ่งจะเห็นว่า มีหลายอย่างให้เลือก
- UI Core ต้องเลือกทั้งหมด เพราะเป็นแกนหลัก
- Interactions เราต้องสร้าง Dialog ให้เลือก Draggable และ Resizable
- ในกรณีที่คลิกเพื่อไม่เลือก ถ้าหากลักษณะที่ไม่เลือกเกี่ยวข้องกับสิ่งที่เลือกไว้ จะมี Dialog แจ้ง
- Widgets ให้เลือก Button และ Dialog
- Effects ไม่ต้องเลือก
- Themes ซึ่งเป็นรูปแบบ มีให้เลือกหลายอย่าง ถ้าอยากเห็นรูปแบบ ให้คลิกที่เมนู Theme คลิก Gallery
- เมื่อคลิกเลือก Theme จะมีตัวอย่างให้เห็น ทั้งหมด เช่น ปุ่ม Dialog เป็นต้น
- จากนั้นให้กดปุ่ม Download โปรแกรมจะสร้างไฟล์ และ ดาวน์โหลดในรูปของ Zip มาไว้ในเครื่องของเรา - ไฟล์ที่ดาวน์โหลดมา ประกอบด้วย ไฟล์ตัวอย่าง(index.html) ไฟล์อธิบายวิธีใช้ อยู่ในห้อง development-bundle ไฟล์ Js อยู่ในห้อง Js และไฟล์ css พร้อมทั้งภาพที่จำเป็น อยู่ในห้อง css
- ไฟล์ที่จะนำไปใช้คือ ไฟล์ js และ css ซึ่งมีมาให้ 2 อย่างคือ แบบมีคำอธิบาย และแบบประหยัด ซึ่งทั้งสองไฟล์มีข้อมูลเหมือนกัน เพียงแต่มีคำอธิบายเพิ่มขึ้นเท่านั้น ถ้าจะนำขึ้นเว็บ ให้ใช้ไฟล์แบบประหยัด ซึ่งจะมีคำว่า min อยู่ด้วย เช่น jquery-ui-1.10.4.custom.min.css หรือ jquery-ui-1.10.4.custom.min.js เป็นต้น
2. การใช้งาน
หลักการทำงาน คือสร้าง Tag เช่น
กำหนด id และ title (ส่วนนี้จะเป็นส่วนหัวของ Dialog) แล้ว เขียนข้อความที่ต้องการให้แสดงใน Dialog ให้อยู่ภายใน Tag นี้ เช่น
นี่เป็นข้อความที่แสดงใน Dialog
วิธีการ
- สร้างไฟล์ simple.html และ อ้างอิงถึงไฟล์ jQuery ที่ดาวน์โหลด ในส่วน ให้ถูกต้อง ทั้ง 3 ไฟล์ คือ jquery, jquery-ui และ css เช่น
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>dialog demo</title>
<link rel="stylesheet" href="css/le-frog/jquery-ui-1.10.4.custom.min.css">
<script src="js/jquery-1.10.2.js"></script>
<script src="js/jquery-ui-1.10.4.custom.min.js"></script>
</head> - สร้าง สร้างปุ่มสำหรับเรียกใช้งาน Dialog และเขียน scrip เพื่อเรียกใช้งาน jQuery ดังนี้
<body>
<button id="opener">คลิกที่นี่</button>
<div id="mydialog" title="ตัวอย่าง Dialog">ส่วนนี้คือข้อความที่ให้แสดงใน Dialog</div>
<script>
$(document).ready(function(){
$( "#mydialog" ).dialog({ autoOpen: false });
$( "#opener" ).click(function() {
$( "#mydialog" ).dialog( "open" );
});
});
</script>
</body>
</html>
คำอธิบายโค้ด
- $( "#mydialog" ).dialog({ autoOpen: false }); -- กำหนดไม่ให้แสดง dialog เมื่อเปิดหน้าเว็บนี้
- $( "#opener" ).click(function() { -- เป็นการรอรับการคลิกที่ปุ่ม ถ้ามีการคลิก ให้ดำเนินการตามคำสั่งต่อไปนี้
- $( "#mydialog" ).dialog( "open" ); -- ให้แสดง dialog โดยใช้ข้อมูลจาก id ชื่อ mydialog
เมื่อเรียกใช้งาน จะแสดง ดังนี้
ดาวน์โหลดไฟล์ simple.html และไฟล์ป js ไฟล์ css คลิกที่นี่
ความคิดเห็น
แสดงความคิดเห็น