注:在学校平时做的小项目跳页都是用 Response.Write写脚本弹窗并跳页,每次点击登录成功,注册成功......然后点击确定,太麻烦了,这次的项目老师说让用这个插件,所以就简单搞了一下!
实现效果:当点击登录时,通过异步和数据库连接查询,如果成功,弹出成功提示几秒,然后再自动跳页,如果登录失败,直接提示登录失败,因为很简单,所以就直接写代码了,就当简单复习一下啦!哈哈
先引入三个链接:如下(直接去网上下载就行)
<link href="toastr.css" rel="stylesheet" />
<script src="jquery.min.js"></script>
<script src="toastr.js"></script>
HTML页面:因为举例子,就直接放一些个服务器空间的按钮,没有放<input type="button">的原因是因为在用服务器控件实现的时候,遇到了一些问题,然后解决了一下
<asp:Button ID="success" runat="server" Text="Button" />
???????????<asp:Button ID="info" runat="server" Text="Button" />
???????????<asp:Button ID="warning" runat="server" Text="Button" />
???????????<asp:Button ID="error" runat="server" Text="Button" />
???????????<asp:Button ID="Button1" runat="server" Text="登录"/> 就用这个按钮吧!
???????????<input type="button" name="clear" id="clear" value="清除" />
JavaScript代码:
<script> ???????$(function () { ???????????toastr.options = { ???????????????"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" ???????????}; ???????????$("#success").click(function () { ???????????????toastr.success("祝贺你成功了"); ???????????????return false; ???????????}) ???????????//信息提示绑定 ???????????$("#info").click(function () { ???????????????toastr.info("这是一个提示信息"); ???????????????return false; ???????????}) ???????????$("#warning").click(function () { ???????????????toastr.warning("警告你别来烦我了"); ???????????????return false; ???????????}) ???????????$("#error").click(function () { ???????????????toastr.error("出现错误,请更改"); ???????????????return false; ???????????}) ???????????$("#clear").click(function () { ???????????????toastr.clear(); ???????????}) ???????????$("#Button1").click(function () { ???????????????$.get("Handler.ashx", {}, function (data) { ???????????????????????????????????????if (data == "true") { ???????????????????????toastr.success("祝贺你成功了"); ???????????????????????setTimeout(function () { ???????????????????????????window.location.href = "Default.aspx"; ???????????????????????}, 1000) ???????????????????????return false; ???????????????????} ???????????????????else { ???????????????????????toastr.error("出现错误,请更改"); ???????????????????} ???????????????}) ???????????????return false; ???????????}) ????????}) ???</script>
到这里就结束啦!希望大神们给我指点指点,修改修改,感激不尽!
jQuery toastr提示简单实现
原文地址:https://www.cnblogs.com/dcy521/p/10265275.html