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 ...
随机推荐
- IP地址分类(A类 B类 C类 D类 E类)
IP地址分类(A类 B类 C类 D类 E类) IP地址由四段组成,每个字段是一个字节,8位,最大值是255,, IP地址由两部分组成,即网络地址和主机地址.网络地址表示其属于互联网的哪一个网络,主机地 ...
- HttpClient当HTTP连接的时候出现大量CLOSE_WAIT连接(转)
ESTABLISHED 表示正在进行网络连接的数量 TIME_WAIT 表示表示等待系统主动关闭网络连接的数量 CLOSE_WAIT 表示被动等待程序关闭的网络连接数量 上篇文章给出了解决TIME_W ...
- (三)Knockout 控制流程
foreach 示例1:迭代数组 foreach binding主要作用于lists或是tables内数据单元的动态绑定.下面是一个简单的例子: <table> <thead> ...
- ansible的Filter
filter的格式: value..| filter() 在python中就是类的实例化 filter(self,*args,**kwargs) self就是filter中管道符前的value. ...
- Python_多进程
Python 多进程库 multiprocessing ,支持子进程.通信.数据共享.执行不同形式的同步 多进程,绕过gil ,实现多核的利用,多进程也是原生进程,由操作系统维护 在pycharm中, ...
- Doctirne---查询更新等操作
使用Doctrine进行mysql更删改查操作,事务处理,生命周期的管理 1.先记录最简单的插入操作 $em = $this->getDoctrine()->getManager(); / ...
- redis启动过程源码解析
redis整个程序的入口函数在server.c中的main函数,函数调用关系如下图1,调用顺序为从上到下,从左至右. 图1 redis启动函数调用图 main函数源码如下,1-55行根据配置文件和启动 ...
- 关于UTF-8和GBK编码的转换
$oldname=mb_convert_encoding($_POST['oldname'], "GBK" , "UTF-8");//将变量转码为GBK,已知原 ...
- 构建MHA实现MySQL高可用集群架构
一.MHA简介 MHA(Master HighAvailability)目前在MySQL高可用方面是一个相对成熟的解决方案,它由日本DeNA公司youshimaton(现就职于Facebook公司)开 ...
- Spark on Yarn with HA
Spark 可以放到yarn上面去跑,这个毫无疑问.当Yarn做了HA的时候,网上会告诉你基本Spark测不需做太多的关注修改,实际不然. 除了像spark.yarn开头的相关配置外,其中一个很重要的 ...