jQuery提示插件alertify使用指南

   jQuery提示插件alertify使用指南

          alertifyjs是一个非侵入式,可定制的JavaScript通知组件。包括可定制的对话框,和右下角消息弹出框。完全可定制的警报,确认和提示对话框、完全自定义的通知系统、回调参数处理包括“确定“和”取消“按钮的点击、允许对话框排队

  1.alertify插件功能

  主要实现提示功能,用于代替js中的alert,confirm,prompt,显示友好的提示框

  2.alertify使用方法

  1.使用的文件

  主要使用三个文件,两个css(alertify.core.css,alertify.default.css),用于设置提示框的样式。一个js(alertify.min.js或alertify.js),用于实现提示框的功能。

  2.实现提示框代码

  alertify使用非常简单,主要步骤为:初始化(初始化alertify)-》绑定(绑定事件)

  如实现简单的提示框、确认框和提示框

  ?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

var
$ = function (id) {
return document.getElementById(id);
},
//初始化操作
reset = function () {
alertify.set({
labels : {
ok : "确认",
cancel : "取消"
},
delay : 5000,
buttonReverse : false,
buttonFocus : "ok"
});
};
//绑定
$("alert").onclick = function () {
reset();
alertify.alert("提示框");
return false;
};
//绑定
$("confirm").onclick = function () {
reset();
alertify.confirm("确认框", function (e) {
if (e) {
alertify.success("点击确认");
} else {
alertify.error("点击取消");
}
});
return false;
};
//绑定
$("prompt").onclick = function () {
reset();
alertify.prompt("提示输入框", function (e, str) {
if (e) {
alertify.success("点击确认,输入内容为: " + str);
} else {
alertify.error("点击取消");
}
}, "默认值");
return false;
};

  显示结果(输入提示框):


  4.alertify修改样式

  主要是修改两个css文件(alertify.core.css,alertify.default.css),也可以覆盖使用。如在页面中加入

  ?

1
2
3
4
5
6
7

.alertify{
width:350px;
margin-left: -205px;
border:2px solid #4ba9e6;
background:#f3faff;
border-radius:0;
}

  修改后显示结果:


  alertify使用说明

  alertify是由html5+css3开发的插件,所以完美的支持html5+css3的浏览器。在测试过程过,alertify在chrome与火狐浏览器中显示效果是完美的,但是在ie8一下,显示效果有所不同,如圆角框、阴影、动画特效等不会显示。

时间: 2024-09-12 07:28:50

jQuery提示插件alertify使用指南的相关文章

jQuery提示插件alertify使用指南_jquery

1.alertify插件功能 主要实现提示功能,用于代替js中的alert,confirm,prompt,显示友好的提示框 2.alertify使用方法 1.使用的文件 主要使用三个文件,两个css(alertify.core.css,alertify.default.css),用于设置提示框的样式.一个js(alertify.min.js或alertify.js),用于实现提示框的功能. 2.实现提示框代码 alertify使用非常简单,主要步骤为:初始化(初始化alertify)->绑定(绑

jQuery菜单插件superfish使用指南

  jQuery菜单插件superfish使用指南          Superfish是一款Jquery插件,它能非常容易的建立复杂的多级下拉菜单,Superfish使用也非常普遍.你可能用Superfish实现多种菜单效果. Superfish的一些特点及效果: 使用纯Css实现动态效果,跨浏览器,支持最烂浏览器IE6 可设置下拉菜单在鼠标离开时自动隐藏时间.默认是800毫秒 支持淡入淡出动画 支持键盘响应 对含有子菜单的母菜单自动加入提示箭头 支持阴影效果,但需要有好的浏览器支持,如Fir

jQuery滚动条插件nanoscroller使用指南

  jQuery滚动条插件nanoscroller使用指南          本文给大家介绍的nanoScrollerJS是一款使用简单方式实现 Mac OS X Lion 系统滚动条效果的jQuery插件.该滚动条插件利用原生的滚动条可以工作在 iPad.iPhone 和一些 Android Tablets上. 网站在展示信息时,如果信息量过大,解决方法主要有三种.1.分页,将信息分页显示.2.整页显示,但是页面过长,影响浏览体验.3.使用滚动条,而默认滚动条样式太单一,用户体验不友好.所以我

jquery 提示插件鼠标移上圆角框图片提示

  <!doctype html public "-//w3c//dtd html 4.01//en" "http://www.w3.org/tr/html4/strict.dtd"> <html> <head>  <meta http-equiv="content-type" content="text/html;charset=gb2312"/>  <title>

jQuery提示插件PoshyTip使用详解

Demo中提供了三种使用的例子,页面代码如下:  代码如下 复制代码 <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="src/jquery.poshytip.js"></script> <link rel="stylesh

推荐:jQuery提示插件qTip2

1.qTip2特点 qTip2是从08年开始用jQuery以来用过的最好用的提示插件,有一下几个特点: 简单易用的API 详细的文档 美观.简洁.大方的界面 支持多种数据来源(title属性.ajax.自定义内容) 和其他插件的集成(jQuery Validator.jQuery UI.Youtube.Google Map.flot charts) 2.资源 官网:http://craigsworks.com/projects/qtip2 Demo:http://craigsworks.com/

jQuery菜单插件superfish使用指南_jquery

下载地址:http://plugins.jquery.com/project/Superfish 文档说明:http://users.tpg.com.au/j_birch/plugins/superfish/ Superfish的一些特点及效果: 使用纯Css实现动态效果,跨浏览器,支持最烂浏览器IE6 可设置下拉菜单在鼠标离开时自动隐藏时间.默认是800毫秒 支持淡入淡出动画 支持键盘响应 对含有子菜单的母菜单自动加入提示箭头 支持阴影效果,但需要有好的浏览器支持,如Firefox,chrom

jQuery验证插件validation使用指南

  jquery.validation.js在前端验证中使用起来非常方便,提供的功能基本上能满足大部分验证需求,下面我们就来仔细研究下这款jQuery插件的具体使用方法. 在网站开发过程中,有时我们需要验证用户输入的信息是否符合我们的要求,所以我们会对用户提交的数据进行验证.验证分两次进行,一次是在客户端,一次是在服务端.客户端的验证可以提升用户的体验. jquery验证插件有很多,实现的功能也基本相同.本文介绍的只是jquery验证插件中的一种jquery.validate jquery.Va

编写简单的jQuery提示插件_jquery

很简单的代码,就不多废话了. 代码: 复制代码 代码如下: /** * 2014年11月13日 * 提示插件 */ (function ($) {     $.fn.tips = function (text) {         var divtipsstyle = "position: absolute; left: 0; top: 0; background-color: #dceaf2; padding: 3px; border: solid 1px #6dbde4; visibilit