วันพุธที่ 16 พฤษภาคม พ.ศ. 2555

สอนทำข้อความต้อนรับแบบ 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 มาช่วย ทำให้ประหยัดเวลาเขียนโค๊ดไปได้เยอะเลยครับ อยากสอบถามอะไร ก็สามารถสอบถามได้จากกล่องคอมเม้นท์ด้านล่างเลยนะครับ

4 ความคิดเห็น :

  1. ผมทำสำเร็จ pop-up ขึ้นเรียบร้อยที่เครื่องผม แต่มันเป็นบางเครื่องที่มันไม่แสดง pop-up ออกมา ลองเคลียร์คุกกี้ก็ไม่หายครับ -.-*

    ตอบลบ
  2. เป็นเหมือนเมนต์บนครับ

    ตอบลบ
  3. ส่วนผมไม่มีปัญหาอะไรนะครับ ผมลองรันทุกบราวเซอร์และเคลียร์คุ๊กกี้ ก็แสดงปกตินะครับ

    ตอบลบ
  4. ไม่ระบุชื่อ17 ธันวาคม 2555 14:39

    Database ผมหาไม่เจอครับ มันอยู่ตรงไหนครับพี่ งงมากเลย ในไฟลที่ให้โหลด

    exshops ก็ไม่มีครับ .sql หรือว่าจะเป็นแบบอื่นครับ มี 2 โฟลเดอร์ อันที่1 น่าจะเป็นไฟล์งานของ vb6 หรือเปล่า

    อันที่ 2 ก็เป็น ex ที่ใช้สอนอ่ะครับ ไม่รู้จะเอา Database มาจากไหนครับพี่ รบกวน Dump ออกมาเลยได้ไหม

    พอดีจะทำเป็นโปรเจค จบ น่ะครับ จักขอบพระคุณอย่างสูง

    ตอบลบ