注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

漂亮灵活设置的jquery通知提示插件toastr

UI fishcity 3411浏览

jquery通知提示插件toastr

toastr是一款非常棒的基于jquery库的非阻塞通知提示插件,toastr可设定四种通知模式:成功,出错,警告,提示,而提示窗口的位置,动画效果都可以通过能数来设置,在官方站可以通过勾选参数来生成JS,非常的方便使用。jQ酷的另外一款jquery提示插件也不错:jQuery自定义工具提示插件DarkTooltip

使用方法:

引入核心文件

<link href="toastr.css" rel="stylesheet" type="text/css" />
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script src="toastr.js"></script>

写入html代码,这里只需写入触发事件的按丑。

<input type="button" name="success" id="success" value="成功"/>
<input type="button" name="info" id="info" value="提示"/>
<input type="button" name="warning" id="warning" value="警告"/>
<input type="button" name="error" id="error" value="错误"/>
<input type="button" name="clear" id="clear" value="清除"/>

给按钮绑定事件

$(function(){
	//参数设置,若用默认值可以省略以下面代
	toastr.options = {
		"closeButton": false, //是否显示关闭按钮
		"debug": false, //是否使用debug模式
		"positionClass": "toast-top-full-width",//弹出窗的位置
		"showDuration": "300",//显示的动画时间
		"hideDuration": "1000",//消失的动画时间
		"timeOut": "5000", //展现时间
		"extendedTimeOut": "1000",//加长展示时间
		"showEasing": "swing",//显示时的动画缓冲方式
		"hideEasing": "linear",//消失时的动画缓冲方式
		"showMethod": "fadeIn",//显示时的动画方式
		"hideMethod": "fadeOut" //消失时的动画方式
		};

		//成功提示绑定
		$("#success").click(function(){
		toastr.success("祝贺你成功了");
		})
		
		//信息提示绑定
		$("#info").click(function(){
		toastr.info("这是一个提示信息");
		})
		
		//敬告提示绑定
		$("#warning").click(function(){
		toastr.warning("警告你别来烦我了");
		})
		
		//错语提示绑定
		$("#error").click(function(){
		toastr.error("出现错误,请更改");
		})
		
		//清除窗口绑定
		$("#clear").click(function(){
		toastr.clear();
		})
	})	

转载请注明:jQ酷 » 漂亮灵活设置的jquery通知提示插件toastr

下载地址:本站下载 | 百度云 | 官方下载
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。