给大家推荐一款jquery提示插件：toastr

它是一个可以取代alert的提示信息框，它在PC，移动设备上都有不错的UI效果。

具体使用方法如下：

1、首先在网页头站调用他需要的js和css文件。

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<script src="https://cdn.bootcss.com/toastr.js/latest/js/toastr.min.js"></script>

<link href="https://cdn.bootcss.com/toastr.js/latest/css/toastr.min.css" rel="stylesheet">

　　

2、然后就可以自定义该组件的相关参数和事件了。

比如弹出的位置，大小，配色，类型等等。

<script type="text/javascript">

//美化版彈窗

$(function(){

         var messageOpts = {

        "closeButton": false,

        "debug": false,

        "positionClass": "toast-top-right",

        "onclick": null,

        "showDuration": "300",

        "hideDuration": "1000",

        "timeOut": "5000",

        "extendedTimeOut": "1000",

        "showEasing": "swing",

        "hideEasing": "linear",

        "showMethod": "fadeIn",

        "hideMethod": "fadeOut"

        };

        toastr.options = messageOpts;

                $('#showtoast').click(function() {

            //提示

            //调用方法1

            toastr.info('内容1');

            //调用方法2

            //toastr.info('内容2', '标题2');

            //调用方法3

            //toastr['info']('内容3', '标题3');

            //调用方法4

            //toastr.info('内容4', '标题4',messageOpts);

        });

        $('#showtoastsuccess').click(function() {

            //成功

            toastr.success('内容success', '标题success');

        });

        $('#showtoasterror').click(function() {

            //错误

           toastr.error('内容error', '标题error');

        });

        $('#showtoastwarning').click(function() {

            //警告

            toastr.warning('内容warning', '标题warning');

        });

})

</script>

　　

3、HTML中调用相关事件：

<button id="showtoast">show info toast（提示）</button>

<br>

<button id="showtoastsuccess">show success toast（成功）</button>

<br>

<button id="showtoasterror">show error toast（错误）</button>

<br>

<button id="showtoastwarning">show warning toast（警告）</button>

　　

该插件完整演示页：

http://www.shouce.ren/api/jq/5733e3732c588/index.html

懒人党福利，完整代码直接测试：

<!DOCTYPE html>

<html lang="zh-cn">

<head>

<meta charset="utf-8"/>

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<script src="https://cdn.bootcss.com/toastr.js/latest/js/toastr.min.js"></script>

<link href="https://cdn.bootcss.com/toastr.js/latest/css/toastr.min.css" rel="stylesheet">

<script type="text/javascript">

//美化版彈窗

$(function(){

         var messageOpts = {

        "closeButton": false,

        "debug": false,

        "positionClass": "toast-top-right",

        "onclick": null,

        "showDuration": "300",

        "hideDuration": "1000",

        "timeOut": "5000",

        "extendedTimeOut": "1000",

        "showEasing": "swing",

        "hideEasing": "linear",

        "showMethod": "fadeIn",

        "hideMethod": "fadeOut"

        };

        toastr.options = messageOpts;

                $('#showtoast').click(function() {

            //提示

            //调用方法1

            toastr.info('内容1');

            //调用方法2

            //toastr.info('内容2', '标题2');

            //调用方法3

            //toastr['info']('内容3', '标题3');

            //调用方法4

            //toastr.info('内容4', '标题4',messageOpts);

        });

        $('#showtoastsuccess').click(function() {

            //成功

            toastr.success('内容success', '标题success');

        });

        $('#showtoasterror').click(function() {

            //错误

            toastr.error('内容error', '标题error');

        });

        $('#showtoastwarning').click(function() {

            //警告

            toastr.warning('内容warning', '标题warning');

        });

})

</script>

</head>

<body>

<button id="showtoast">show info toast（提示）</button>

<br>

<button id="showtoastsuccess">show success toast（成功）</button>

<br>

<button id="showtoasterror">show error toast（错误）</button>

<br>

