zoukankan      html  css  js  c++  java
  • 使用jQuery的message插件实现右下角弹出消息框

      有时在页面加载的时候,需要在页面的右下角弹出一个小的提示框,显示一些提示信息给用户,通过使用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

  • 相关阅读:
    pdf文件的导入导出
    扩展方法用法整理
    c#批量插入数据库Demo
    Linq表达式和Lambda表达式用法对比
    Lambda表达式的诞生过程
    LeetCode77. Combinations(剑指offer38-2)
    LeetCode47.Permutations II(剑指offer38-1)
    LeetCode567. Permutation in String
    LeetCode46. Permutations
    图解HTTP-1.web和网络基础
  • 原文地址:https://www.cnblogs.com/hnsdwhl/p/1931797.html
Copyright © 2011-2022 走看看