สอนทำข้อความต้อนรับแบบ Popup ด้วย jQuery UI
ผมเคยสอนใช้ Dialog ของ jQuery UI มาหลายบทความแล้วเหมือนกัน ดูได้จาก jQuery UI
คราวนี้อีกเช่นเคย ผมได้ลองเอามาประยุกต์ใช้ แสดงข้อความต้อนรับแบบป๊อบอัพ ขณะที่หน้าเว็บถูกโหลดขึ้นมา ก็ให้แสดงเป็นป๊อพอัพขึ้นมา ก่อนเข้าชมเนื้อหาในเว็บครับ
หลักการก็คือ
1.เราจะให้มันแสดงขึ้นมาในขณะที่หน้าเว็บถูกโหลดขึ้นมา โดยข้อความที่แสดงอาจเป็นข้อความยินดีต้อนรับ, ประกาศจากทางเว็บ,วันสำคัญต่างๆ หรือ อื่นๆ แล้วแต่ว่าอยากให้อะไรมาแสดง
2.เราจะใช้ cookie เก็บค่าการแสดงผลป๊อพอัพเอาไว้ด้วยครับ โดยผมกำหนดให้แสดงผลชั่วโมงละ 1 ครั้งเท่านั้น
(ถ้าหากให้แสดงผลทุกครั้งในขณะหน้าเว็บโหลด มันจะดูน่ารำคาญมาก) โดยผมจะใช้ jQuery Cookie
มาดูโค๊ดกันเลยครับ
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.20/themes/start/jquery-ui.css" type="text/css" media="all" />
<!-- เรียกไฟล์ css ของ jquery ui -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<!-- เรียกไฟล์ jquery -->
<script src="http://code.jquery.com/ui/1.8.20/jquery-ui.min.js" type="text/javascript"></script>
<!--เรียกไฟล์ jquery ui -->
<script src="https://raw.github.com/carhartl/jquery-cookie/master/jquery.cookie.js" type="text/javascript"></script>
<!-- เรียกไฟล์ jquery cookie เป็น plugin สำหรับเก็บค่าการแสดงผลป๊อพอัพ-->
<script type="text/javascript">
$.fn.MyDialog=function(){
var dialogMe=$(this);//ชื่อ Dialog ของเรา
if ( $.cookie ( 'dia_first_visit' ) != 'off' ){//หากคุ๊กกี้หมดเวลาหรือไม่มีค่า ให้แสดงป๊อพอัพได้
dialogMe.dialog({//กำหนด Option ตามนี้
show: "clip",//Effect ตอนกดแสดงDialogขึ้นมา
hide: "puff",//Effect ตอนกดปิดDialog
width:"650",//ความกว้าง
modal: true//พื้นหลังของDialog ลองเปลี่ยนค่าเป็นfalseดูครับ จะได้เห็นความแตกต่าง
});
var date = new Date();
date.setTime(date.getTime() + (60*60*1000));// คือ 1 ชั่วโมง (30*1000=30 วิ ,60*1000= 1 นาที ,60*60*1000=1 ชั่วโมง)
$.cookie('dia_first_visit','off',{expires: date});//เชตคุ๊กกี้ให้เก็บค่าปิดการแสดงผลPopup 1 ชั่วโมง
}
}
$(document).ready(function(){//เมื่อหน้านี้ถูกโหลดเรียบร้อยแล้ว
$('#dialog').MyDialog();//แสดงผลPopup
});
</script>
<title>jQuery UI Dialog แสดงข้อความแบบต้อนรับ POPUP</title>
</head>
<body>
<div id="dialog" style="display:none;" title="ประกาศจากทางเว็บไซต์">
สวัสดีทุกท่านที่เข้ามาเยี่ยมชมเว็บไซต์แห่งนี้
</div>
<div>
<h1>HELLO WORLD</h1>
<p>
สวัสดีชาวโลก นี่คือหน้าทดสอบโค๊ดแสดงข้อความต้อนรับแบบ POPUP พัฒนาด้วย jQuery UI
</p>
</div>
</body>
</html>
วิธีเรียกใช้ ให้สังเกตุคำสั่ง
$(document).ready(function(){//เมื่อหน้านี้ถูกโหลดเรียบร้อยแล้ว
$('#dialog').MyDialog();//แสดงผลPopup
});
#dialog คือ Id Attribute ของ Tag DIV ซึ่งก็คือPopupที่ต้องการให้แสดงในขณะหน้าเว็บถูกโหลดนั่นเองครับ โดยผมกำหนด
<div id="dialog" style="display:none;" title="ประกาศจากทางเว็บไซต์">สวัสดีทุกท่านที่เข้ามาเยี่ยมชมเว็บไซต์แห่งนี้</div>
ดูผลลัพธุ์ที่นี่
ขอปอลิงนิดนึง
โฮสฟรีที่ใช้แสดงตัวอย่างโปรแกรม จะมีPopupโฆษณากวนใจทุกครั้ง และทำให้สคริปต์ที่เขียนมีปัญหา ถ้าPopupที่ผมเขียนไม่โชว์ แนะนำให้รีเฟรชหรือกดปุ่ม F5 ดูครับ Popup(ที่เขียน)จะแสดงครั้งเดียวและต้องรออีก 1 ชั่วโมง มันจะแสดงผลอีกครั้งครับ
สุดท้ายนี้ ก็ไม่มีไรมากครับ โค๊ดเขียนสั้นๆง่ายๆ เพราะใช้ jQuery UI มาช่วย ทำให้ประหยัดเวลาเขียนโค๊ดไปได้เยอะเลยครับ อยากสอบถามอะไร ก็สามารถสอบถามได้จากกล่องคอมเม้นท์ด้านล่างเลยนะครับ
ผมทำสำเร็จ pop-up ขึ้นเรียบร้อยที่เครื่องผม แต่มันเป็นบางเครื่องที่มันไม่แสดง pop-up ออกมา ลองเคลียร์คุกกี้ก็ไม่หายครับ -.-*
ตอบลบเป็นเหมือนเมนต์บนครับ
ตอบลบส่วนผมไม่มีปัญหาอะไรนะครับ ผมลองรันทุกบราวเซอร์และเคลียร์คุ๊กกี้ ก็แสดงปกตินะครับ
ตอบลบDatabase ผมหาไม่เจอครับ มันอยู่ตรงไหนครับพี่ งงมากเลย ในไฟลที่ให้โหลด
ตอบลบexshops ก็ไม่มีครับ .sql หรือว่าจะเป็นแบบอื่นครับ มี 2 โฟลเดอร์ อันที่1 น่าจะเป็นไฟล์งานของ vb6 หรือเปล่า
อันที่ 2 ก็เป็น ex ที่ใช้สอนอ่ะครับ ไม่รู้จะเอา Database มาจากไหนครับพี่ รบกวน Dump ออกมาเลยได้ไหม
พอดีจะทำเป็นโปรเจค จบ น่ะครับ จักขอบพระคุณอย่างสูง