<button id="showtoastwarning">show warning toast（警告）</button>

</body>

</html>

jQuery提示组件toastr（取代alert）的更多相关文章

  1. 漂亮灵活设置的jquery通知提示插件toastr

    toastr是一款非常棒的基于jquery库的非阻塞通知提示插件,toastr可设定四种通知模式:成功,出错,警告,提示,而提示窗口的位置,动画效果都可以通过能数来设置,在官方站可以通过勾选参数来生成 ...

  2. Web jquery表格组件 JQGrid 的使用 - 5.Pager翻页、搜索、格式化、自定义按钮

    系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...

  3. Web jquery表格组件 JQGrid 的使用 - 11.问题研究

    系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...

  4. Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数、ColModel API、事件及方法

    系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...

  5. Web jquery表格组件 JQGrid 的使用 - 7.查询数据、编辑数据、删除数据

    系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...

  6. Web jquery表格组件 JQGrid 的使用 - 8.Pager、新增数据、查询、刷新、查看数据

    系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...

  7. Web jquery表格组件 JQGrid 的使用 - 全部代码

    系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...

  8. [js开源组件开发]tip提示组件

    tip提示组件 常见的应用场景中,总是难免会遇到提示信息,比如显示不完全时需要鼠标移上去显示title,比如验证时的错误提示,比如操作按钮的辅助说明等,所以我独立出来了一个小的js组件,tip提示组件 ...

  9. 【ASP.Net MVC】在AspNet Mvc使用JQuery AutoComplete组件

    在AspNet Mvc使用JQuery AutoComplete组件 官方文档: http://api.jqueryui.com/autocomplete/#entry-examples 要使用JQu ...

随机推荐

  1. JavaScript 函数闭包的应用

    一.模仿块级作用域 JavaScript 没有块级作用域的概念,那么可以模拟像java中将很多变量私有化封装起来,保护数据,防止数据泄漏,封装细节,这样安全性和可控性更高 function box(c ...

  2. hotspot目录结构

    Hotspot的目录结构 ├─agent Serviceability Agent的客户端实现 ├─make 用来build出HotSpot的各种配置文件 ├─src HotSpot VM的源代码 │ ...

  3. MongoDB Change Stream：简介、尝试与应用

    在MongoDB3.6引入的新feature中,change stream无疑是非常吸引人的. Change streams allow applications to access real-tim ...

  4. 错误代码1045 Access denied for user 'root'@'localhost' (using password:YES)

    在mysql中新建连接,ip地址是127.0.0.1,账号是root,密码是123456,但是测试连接的时候报错, 错误代码1045 Access denied for user 'root'@'lo ...

  5. PyInstaller安装使用方法

    PyInstaller可以把Python应用程序及其所有依赖项捆绑到一个包中.用户可以在不安装Python解释器或任何模块的情况下运行打包的应用程序.PyInstaller支持Python 2.7和P ...

  6. Command "python setup.py egg_info" failed with error code 1 in c:\users\w5659\appdata\local\temp\pip-build-fs2yzl\ipython\

    Error Msg: Collecting ipython Using cached https://files.pythonhosted.org/packages/5b/e3/4b3082bd7f6 ...

  7. JS-数组操作3

    1. 找出数组 arr 中重复出现过的元素 function duplicates(arr) { var result = []; var count = []; for (var i=0;i< ...

  8. SSH服务器拒绝了密码，请再试一次

    使用Xshell连接ubuntu后,出现: SSH服务器拒绝了密码,请再试一次! 输入: cd /etc/ssh/ 继续: vim sshd_config 若此时提示没有安装vim,那我们安装以下: ...

  9. java 实现递归实现tree

    package app.util; import java.util.ArrayList; import java.util.List; import com.alibaba.fastjson.JSO ...

  10. vagrant之常用操作

    基本操作: 查看版本: vagrant -v 初始化: vagrant init 启动虚拟机: vagrant up 关闭虚拟机: vagrant halt 重启虚拟机: vagrant reload ...