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 相关文章推荐
jquery checkbox全选、取消全选实现代码
Mar 05 Javascript
情人节之礼 js项链效果
Feb 13 Javascript
JavaScript中的eval()函数使用介绍
Dec 31 Javascript
javascript获取select标签选中的值
Jun 04 Javascript
JS实现鼠标框选效果完整实例
Jun 20 Javascript
Javascript字符串常用方法详解
Jul 21 Javascript
jquery结合html实现中英文页面切换
Nov 29 Javascript
从零开始做一个pagination分页组件
Mar 15 Javascript
BootStrap导航栏问题记录
Jul 31 Javascript
vue弹窗组件的实现示例代码
Sep 10 Javascript
Vue获取页面元素的相对位置的方法示例
Feb 05 Javascript
如何在vue中使用kindeditor富文本编辑器
Dec 19 Vue.js
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使用fsockopen函数发送post,get请求获取网页内容的方法
2014/11/15 PHP
laravel 5.4中实现无限级分类的方法示例
2017/07/27 PHP
php-fpm重启导致的程序执行中断问题详解
2019/04/29 PHP
tp5 实现列表数据根据状态排序
2019/10/18 PHP
客户端静态页面玩分页
2006/06/26 Javascript
js判断输入是否为数字的具体实例
2013/08/03 Javascript
jQuery在iframe中无法弹出对话框的解决方法
2014/01/12 Javascript
JSON中双引号的轮回使用过程中一定要小心
2014/03/05 Javascript
Javascript 浮点运算精度问题分析与解决
2014/03/26 Javascript
javascript实现继承的简单实例
2015/07/26 Javascript
jQuery实现下拉框选择图片功能实例
2015/08/08 Javascript
简单谈谈Javascript中类型的判断
2015/10/19 Javascript
JS实现超简单的鼠标拖动效果
2015/11/02 Javascript
jQuery实现textarea自动增长宽高的方法
2015/12/18 Javascript
使用AngularJS 跨站请求如何解决jsonp请求问题
2017/01/16 Javascript
你真的了解BOM中的history对象吗
2017/02/13 Javascript
Windows安装Node.js报错:2503、2502的解决方法
2017/10/25 Javascript
微信小程序实现下拉刷新和轮播图效果
2017/11/21 Javascript
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
2020/02/01 jQuery
nuxt.js服务端渲染中axios和proxy代理的配置操作
2020/11/06 Javascript
[01:18:35]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS BO3 第一场 1月29日
2021/03/11 DOTA
python日期时间转为字符串或者格式化输出的实例
2018/05/29 Python
利用Python进行数据可视化常见的9种方法!超实用!
2018/07/11 Python
python针对不定分隔符切割提取字符串的方法
2018/10/26 Python
python爬虫租房信息在地图上显示的方法
2019/05/13 Python
Python自定义聚合函数merge与transform区别详解
2020/05/26 Python
python按照list中字典的某key去重的示例代码
2020/10/13 Python
ziaja齐叶雅官方海外旗舰店:来自波兰的天然护肤品牌
2017/01/02 全球购物
生态养殖创业计划书
2014/05/06 职场文书
关于工作经历的证明书
2014/10/11 职场文书
批评与自我批评范文
2014/10/15 职场文书
优秀教研组申报材料
2014/12/26 职场文书
乡镇科协工作总结2015
2015/05/19 职场文书
python 如何用terminal输入参数
2021/05/25 Python
Python数据类型最全知识总结
2021/05/31 Python
微软团队与 NASA 科学家和惠普企业(HPE)的工程师合作
2022/04/21 数码科技