jQuery toastr提示简单实现
注:在学校平时做的小项目跳页都是用 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": "",
"hideDuration": "",
"timeOut": "",
"extendedTimeOut": "",
"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";
}, )
return false;
}
else {
toastr.error("出现错误,请更改");
}
})
return false;
})
})
</script>
到这里就结束啦!希望大神们给我指点指点,修改修改,感激不尽!
jQuery toastr提示简单实现的更多相关文章
- Jquery toastr提示框
toastr是一个基于JQuery的消息提示插件; 1. 下载toastr和jquery https://jquery.com/download/ https://codeseven.github.i ...
- 漂亮灵活设置的jquery通知提示插件toastr
toastr是一款非常棒的基于jquery库的非阻塞通知提示插件,toastr可设定四种通知模式:成功,出错,警告,提示,而提示窗口的位置,动画效果都可以通过能数来设置,在官方站可以通过勾选参数来生成 ...
- jquery toastr introduction
1.资源 http://www.jq22.com/jquery-info476 http://www.jq22.com/yanshi476 Nuget Install-Package toastr 官 ...
- Eclipse安装插件支持jQuery智能提示
Eclipse安装插件支持jQuery智能提示 最近工作中用到jQuery插件,需要安装eclipse插件才能支持jQuery智能提示,在网上搜索了一下,常用的有三个插件支持jQuery的智能提示:1 ...
- 几个 jQuery 小提示和技巧
几个 jQuery 小提示和技巧 今天,我们将分享一些很有用的技巧和窍门给 jQuery 开发人员.jQuery 是最好的 JavaScript 库之一,用于简化动画,事件处理,支持 Ajax 和 H ...
- 让你的MyEclipse具有jquery自动提示
想让你的MyEclipse支持Jquery的自动提示更简单一些,照下图完成即可: 照上面图示已经完成了Jquery自动提示的配置,此时spket已经有两种AJAX库的自动提示,通过右边的De ...
- MyEclipse jQuery智能 提示
jQuery智能 MyEclipse Spket IDE 1.6.23 http://www.spket.com/download.html Plugin 1.6.23 5.62 MB Minimum ...
- Angular toastr提示框
1. 安装ngx-toastr包 npm install ngx-toastr --save 2. package.json中引入toastr样式文件 "styles": [&qu ...
- 基于jquery的提示框JavaScript 插件,类Bootstrap
目录 基于jquery的提示框JavaScript 插件,类Bootstrap 基于jquery的提示框JavaScript 插件,类Bootstrap 源码 github地址: https://gi ...
随机推荐
- js 校验 btc eth 地址
NPM 安装 npm install wallet-address-validator Browser <script src="wallet-address-validator.mi ...
- Android Studio打开项目,停在gradle的解决方案
之所以停留,是因为打开项目时,Android Studio解析项目使用的gradle,并下载对应版本的gradle,但是由于下载gradle的服务器在国外,这个下载速度非常不稳定,从而导致停留在这一步 ...
- sass动态实现颜色平铺显示
@function stripes($position,$colors) { $colors: if(type-of($colors)!='list', compact($colors), $colo ...
- python的位置参数、默认参数、关键字参数、可变参数区别
一.位置参数 调用函数时根据函数定义的参数位置来传递参数. #!/usr/bin/env python # coding=utf-8 def print_hello(name, sex): sex_d ...
- youtube-dl下载youtube视频时查看分辨率以及选择分辨率下载
1.查看分辨率: youtube-dl -F https://www.youtube.com/watch?v=_NMf1TpiFwY 2.根据分辨率下载,比如下载1280*720的mp4,前面的数字是 ...
- Java获取Ip发送邮件
import lombok.extern.slf4j.Slf4j; import org.apache.commons.lang3.StringUtils; import javax.servlet. ...
- AGC-018 C
题意: 有$X + Y + Z$个人,第$i$个人有$Ai$个金币,$Bi$个银币,$Ci$个铜币. 选出$X$个人获得其金币,选出$Y$ 个人获得其银币,选出$Z$个人获得 其铜币,在不重复选某个人 ...
- lxml.etree.HTML(text) 解析HTML文档
0.参考 http://lxml.de/tutorial.html#the-xml-function There is also a corresponding function HTML() for ...
- requests之headers 'Content-Type': 'text/html'误判encoding为'ISO-8859-1'导致中文text解码错误
0. requests不设置UA 访问baidu 得到 r.headers['Content-Type'] 是text/html 使用chrome UA: Content-Type:text/htm ...
- 【转】Oracle imp 总是不停地重复闪烁
http://blog.itpub.net/7282477/viewspace-1003160/ 在dos下执行: imp username/password buffer=1000000 file= ...