ทำ feedback โต้ตอบในระบบง่ายๆ ด้วย Notyf
วันนี้มาแนะนำวิธีการสร้างตัวแจ้งเตือน (Alert Notice) หรือระบบโต้ตอบ (Feedback) บนเว็บไซต์ ด้วยเจ้า "Notyf" ที่ทั้ง ง่าย - เบา - สวยงาม ตอบโจทย์นักพัฒนายุค Minimal / Flat / Responsive Design ก็ว่ากันไป (ฮา)
Notyf เป็น Javascript Notification Plugin ที่ไม่ต้องพึ่งพา jQuery หรือที่เรียกว่า Vanilla Javascript พัฒนาขึ้นโดย Carlos Roso ที่ช่วยให้เราสร้าง Alert Notice หรือ Feedback แบบสวยๆ บนเว็บไซต์ได้อย่างรวดเร็ว รายละเอียดเชิงลึกสามารถเข้าไปอ่านได้ที่ http://carlosroso.com/notyf ...
วิธีการใช้งาน
1. เข้าไปดาวน์โหลด source code ที่ github: https://github.com/caroso1222/notyf มาเก็บไว้ในเว็บไซต์ของเราก่อน
2. ที่หน้าเว็บไซต์ ให้อ้างอิงส่วนของ css และ javascript ดังนี้
ส่วนของ css วางไว้ใน <head>
<link rel="stylesheet" type="text/css" href="/path/to/notyf.min.css">
ส่วนของ javascript วางไว้ตรงบรรทัดล่างสุดใน <body>
<script src="/path/to/notyf.min.js" type="text/javascript"></script>
3. คำสั่งสำหรับใช้งาน
// Create an instance of Notyf
var notyf = new Notyf();
// Display an alert notification
notyf.alert('You must fill out the form before moving forward');
// Display a success notification
notyf.confirm('Your changes have been successfully saved!');
เริ่มต้นด้วยการประกาศตัวแปร notyf เพื่อเรียกใช้งาน var notyf = new Notyf();
รูปแบบของ Notice ที่เตรียมไว้ให้เลือกใช้มี 2 แบบด้วยกันคือ alert กับ confirm
alert รูปแบบ notyf.alert('ข้อความที่ต้องการ'); เหมาะกับการ Notice ความผิดพลาดที่เกิดขึ้น
confirm รูปแบบ notyf.confirm('ข้อความที่ต้องการ'); เหมาะกับการ Notice ความถูกต้องที่เกิดขึ้น
ผู้ใช้งานสามารถเพิ่มรูปแบบ Notice อื่นๆ ได้เองด้วยการปรับแต่ง css และ javascript ที่ให้มา
นอกจากนั้นยังมี option ให้ตั้งค่าเพิ่มเติม
| Param | Type | Default | Details |
|---|---|---|---|
| delay | Number |
2000 | Number of miliseconds the notification must be shown |
| alertIcon | String |
Custom Notyf icon | CSS class of the icon shown in an alert notification |
| confirmIcon | String |
Custom Notyf icon | CSS class of the icon shown in a success notification |
delay: ค่าหน่วงเวลาการปรากฏของ Notice สามารถปรับเปลี่ยนค่าได้ (1000 = 1 วินาที)
alertIcon/confirmIcon: รูปแบบไอคอนประกอบข้อความแจ้งเตือน สามารถปรับเปลี่ยนรูปได้ (ใช้งานร่วมกับ FontAwesome ได้)
ผมได้เตรียมชุดคำสั่งพร้อมใช้งานไว้ให้ด้านล่างนี้ เพื่อความสะดวกในการเรียกใช้งาน
<!-- notyf-master -->
<head>
<link rel="stylesheet" type="text/css" href="../notyf.min.css">
<script src="../notyf.min.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
var notyf = new Notyf({
delay:5000,
});
notyf.confirm('เข้าสู่ระบบสำเร็จ, ยินดีต้อนรับ <?=$_SESSION["USERNAME"];?>');
/*notyf.alert('ออกจากระบบสำเร็จ, ขอบคุณที่ใช้บริการ');*/
</script>
</body>
<!-- notyf-master -->
หวังว่าจะมีประโยชน์ไม่มากก็น้อยนะครับ
- Log in to post comments
- 129 views