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 相关文章推荐
有关DOM元素与事件的3个谜题
Nov 11 Javascript
jQuery插件jQuery-JSONP开发ajax调用使用注意事项
Nov 22 Javascript
javascript操作html控件实例(javascript添加html)
Dec 02 Javascript
jquery将一个表单序列化为一个对象的方法
Dec 02 Javascript
JavaScript实现的一个计算数字步数的算法分享
Dec 06 Javascript
js正则匹配出所有图片及图片地址src的方法
Jun 08 Javascript
jQuery实现可用于博客的动态滑动菜单完整实例
Sep 17 Javascript
Javascript 基础---Ajax入门必看
Jul 06 Javascript
解决angular双向绑定无效果,ng-model不能正常显示的问题
Oct 02 Javascript
vue-cli3 项目优化之通过 node 自动生成组件模板 generate View、Component
Apr 30 Javascript
在mpvue框架中使用Vant WeappUI组件库的注意事项【推进】
Jun 09 Javascript
webpack4从0搭建组件库的实现
Nov 29 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统计二维数组元素个数的方法
2013/11/12 PHP
ThinkPHP3.1新特性之动态设置自动完成和自动验证示例
2014/06/19 PHP
windows7下安装php的imagick和imagemagick扩展教程
2014/07/04 PHP
简单介绍win7下搭建apache+php+mysql开发环境
2015/08/06 PHP
PHP统计当前在线用户数实例讲解
2015/10/21 PHP
读jQuery之十三 添加事件和删除事件的核心方法
2011/08/23 Javascript
js导出格式化的excel 实例方法
2013/07/17 Javascript
jquerymobile局部渲染的各种刷新方法小结
2014/03/05 Javascript
javascript面向对象之this关键词用法分析
2015/01/13 Javascript
JS+CSS实现模仿浏览器网页字符查找功能的方法
2015/02/26 Javascript
利用原生JS自动生成文章标题树的实例
2016/08/22 Javascript
js document.getElementsByClassName的使用介绍与自定义函数
2016/11/25 Javascript
Vue.js使用v-show和v-if的注意事项
2016/12/13 Javascript
前端主流框架vue学习笔记第二篇
2017/07/26 Javascript
VueJS 集成 Medium Editor的示例代码 (自定义编辑器按钮)
2017/08/24 Javascript
BetterScroll 在移动端滚动场景的应用
2017/09/18 Javascript
nodejs发送http请求时遇到404长时间未响应的解决方法
2017/12/10 NodeJs
利用adb shell和node.js实现抖音自动抢红包功能(推荐)
2018/02/22 Javascript
vue实现在v-html的html字符串中绑定事件
2019/10/28 Javascript
python抓取豆瓣图片并自动保存示例学习
2014/01/10 Python
python实现无证书加密解密实例
2014/10/27 Python
python中MySQLdb模块用法实例
2014/11/10 Python
使用Python制作微信跳一跳辅助
2018/01/31 Python
浅谈python可视化包Bokeh
2018/02/07 Python
Python如何把十进制数转换成ip地址
2020/05/25 Python
python爬虫快速响应服务器的做法
2020/11/24 Python
Python编写万花尺图案实例
2021/01/03 Python
html5实现图片转圈的动画效果——让页面动起来
2017/10/16 HTML / CSS
拉斯维加斯酒店、演出、旅游、俱乐部及更多:Vegas.com
2019/02/28 全球购物
Yummie官方网站:塑身衣和衣柜必需品
2019/10/29 全球购物
法学专业毕业生自荐信范文
2013/12/18 职场文书
客服部班长工作责任制
2014/02/25 职场文书
捐助贫困学生倡议书
2014/05/16 职场文书
2014年国庆标语
2014/06/30 职场文书
2015年行政部工作总结
2015/04/28 职场文书
动态规划之使用备忘录来改进Javascript函数
2022/04/07 Javascript