jNotify——优秀的jQuery结果提示框插件
- 作者：网页模板
- 大小：0.013MB
- 点击次数：
- 发布时间：2014-08-02 10:38
特效介绍
jNotify提示框，一款优秀的jQuery结果提示框插件。我们在提交表单后，通过Ajax响应后台返回结果，并在前台显示返回信息，jNotify能非常优雅的显示操作结果信息。jNotify是一款基于jQuery的信息提示插件，它支持操作成功、操作失败和操作提醒三种信息提示方式。jNotify浏览器兼容性非常好，支持更改提示内容，支持定位提示框的位置，可配置插件参数。使用方法
1.引入jNotify的css文件、js文件和jQuery库文件：1 | <link rel="stylesheet" type="text/css" href="jNotify.jquery.css" /> |
2 | <script type="text/javascript" src="http://www.5imoban.net/download/jquery/jquery-1.8.3.min.js"></script> |
3 | <script type="text/javascript" src="jNotify.jquery.js"></script> |
1 | $(function(){ |
2 | $(a.success).click(function(){ |
3 | jSuccess(message,{option}); |
4 | }); |
5 | }); |
1 | $(function(){ |
2 | $("a.error").click(function(){ |
3 | jError("操作失败，请重试!!"); |
4 | }); |
5 | }); |
1 | $(function(){ |
2 | $("a.notice").click(function(){ |
3 | jNotify("注意：请完善你的<strong>个人资料！</strong>"); |
4 | }); |
5 | }); |
01 | $(function(){ |
02 | $("a.three").click(function(){ |
03 | jSuccess("操作成功，2秒后显示下一个提示框!!",{ |
04 | TimeShown : 2000, |
05 | onClosed:function(){ |
06 | jNotify("注意：点击这里显示下一个提示框",{ |
07 | VerticalPosition : 'top', |
08 | autoHide : false, |
09 | onClosed:function(){ |
10 | jError("出错啦! 演示结束,<br /> 请点击背景层关闭提示框。",{ |
11 | clickOverlay : true, |
12 | autoHide : false, |
13 | HorizontalPosition : 'left' |
14 | }); |
15 | } |
16 | }); |
17 | } |
18 | }); |
19 | }); |
20 | }); |
01 | autoHide : true, // 是否自动隐藏提示条 |
02 | clickOverlay : false, // 是否单击遮罩层才关闭提示条 |
03 | MinWidth : 200, // 最小宽度 |
04 | TimeShown : 1500, // 显示时间：毫秒 |
05 | ShowTimeEffect : 200, // 显示到页面上所需时间：毫秒 |
06 | HideTimeEffect : 200, // 从页面上消失所需时间：毫秒 |
07 | LongTrip : 15, // 当提示条显示和隐藏时的位移 |
08 | HorizontalPosition : "right", // 水平位置:left, center, right |
09 | VerticalPosition : "bottom", // 垂直位置：top, center, bottom |
10 | ShowOverlay : true, // 是否显示遮罩层 |
11 | ColorOverlay : "#000", // 设置遮罩层的颜色 |
12 | OpacityOverlay : 0.3, // 设置遮罩层的透明度 |
13 | onClosed:fn //关闭提示框后执行函数，可以再次调用其他jNotify。如上面的三个依次调用。 |
4、触发的html代码，例如a链接点击后弹出成功提示框：
1 | <a href="#" class="success">点击查看操作成功提示</a> |
1 | $(a.success).click(function(){js代码} |
- 本文标签：
- jNotify提示框插件,jQuery弹出层
