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 ...
随机推荐
- br-lan、eth0、eth1及lo (转)
如果你的设备含有不少于1个的LAN接口,那这个设备在不同的接口之间可能有一个被称为交换(switch)的特殊连接.大多数的内部构造如下图所示: Linux 系统下输入ifconfig命令,会有如下输出 ...
- 创建Node.js TypeScript后端项目
1.安装Node.js扩展,支持TypeScript语法 npm install -g typescript npm install -g typings 2.创建项目目录project_fold ...
- git官网和安装使用教程链接
git官网 https://git-scm.com/download/win git安装教程 https://www.cnblogs.com/wj-1314/p/7993819.html
- Ubuntu下 安装MiniGUI
1. 需要下载的组件 首先需要这些安装包,这些安装包可以在MiniGUI官网上下载. libminigui-gpl-3_0_12.tar.gzmg-samples-3_0_12.tar.gzfreet ...
- php html生成页面二维码
这个方法主要是针对html页面生成二维码,因此需要一个配置文件phpqrcode.php(因内容太多所以请大家去百度网盘自己下载即可,链接: https://pan.baidu.com/s/1_2mA ...
- Intellij Idea调试java文件时 怎么跳过class文件?
Intellij Idea调试时 java文件时,遇到class文件时它也会反编译该文件,并跳入该class文件内一条条语句执行.这让我烦透了,怎么跳过class文件,继续调试啊? SETTINGS- ...
- [转] vue自定义组件(通过Vue.use()来使用)即install的使用
在vue项目中,我们可以自定义组件,像element-ui一样使用Vue.use()方法来使用,具体实现方法: 1.首先新建一个Cmponent.vue文件 // Cmponent.vue<te ...
- 用 zotero 管理文献和个人知识库
这周开始用了一下 zotero. 这是一款非常好用的文献管理工具,但它更像是一个多功能的收藏夹,或者说是一个知识.笔记.文献的综合管理工具. 入门的时候搜到了阳志平老师的几个图文并茂的教程,这里也推荐 ...
- jsp中静态include和动态include的区别
jsp中静态include和动态include的区别 动态 INCLUDE 用 jsp:include 动作实现 <jsp:include page="included.jsp&quo ...
- 关于input的检验问题
写了很多小应用 但是 对于input有很多 相同的需求 在这里做一个总结 将用的多的校验方法 封装为方法 使用 1.只能输入正整数的校验 输入的时候同时校验 将字符类型的全部替换为空 <inpu ...