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 相关文章推荐
js页面滚动时层智能浮动定位实现(jQuery/MooTools)
Aug 23 Javascript
js数组的操作详解
Mar 27 Javascript
深入理解JS中的substr和substring
Apr 26 Javascript
vue2.0的contextmenu右键弹出菜单的实例代码
Jul 24 Javascript
详解Angular中实现自定义组件的双向绑定的两种方法
Nov 23 Javascript
JavaScript实现小球沿正弦曲线运动
Sep 07 Javascript
详解VUE里子组件如何获取父组件动态变化的值
Dec 26 Javascript
解决echarts的多个折现数据出现坐标和值对不上的问题
Dec 28 Javascript
vue封装一个简单的div框选时间的组件的方法
Jan 06 Javascript
详解react-refetch的使用小例子
Feb 15 Javascript
iphone刘海屏页面适配方法
May 07 Javascript
解决vue初始化项目时,一直卡在Project description上的问题
Oct 31 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 strtr() 函数使用说明
2008/11/21 PHP
PHP中文件缓存转内存缓存的方法
2011/12/06 PHP
PHP屏蔽蜘蛛访问代码及常用搜索引擎的HTTP_USER_AGENT
2013/03/06 PHP
PHP读取大文件的类SplFileObject使用介绍
2014/04/09 PHP
PHP类的自动加载与命名空间用法实例分析
2020/06/05 PHP
js中的window.open返回object的错误的解决方法
2009/08/15 Javascript
JavaScript 一行代码,轻松搞定浮动快捷留言-V2升级版
2010/04/02 Javascript
jquery form 隐藏的input 选择
2014/04/29 Javascript
Angular 理解module和injector,即依赖注入
2016/09/07 Javascript
详解JavaScript权威指南之对象
2016/09/27 Javascript
jQuery.datatables.js插件用法及api实例详解
2016/10/28 Javascript
bootstrap中模态框、模态框的属性实例详解
2017/02/17 Javascript
jQuery快速高效制作网页交互特效
2017/02/24 Javascript
微信小程序调用摄像头隐藏式拍照功能
2018/08/22 Javascript
基于vue-cli搭建多模块且各模块独立打包的项目
2019/06/12 Javascript
JS实现商品橱窗特效
2020/01/09 Javascript
[51:53]完美世界DOTA2联赛循环赛 LBZS vs DM BO2第二场 11.01
2020/11/02 DOTA
Python常用模块介绍
2014/11/21 Python
python3使用PyMysql连接mysql数据库实例
2017/02/07 Python
Python使用folium excel绘制point
2019/01/03 Python
Python变量类型知识点总结
2019/02/18 Python
简单了解python 邮件模块的使用方法
2019/07/24 Python
Python中字典与恒等运算符的用法分析
2019/08/22 Python
使用pyecharts1.7进行简单的可视化大全
2020/05/17 Python
Python制作一个仿QQ办公版的图形登录界面
2020/09/22 Python
python产生模拟数据faker库的使用详解
2020/11/04 Python
canvas实现烟花的示例代码
2020/01/16 HTML / CSS
海淘零差价,宝贝全球购: 宝贝格子
2016/08/24 全球购物
纪伊国屋新加坡网上书店:Kinokuniya新加坡
2017/12/29 全球购物
自1926年以来就为冰岛保持温暖:66°North
2020/11/27 全球购物
Order by的几种用法
2013/06/16 面试题
农田水利实习自我鉴定
2013/09/19 职场文书
生日寄语大全
2014/04/08 职场文书
房屋继承公证书
2014/04/10 职场文书
政法干警核心价值观心得体会
2014/09/11 职场文书
初中班主任心得体会
2016/01/07 职场文书