jQuery提示插件alertify使用指南


Posted in Javascript onApril 21, 2015

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)-》绑定(绑定事件)

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

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;
};

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

jQuery提示插件alertify使用指南

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

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

修改后显示结果:

jQuery提示插件alertify使用指南

alertify使用说明

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

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
Javascript将string类型转换int类型
Dec 09 Javascript
JS将光标聚焦在文本最后的实现代码
Mar 28 Javascript
JavaScript实现强制重定向至HTTPS页面
Jun 10 Javascript
基于JavaScript代码实现pc与手机之间的跳转
Dec 23 Javascript
jQuery中的基本选择器用法学习教程
Apr 14 Javascript
javascript创建对象的3种方法
Nov 02 Javascript
详解如何在vue中使用sass
Jun 21 Javascript
Angular整合zTree的示例代码
Jan 24 Javascript
利用js实现前后台传送Json的示例代码
Mar 29 Javascript
让你5分钟掌握9个JavaScript小技巧
Jun 09 Javascript
微信小程序实现发微博功能的示例代码
Jun 24 Javascript
原生js实现自定义消息提示框
Nov 19 Javascript
JS实现仿google、百度搜索框输入信息智能提示的实现方法
Apr 20 #Javascript
Jquery遍历Json数据的方法
Apr 20 #Javascript
javascript判断变量是否有值的方法
Apr 20 #Javascript
javascript实现校验文件上传控件实例
Apr 20 #Javascript
使用iojs的jsdom库实现同步系统时间
Apr 20 #Javascript
javascript实现汉字转拼音代码分享
Apr 20 #Javascript
jQuery简单实现图片预加载
Apr 20 #Javascript
You might like
PHP 工厂模式使用方法
2010/05/18 PHP
php数组索引的Key加引号和不加引号的区别
2014/08/19 PHP
详解php 使用Callable Closure强制指定回调类型
2017/10/26 PHP
php依赖注入知识点详解
2019/09/23 PHP
javascript表单事件处理方法详解
2016/05/15 Javascript
BootStrap的table表头固定tbody滚动的实例代码
2016/08/24 Javascript
JavaScript中附件预览功能实现详解(推荐)
2017/08/15 Javascript
angular4应用中输入的最小值和最大值的方法
2019/05/17 Javascript
vue+element模态框中新增模态框和删除功能
2019/06/11 Javascript
JavaScript对象原型链原理解析
2020/01/22 Javascript
JavaScript实现拖拽盒子效果
2020/02/06 Javascript
在Chrome DevTools中调试JavaScript的实现
2020/04/07 Javascript
[01:35]2014DOTA2西雅图邀请赛 专访狐狸妈青春献给刀塔
2014/07/08 DOTA
使用python删除nginx缓存文件示例(python文件操作)
2014/03/26 Python
Python语言的12个基础知识点小结
2014/07/10 Python
Django rest framework工具包简单用法示例
2018/07/20 Python
Python 输出时去掉列表元组外面的方括号与圆括号的方法
2018/12/24 Python
修改Pandas的行或列的名字(重命名)
2019/12/18 Python
基于python爬取有道翻译过程图解
2020/03/31 Python
windows支持哪个版本的python
2020/07/03 Python
python“静态”变量、实例变量与本地变量的声明示例
2020/11/13 Python
如何基于Python和Flask编写Prometheus监控
2020/11/25 Python
css3发光搜索表单分享
2014/04/11 HTML / CSS
松下电器美国官方商店:Panasonic美国
2016/10/14 全球购物
美国最大的宠物用品零售商:PetSmart
2016/11/14 全球购物
西班牙香水和化妆品网上商店:Douglas
2017/10/29 全球购物
Tirendo比利时:在线购买轮胎
2018/10/22 全球购物
Airbnb爱彼迎官网:成为爱彼迎房东,赚取收入
2019/03/14 全球购物
瑞典网上购买现代和复古家具:Reforma
2019/10/21 全球购物
国际贸易个人求职信范文
2014/01/04 职场文书
拖鞋店创业计划书
2014/01/15 职场文书
2014高中生入党思想汇报范文
2014/09/13 职场文书
领导班子四风对照检查材料范文
2014/09/27 职场文书
2015年度党员自我评价范文
2015/03/03 职场文书
初中班长竞选稿
2015/11/20 职场文书
python 使用tkinter与messagebox写界面和弹窗
2022/03/20 Python