给大家推荐一款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. EXTJS的使用

    最近一段时间一直使用Extjs作为前端,通过HTTP与.net后端进行交互,今天总结一下EXTJS,方便以后复习. 1.概念: ExtJS可以用来开发RIA也即富客户端的AJAX应用,是一个用java ...

  2. 需求规格说明书(SRS)特点

    需求说明书的7大特征: 完整性 正确性 可行性 必要性 划分优先级 无二义性 可验证性 每条需求规格说明书的4大特点: 完整性 一致性 可修改性 可跟踪性 需求管理就是一种获取.组织并记录系统需求的系 ...

  3. 从开始到头皮炸裂的python第5天

    头皮炸裂的一天从学到一个新的数据类型开始,这个数据类型的新成员叫做字典,基本的格式为data={键:值,键:值},info.keys()表示所有的键,info.values()表示所有的值,info. ...

  4. 好程序员web前端开发测验之css部分

    好程序员web前端开发测验之css部分Front End Web Development Quiz CSS 部分问题与解答 Q: CSS 属性是否区分大小写? <p><font si ...

  5. 类别不平衡问题和Softmax回归

    目录 类别不平衡(class-imbalance) Softmax回归模型 类别不平衡(class-imbalance) 当不同类别的训练样本数目差别很大,则会对学习过程造成困扰.如有998个反例,但 ...

  6. 【原创】JAVA面试解析(有赞一面)

    本文的题目出自博客 http://www.54tianzhisheng.cn/2018/07/12/youzan/ 但是作者没有给出答案,博主斗胆来制作答案版. 引言 说在前面的话: 本文适合人群:急 ...

  7. 网站添加icon

    设置网站的icon<link rel="shortcut icon" href="./static/img/favicon.ico" >

  8. 给hMailServer添加DKIM图文教程

    https://www.hmailserver.org/viewtopic.php?f=4&t=12

  9. MYSQL IN 出现的慢查询问题

    IN = https://blog.csdn.net/solmyr_biti/article/details/54293492 https://www.cnblogs.com/wxw16/p/6105 ...

  10. SD第九届省赛B题 Bullet

    Bullet Time Limit: 1000 ms Memory Limit: 65536 KiB Submit Statistic Discuss Problem Description In G ...