บทความ

กำลังแสดงโพสต์ที่มีป้ายกำกับ jquery

การสร้าง 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 picke

การส่งข้อมูล จาก jQuery ไปยัง PHP

รูปภาพ
jQuery เป็น Javascript Library ที่ช่วยให้การใช้งาน Javascript สะดวก รวดเร็วขึ้น เช่น ตัดปัญหาเรื่อง Browser ว่าจะใช้ได้หรือไม่ และอื่น ๆ อีกมากมาย และที่สำคัญ ในตัวอย่างนี้ จะเป็นการใช้ jQuery เพื่อส่งข้อมูลไปยัง PHP เพื่อเก็บลงฐานข้อมูลต่อไป แต่ในตัวอย่างนี้ จะเป็นการส่งข้อมูลไปยัง PHP และให้ PHP ส่งกลับมาที่ JQuery  และแสดงผ่านหน้าจอ Popup ของ JQuery การใช้งานตามตัวอย่างนี้ จำเป็นที่ต้องทำเครื่องคอมให้เป็น Server หรือถ้าใครมี Server ที่ใช้งานได้ เช่นเดียวกัน โดยสร้างห้องบน Server และบันทึกไฟล์ต่าง ๆ ให้อยู่ในห้องเดียวกัน เพื่อความสะดวก จะได้ไม่ต้องอ้างอิงยืดยาว ในตัวอย่างนี้ ใช้ XAMPP เพื่อจำลองเครื่อง Notebook ให้เป็น Server ไฟล์ที่จะใช้งาน มี 3 ไฟล์ คือ index.html คือไฟล์หลัก ใช้เป็นแบบฟอร์มกรอกข้อมูล เพื่อส่งข้อมูลผ่าน jQuery ไปยัง PHP jquery-2.2.2.min.js คือไฟล์ jquery ที่ดาวน์โหลดมา เพื่อใช้งาน welcome.php คือไฟล์ PHP สำหรับรับข้อมูล และส่งกลับ ไฟล์ทั้งหมด อยู่ในห้องเดียวกันบน Server ก่อนอื่น ต้องไปดาวน์โหลด jQuery มาก่อน ที่ http://www.jquery.com การดาวน์โ