jquery 消息插件--仿QQ消息弹出提醒

 

　有时在页面加载的时候，需要在页面的右下角弹出一个小的提示框，显示一些提示信息给用户，通过使用jQuery的message插件，可以很方便的实现这个效果，在使用之前先介绍一下message插件中的方法的使用。

1.$.messager.lays(width, height);

该方法主要用来定义弹出窗口的宽度和高度。

 

2.$.messager.anim(type,speed);

该方法主要定义窗口以什么样的方式和速度呈现。

$.messager.anim("fade",1000); //以fadeIn的动画方式显示

$.messager.anim("show",1000); //以show的动画方式显示

 

3.$.messager.show(title,text,time);

该方法主要定义窗口显示的内容，以及窗口显示多长时间后进行隐藏。

如果使用默认的标题，则将title设置为0，另外title和text还可以设置为html内容进行显示。如果希望用户点击弹窗的关闭按钮才关闭消息框，可将time设置为0。

$.messager.show(0, "这是一个提示框",5000);

$.messager.show("<font color='red'>提示信息</font>","<a href='http://www.cnblogs.com'>博客园欢迎你</a>",3000);

 

 　　在明白了message插件中每个方法的作用后，使用起来就很简单了，具体操作如下：

1.在页面引入jquery.js和jquery.messager.js文件。

2.在页面加载的时候调用message插件中的函数，设置窗口的大小，显示效果，以及显示内容。

$(function () {    $.messager.lays(200, 200);    $.messager.anim('fade', 1000);    $.messager.show("提示信息", "<a href='http://www.cnblogs.com'>博客园欢迎你</a>",5000);});

3.最后显示的效果如下图。

插件下载：jquery.message.js

做网站时要实现一个功能，就是定时刷新由客人自己下的在线预定订单，然后提醒她们及时处理，正好jquery.messager.js可以帮我们轻松实现此功能，通过定时查询数据库记录，并通过消息插件弹出提醒她们！~~

       首先下载插件：http://www.corrie.net.cn/demo/messager/jquery.messager.rar，可以查看压缩包里的demo.htm文件，来了解怎么使用此插件！~~
       1、先将jquery.js 和jquery.message.js文件引到页面文件里
    <script type="text/javascript" src="/jquery/jquery.js"></script>
    <script type="text/javascript" src="/jquery/jquery.messager.js"></script>

       2、在 .cs文件里 编写 查询数据库记录数的函数

      3、在页面里写js代码来实现定时查询

function GetOrderCount()
    {
      $.ajax({
            type: "get",
            dataType: "html",
            url: "/Jquery/ashx/order.ashx",
            data: "",
            success: function(data){
               if (data>0)
                   {
                     $.messager.anim('fade', 2000);
                     $.messager.show('<font color=red>客人自助单提醒</font>','目前尚有<font color=red>'+data+'</font>个客人自助单未处理，请相关客服尽快处理！<a href=Order.aspx target=_blank>进入处理</a>',10000);
                   }
                }
            }); 
     }
    $(document).ready(function(){
     GetOrderCount()
      window.setInterval("GetOrderCount()",60000);//1分钟刷新1次
      });

在线演示：http://www.corrie.net.cn/demo/messager/