给大家推荐一款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. Django REST framework基础：认证、权限、限制

    认证.权限和限制 身份验证是将传入请求与一组标识凭据(例如请求来自的用户或其签名的令牌)相关联的机制.然后 权限 和 限制 组件决定是否拒绝这个请求. 简单来说就是: 认证确定了你是谁 权限确定你能不 ...

  2. How-to: Do Real-Time Log Analytics with Apache Kafka, Cloudera Search, and Hue

    Cloudera recently announced formal support for Apache Kafka. This simple use case illustrates how to ...

  3. Linux 进入 5.0 时代！

    Linux 进入 5.0 时代! 为什么 Linux 4.2 之后的版本不再是 4.21 而是 5.0? 如果你非要一个理由,那就是因为 Linux 4.x 的版本如今用手指与脚趾加在一起都要数不过来 ...

  4. Spring Security（三十六）：12. Spring MVC Test Integration

    Spring Security provides comprehensive integration with Spring MVC Test Spring Security提供与Spring MVC ...

  5. Linux+Shell常用命令总结

    因为自己不经常使用linux的命令行工具,但是mac的终端还是经常使用的,有些命令总是要想一会或者百度一下才知道怎么用,抽时间整理了一下常用的命令,作为笔记. 常用命令 查看文件操作: ls :列出当 ...

  6. 1-STM32物联网开发WIFI(ESP8266)+GPRS(Air202)系统方案安全篇(来看一下怎么样监听网络数据,监听电脑上位机软件的数据)

    首先安装网络监听软件 运行这个软件 这个软件安装到电脑上,默认是监听咱电脑上的网络通信 咱们先监听电脑的软件的网络通信数据,然后再说怎么监听Wi-Fi和APP的软件的网络通信数据 咱就监听咱基础篇的 ...

  7. 【Api】easy-mock在线api

    解决 在使用easy-mock模拟post提交数据的情况中,我们有时需要对提交的数据进行简单逻辑处理.查阅文档发现可以使用"_req.body.keyname"来获取相应的值,但是 ...

  8. SQLserver查询库中包含某个字段的表

    select [name] from [TPMS_PRD].[dbo].sysobjects where id in(select id from [TPMS_PRD].[dbo].syscolumn ...

  9. JQ面向对象的放大镜

    index.html <!DOCTYPE html><html> <head> <meta charset="utf-8" /> & ...

  10. 良好习惯成就Better程序员

    慎于说Yes 在没有搞清楚开发需求.任务工作量.团队期望值之前,有前途的程序员不会轻易答应.特别是对于新人来说,比较急于表现自己,对于同事或者老板的工作安排来者不拒,精神可嘉,方法不可取.承诺太多,会 ...