给大家推荐一款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. Interrupt中断线程注意点

    首先我们要明确,线程中断并不会使线程立即退出,而是发送一个通知,告知目标线程你该退出了,但是后面如何处理,则完全有目标线程自行决定. 这就是和stop()不一样的地方,stop执行后线程会立即终止,这 ...

  2. jdk 环境变量

    1. jdk安装后的目录 2.JAVA_HOME C:\Program Files\Java\jdk1.8.0_172 3.PATH %JAVA_HOME%\bin 4.CLASSPATH .;%JA ...

  3. D. Concatenated Multiples(离线处理)

    思路:直接离线处理出每个ai 的10倍, 100倍, 1000倍的mod k 后的数值的个数,使用map<int,int >ss[12]存储, ss[x][y]表示 (ai*10x)%k= ...

  4. C# 使用微软自带的Speech进行语音输出

    1.在VS中使用微软自带的Speech进行语音播报,首先需要添加引用: 2.具体实现逻辑代码如下:

  5. SpringCloud（5）路由网关Spring Cloud Zuul

    一个简单的微服务系统如下图: 1.为什么需要Zuul Zuul很容易实现 负载均衡.智能路由 和 熔断器,可以做身份认证和权限认证,可以实现监控,在高流量状态下,对服务进行降级. 2.路由网关 继续前 ...

  6. C#中的虚函数及继承关系

    转载:http://blog.csdn.net/suncherrydream/article/details/8423991 若一个实例方法声明前带有virtual关键字,那么这个方法就是虚方法. 虚 ...

  7. oracle：TNS:监听程序无法分发客户机连接

    挂上vpn的时候,PL/SQL连接到oracle的时候,显示ORA-12518:监听程序无法分发客户机连接.如下图: 一.[问题描述] 最近,在系统高峰期的时候,会提示如上的错误,致使无法连接到服务器 ...

  8. 为什么开源外围包安装指导都是按照到/usr/local/目录下，/usr/local与/usr的区别

    很多应用都安装在/usr/local下面,那么,这些应用为什么选择这个目录呢?Automake工具定义了下面的一组变量: Directory variable Default value prefix ...

  9. Python学习之路——三元运算符推导式

    三元运算符 # 生成器:包含yield关键字的函数就是生成器 def my_generator(): yield 1 yield 2 yield 3 g_obj = my_generator() # ...

  10. BZOJ4621 Tc605（动态规划）

    容易发现最终序列所有数字的相对顺序不变,一个数字可能的覆盖范围由两边第一个比它大的数决定,且若不考虑次数限制所有这样的序列都可以变换得到.对于一个序列,其需要的最少变换次数显然就是覆盖了别的位置的数的 ...