ผมเคยสอนใช้ 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 ออกมาเลยได้ไหม
พอดีจะทำเป็นโปรเจค จบ น่ะครับ จักขอบพระคุณอย่างสูง