สร้าง Message boxes ด้วย jquery toastmessage plugin

Share Button

jquery-toastmessage-plugin คือปลักอินของ jquery ที่ผู้สร้างทำขึ้นมาเพื่อใช้งานในการแสดงข้อความที่สวยงาม การใช้งานง่ายๆ โดยคุณสามารถโหลดปลักอินได้ที่เว็บไซต์ http://akquinet.github.io/jquery-toastmessage-plugin/ หลังจากที่คุณดาวน์โหลดไฟล์ปลักอินมาแล้วให้นำมาไว้ที่โปรเจ็คหรือเว็บไซต์ของคุณโดยไฟล์ที่ดาวน์โหลดจำเป็นต้องใชคือไฟล์

– jquery.toastmessage.js
– jquery.toastmessage.css
– โฟล์เดอร์ image

และไฟล์หลักๆที่ต้องใช้ jquery คุณสามารถดาวน์โหลดได้ที่เว็บไซต์ http://jquery.com/

หลังจากเตรียมไฟล์ให้คุณสร้างไฟล์ index.html แล้วแทรก code CSS ไว้ภายใน <header>

และแทรก code javascript ไว้ภายใน <header>

หลัง Add ไฟล์ ที่ต้องการใช้งานแล้วต่อไปเป็นวิธีการเรียกใช้งาน ให้เขียนคำสั่ง jquery ใน header (จริงๆไม่จำเป็นต้อง header อาจจะเป็นบรรทัดล่างสุดของ body)

เสร็จเรียบร้อยแล้ว ลอง กด Refresh หน้าจอแล้วจะเห็นข้อความโชว์ตามรูปภาพตัวอย่างด้านล่าง
plugin-message-jquery

ขั้นตอนต่อไปผู้เขียนใช้ Event ตอน Click แล้วแสดงข้อความ โดยคุณสามารถเขียน code เพิ่มเติมตามตัวอย่างด้านล่างนี้ (เป็น Code เต็ม)

ผลลัพธ์ที่ได้

plugin-message-jquery02

 

ซึ่งหลายคนอาจจะต้องการปรับแต่งความสามารถการแสดงผลข้อความ สามารถปรับแต่งได้ที่ไฟล์ jquery.toastmessage.js ใน code ด้านล่างนี้ ซึ่งจะเป็นการปรับแต่งทั้งระบบ

plugin-message-jquery03

และผู้อ่านสามารถปรับแต่งการแสดงข้อความได้ในไฟล์ index.html (เฉพาะเจาะจงไฟล์ใดไฟล์หนึ่ง) เพิ่มเติมจาก Code เดิมเป็น

Code เต็ม

จบบทความสำหรับบทความนี้แล้วทางผมหวังว่าจะเป็นประโยชน์มากสำหรับทุกๆคนที่ต้องการกล่องข้อความที่เรียบง่ายและดูสวยงาม การใช้งานไม่ยากจนเกินไป หากผู้อ่านแล้วยังไม่เข้าใจในบทความ เขียน Comment เพิ่มเติมครับ

benext About benext
โปรแกรมเมอร์ ติดต่อ : itoffside@hotmail.com

Share Button

Published by

benext

โปรแกรมเมอร์ ติดต่อ : itoffside@hotmail.com

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.