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开发随笔二 动态加载js和文件
Nov 25 Javascript
js检测输入内容全为空格的方法
May 03 Javascript
jQuery基于当前元素进行下一步的遍历
May 20 Javascript
TypeScript 学习笔记之基本类型
Jun 19 Javascript
基于BootStrap Metronic开发框架经验小结【九】实现Web页面内容的打印预览和保存操作
May 12 Javascript
BootStrap 智能表单实战系列(十)自动完成组件的支持
Jun 13 Javascript
Angular2下使用pdf插件的方法详解
Apr 29 Javascript
JS实现简单表格排序操作示例
Oct 07 Javascript
AngularJS实时获取并显示密码的方法
Feb 06 Javascript
vue.js的vue-cli脚手架中使用百度地图API的实例
Jan 21 Javascript
Vue中key的作用示例代码详解
Jun 10 Javascript
vue 根据选择的月份动态展示日期对应的星期几
Feb 06 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
迅雷下载《中学科技》怀旧期刊下载
2021/02/27 无线电
PHP可逆加密/解密函数分享
2012/09/25 PHP
Zend Framework入门教程之Zend_Registry组件用法详解
2016/12/09 PHP
PHP编程获取各个时间段具体时间的方法
2017/05/26 PHP
thinkPHP5.0框架验证码调用及点击图片刷新简单实现方法
2018/09/07 PHP
如何快速的呈现我们的网页的技巧整理
2007/07/01 Javascript
JS拖动技术 关于setCapture使用
2010/12/09 Javascript
JQuery操作单选按钮以及复选按钮示例
2013/09/23 Javascript
JS生成不重复随机数组的函数代码
2014/06/10 Javascript
javascript刷新父页面的各种方法汇总
2014/09/03 Javascript
正则表达式(语法篇推荐)
2016/06/24 Javascript
jQuery ajaxForm()的应用
2016/10/14 Javascript
js 颜色选择插件
2017/01/23 Javascript
Easyui使用Dialog行内按钮布局的实例
2017/07/27 Javascript
Angular.js初始化之ng-app的自动绑定与手动绑定详解
2017/07/31 Javascript
Vue中computed与methods的区别详解
2018/03/24 Javascript
浅析Vue 生命周期
2018/06/21 Javascript
jQuery位置选择器用法实例分析
2019/06/28 jQuery
微信小程序 调用远程接口 给全局数组赋值代码实例
2019/08/13 Javascript
JS canvas实现画板和签字板功能
2021/02/23 Javascript
python3音乐播放器简单实现代码
2020/04/20 Python
关于Python中Inf与Nan的判断问题详解
2017/02/08 Python
python ipset管理 增删白名单的方法
2019/01/14 Python
python 变量初始化空列表的例子
2019/11/28 Python
PYcharm 激活方法(推荐)
2020/03/23 Python
Python爬虫之Selenium中frame/iframe表单嵌套页面
2020/12/04 Python
WiFi云数码相框:Nixplay
2018/07/05 全球购物
澳大利亚儿童精品仓库:Goo & Co.
2019/06/20 全球购物
情况说明书格式范文
2014/05/06 职场文书
大学生毕业个人总结
2015/02/15 职场文书
新入职员工工作总结
2015/10/15 职场文书
nginx处理http请求实现过程解析
2021/03/31 Servers
React Fragment介绍与使用详解
2021/11/11 Javascript
Golang Elasticsearches 批量修改查询及发送MQ
2022/04/19 Golang
win server2012 r2服务器共享文件夹如何设置
2022/06/21 Servers
zabbix 代理服务器的部署与 zabbix-snmp 监控问题
2022/07/15 Servers