给大家推荐一款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. mysql_报错1418

    报错如下: 1418 - This function has none of DETERMINISTIC, NO SQL, or READS SQL DATA in its declaration a ...

  2. SQL 约束 (Constraints)

    SQL 约束 约束用于限制加入表的数据的类型. 可以在创建表时规定约束(通过 CREATE TABLE 语句),或者在表创建之后也可以(通过 ALTER TABLE 语句). 我们将主要探讨以下几种约 ...

  3. （十五）The Search API

    Now let’s start with some simple searches. There are two basic ways to run searches: one is by sendi ...

  4. 第十一节，利用yolov3训练自己的数据集

    1.环境配置 tensorflow1.12.0 Opencv3.4.2 keras pycharm 2.配置yolov3 下载yolov3代码:https://github.com/qqwweee/k ...

  5. [Alpha阶段]第六次Scrum Meeting

    Scrum Meeting博客目录 [Alpha阶段]第六次Scrum Meeting 基本信息 名称 时间 地点 时长 第六次Scrum Meeting 19/04/10 教2 1层 50min 相 ...

  6. Merge Sort(Java)

    public static void main(String[] args) { Scanner input = new Scanner(System.in); int n = input.nextI ...

  7. HTML之表格

    表格标签和表格标题 表格标签 <table> <tr> <td></td> ...... </tr> <tr> <td&g ...

  8. iview 动态渲染menu时active-name无效的问题

    动态渲染menu时,如果需要active-name,那么name只能绑定index,动态渲染的数组初始必须有一个空对象.否则无法使用active-name属性.注:仅限3.0版本,不排除新版本修复的可 ...

  9. 转：Flutter动画二

    1. 介绍 本文会从代码层面去介绍Flutter动画,因此不会涉及到Flutter动画的具体使用. 1.1 Animation库 Flutter的animation库只依赖两个库,Dart库以及phy ...

  10. ORM关于表那些事

    一.. ORM表和表之间的关系 1. 一对多 --> 外键(ForeignKey) 2. 多对多 --> 另外一张关系表(ManyToManyField) 1. 三种方式 1. 自己建立第 ...