alertify、js、css 使用简介
Alertify.js which helped me resolve my issues regarding prompts, alerts, confirms, etc in iOS7.
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; };
显示结果(输入提示框)：
4.alertify修改样式
主要是修改两个css文件(alertify.core.css，alertify.default.css)，也可以覆盖使用。如在页面中加入
.alertify{ width:350px; margin-left: -205px; border:2px solid #4ba9e6; background:#f3faff; border-radius:0; }
修改后显示结果：
alertify使用说明
alertify是由html5+css3开发的插件，所以完美的支持html5+css3的浏览器。在测试过程过，alertify在chrome与火狐浏览器中显示效果是完美的，但是在ie8一下，显示效果有所不同，如圆角框、阴影、动画特效等不会显示。
alertify.js
/** * alertify * An unobtrusive customizable JavaScript notification system * * @author Fabien Doiron <fabien.doiron@gmail.com> * @copyright Fabien Doiron 2013 * @license MIT <http://opensource.org/licenses/mit-license.php> * @link http://fabien-d.github.com/alertify.js/ * @module alertify * @version 0.3.8 */ (function(e,t){"use strict";var n=e.document,r;r=function(){var r={},i={},s=!1,o={ENTER:13,ESC:27,SPACE:32},u=[],a,f,l,c,h,p,d,v,m,g,y,b;return i={buttons:{holder:'<nav class="alertify-buttons">{{buttons}}</nav>',submit:'<button type="submit" class="alertify-button alertify-button-ok" id="alertify-ok">{{ok}}</button>',ok:'<a href="#" class="alertify-button alertify-button-ok" id="alertify-ok">{{ok}}</a>',cancel:'<a href="#" class="alertify-button alertify-button-cancel" id="alertify-cancel">{{cancel}}</a>'},input:'<div class="alertify-text-wrapper"><input type="text" class="alertify-text" id="alertify-text"></div>',message:'<p class="alertify-message">{{message}}</p>',log:'<article class="alertify-log{{class}}">{{message}}</article>'},b=function(){var e,r=n.createElement("fakeelement"),i={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"otransitionend",transition:"transitionend"};for(e in i)if(r.style[e]!==t)return i[e]},a=function(e){return n.getElementById(e)},r={labels:{ok:"OK",cancel:"Cancel"},delay:5e3,buttonReverse:!1,buttonFocus:"ok",transition:t,addListeners:function(e){var t=typeof l!="undefined",r=typeof f!="undefined",i=typeof y!="undefined",s="",u=this,a,h,p,d,v;a=function(t){return typeof t.preventDefault!="undefined"&&t.preventDefault(),p(t),typeof y!="undefined"&&(s=y.value),typeof e=="function"&&(typeof y!="undefined"?e(!0,s):e(!0)),!1},h=function(t){return typeof t.preventDefault!="undefined"&&t.preventDefault(),p(t),typeof e=="function"&&e(!1),!1},p=function(e){u.hide(),u.unbind(n.body,"keyup",d),u.unbind(c,"focus",v),i&&u.unbind(g,"submit",a),t&&u.unbind(l,"click",a),r&&u.unbind(f,"click",h)},d=function(e){var t=e.keyCode;t===o.SPACE&&!i&&a(e),t===o.ESC&&r&&h(e)},v=function(e){i?y.focus():r?f.focus():l.focus()},this.bind(c,"focus",v),t&&this.bind(l,"click",a),r&&this.bind(f,"click",h),this.bind(n.body,"keyup",d),i&&this.bind(g,"submit",a),typeof this.transition=="undefined"&&this.setFocus()},bind:function(e,t,n){typeof e.addEventListener=="function"?e.addEventListener(t,n,!1):e.attachEvent&&e.attachEvent("on"+t,n)},handleErrors:function(){if(typeof e.onerror!="undefined"){var t=this;return e.onerror=function(e,n,r){t.error("["+e+" on line "+r+" of "+n+"]",0)},!0}return!1},appendButtons:function(e,t){return this.buttonReverse?t+e:e+t},build:function(e){var t="",n=e.type,s=e.message,o=e.cssClass||"";t+='<div class="alertify-dialog">',r.buttonFocus==="none"&&(t+='<a href="#" id="alertify-noneFocus" class="alertify-hidden"></a>'),n==="prompt"&&(t+='<form id="alertify-form">'),t+='<article class="alertify-inner">',t+=i.message.replace("{{message}}",s),n==="prompt"&&(t+=i.input),t+=i.buttons.holder,t+="</article>",n==="prompt"&&(t+="</form>"),t+='<a id="alertify-resetFocus" class="alertify-resetFocus" href="#">Reset Focus</a>',t+="</div>";switch(n){case"confirm":t=t.replace("{{buttons}}",this.appendButtons(i.buttons.cancel,i.buttons.ok)),t=t.replace("{{ok}}",this.labels.ok).replace("{{cancel}}",this.labels.cancel);break;case"prompt":t=t.replace("{{buttons}}",this.appendButtons(i.buttons.cancel,i.buttons.submit)),t=t.replace("{{ok}}",this.labels.ok).replace("{{cancel}}",this.labels.cancel);break;case"alert":t=t.replace("{{buttons}}",i.buttons.ok),t=t.replace("{{ok}}",this.labels.ok);break;default:}return v.className="alertify alertify-show alertify-"+n+" "+o,d.className="alertify-cover",t},close:function(e,t){var n=t&&!isNaN(t)?+t:this.delay,r=this,i,s;this.bind(e,"click",function(){i(e)}),s=function(e){e.stopPropagation(),r.unbind(this,r.transition,s),m.removeChild(this),m.hasChildNodes()||(m.className+=" alertify-logs-hidden")},i=function(e){typeof e!="undefined"&&e.parentNode===m&&(typeof r.transition!="undefined"?(r.bind(e,r.transition,s),e.className+=" alertify-log-hide"):(m.removeChild(e),m.hasChildNodes()||(m.className+=" alertify-logs-hidden")))};if(t===0)return;setTimeout(function(){i(e)},n)},dialog:function(e,t,r,i,o){p=n.activeElement;var a=function(){if(v&&v.scrollTop!==null)return;a()};if(typeof e!="string")throw new Error("message must be a string");if(typeof t!="string")throw new Error("type must be a string");if(typeof r!="undefined"&&typeof r!="function")throw new Error("fn must be a function");return typeof this.init=="function"&&(this.init(),a()),u.push({type:t,message:e,callback:r,placeholder:i,cssClass:o}),s||this.setup(),this},extend:function(e){if(typeof e!="string")throw new Error("extend method must have exactly one paramter");return function(t,n){return this.log(t,e,n),this}},hide:function(){var e,t=this;u.splice(0,1),u.length>0?this.setup():(s=!1,e=function(n){n.stopPropagation(),v.className+=" alertify-isHidden",t.unbind(v,t.transition,e)},typeof this.transition!="undefined"?(this.bind(v,this.transition,e),v.className="alertify alertify-hide alertify-hidden"):v.className="alertify alertify-hide alertify-hidden alertify-isHidden",d.className="alertify-cover alertify-cover-hidden",p.focus())},init:function(){n.createElement("nav"),n.createElement("article"),n.createElement("section"),d=n.createElement("div"),d.setAttribute("id","alertify-cover"),d.className="alertify-cover alertify-cover-hidden",n.body.appendChild(d),v=n.createElement("section"),v.setAttribute("id","alertify"),v.className="alertify alertify-hidden",n.body.appendChild(v),m=n.createElement("section"),m.setAttribute("id","alertify-logs"),m.className="alertify-logs alertify-logs-hidden",n.body.appendChild(m),n.body.setAttribute("tabindex","0"),this.transition=b(),delete this.init},log:function(e,t,n){var r=function(){if(m&&m.scrollTop!==null)return;r()};return typeof this.init=="function"&&(this.init(),r()),m.className="alertify-logs",this.notify(e,t,n),this},notify:function(e,t,r){var i=n.createElement("article");i.className="alertify-log"+(typeof t=="string"&&t!==""?" alertify-log-"+t:""),i.innerHTML=e,m.insertBefore(i,m.firstChild),setTimeout(function(){i.className=i.className+" alertify-log-show"},50),this.close(i,r)},set:function(e){var t;if(typeof e!="object"&&e instanceof Array)throw new Error("args must be an object");for(t in e)e.hasOwnProperty(t)&&(this[t]=e[t])},setFocus:function(){y?(y.focus(),y.select()):h.focus()},setup:function(){var e=u[0],n=this,i;s=!0,i=function(e){e.stopPropagation(),n.setFocus(),n.unbind(v,n.transition,i)},typeof this.transition!="undefined"&&this.bind(v,this.transition,i),v.innerHTML=this.build(e),c=a("alertify-resetFocus"),l=a("alertify-ok")||t,f=a("alertify-cancel")||t,h=r.buttonFocus==="cancel"?f:r.buttonFocus==="none"?a("alertify-noneFocus"):l,y=a("alertify-text")||t,g=a("alertify-form")||t,typeof e.placeholder=="string"&&e.placeholder!==""&&(y.value=e.placeholder),this.addListeners(e.callback)},unbind:function(e,t,n){typeof e.removeEventListener=="function"?e.removeEventListener(t,n,!1):e.detachEvent&&e.detachEvent("on"+t,n)}},{alert:function(e,t,n){return r.dialog(e,"alert",t,"",n),this},confirm:function(e,t,n){return r.dialog(e,"confirm",t,"",n),this},extend:r.extend,init:r.init,log:function(e,t,n){return r.log(e,t,n),this},prompt:function(e,t,n,i){return r.dialog(e,"prompt",t,n,i),this},success:function(e,t){return r.log(e,"success",t),this},error:function(e,t){return r.log(e,"error",t),this},set:function(e){r.set(e)},labels:r.labels,debug:r.handleErrors}},typeof define=="function"?define([],function(){return new r}):typeof e.alertify=="undefined"&&(e.alertify=new r)})(this);
alertify.css
.alertify-show, .alertify-log { -webkit-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1); /* older webkit */ -webkit-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275); -moz-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275); -ms-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275); -o-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275); transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275); /* easeOutBack */ } .alertify-hide { -webkit-transition: all 250ms cubic-bezier(0.600, 0, 0.735, 0.045); /* older webkit */ -webkit-transition: all 250ms cubic-bezier(0.600, -0.280, 0.735, 0.045); -moz-transition: all 250ms cubic-bezier(0.600, -0.280, 0.735, 0.045); -ms-transition: all 250ms cubic-bezier(0.600, -0.280, 0.735, 0.045); -o-transition: all 250ms cubic-bezier(0.600, -0.280, 0.735, 0.045); transition: all 250ms cubic-bezier(0.600, -0.280, 0.735, 0.045); /* easeInBack */ } .alertify-log-hide { -webkit-transition: all 500ms cubic-bezier(0.600, 0, 0.735, 0.045); /* older webkit */ -webkit-transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045); -moz-transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045); -ms-transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045); -o-transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045); transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045); /* easeInBack */ } .alertify-cover { position: fixed; z-index: 99999; top: 0; right: 0; bottom: 0; left: 0; } .alertify-cover-hidden { display: none; } .alertify { position: fixed; z-index: 99999; top: 50px; left: 50%; width: 550px; margin-left: -275px; opacity: 1; } .alertify-hidden { -webkit-transform: translate(0,-150px); -moz-transform: translate(0,-150px); -ms-transform: translate(0,-150px); -o-transform: translate(0,-150px); transform: translate(0,-150px); opacity: 0; display: none; } /* overwrite display: none; for everything except IE6-8 */ :root *> .alertify-hidden { display: block; } .alertify-logs { position: fixed; z-index: 5000; bottom: 10px; right: 10px; width: 300px; } .alertify-logs-hidden { display: none; } .alertify-log { display: block; margin-top: 10px; position: relative; right: -300px; opacity: 0; } .alertify-log-show { right: 0; opacity: 1; } .alertify-log-hide { -webkit-transform: translate(300px, 0); -moz-transform: translate(300px, 0); -ms-transform: translate(300px, 0); -o-transform: translate(300px, 0); transform: translate(300px, 0); opacity: 0; } .alertify-dialog { padding: 25px; } .alertify-resetFocus { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .alertify-inner { text-align: center; } .alertify-text { margin-bottom: 15px; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font-size: 100%; } .alertify-buttons { } .alertify-button, .alertify-button:hover, .alertify-button:active, .alertify-button:visited { background: none; text-decoration: none; border: none; /* line-height and font-size for input button */ line-height: 1.5; font-size: 100%; display: inline-block; cursor: pointer; margin-left: 5px; } .alertify-isHidden { visibility: hidden; } @media only screen and (max-width: 680px) { .alertify, .alertify-logs { width: 90%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .alertify { left: 5%; margin: 0; } } /** * Default Look and Feel */ .alertify, .alertify-log { font-family: sans-serif; } .alertify { background: #FFF; border: 10px solid #333; /* browsers that don't support rgba */ border: 10px solid rgba(0,0,0,.7); border-radius: 8px; box-shadow: 0 3px 3px rgba(0,0,0,.3); -webkit-background-clip: padding; /* Safari 4? Chrome 6? */ -moz-background-clip: padding; /* Firefox 3.6 */ background-clip: padding-box; /* Firefox 4, Safari 5, Opera 10, IE 9 */ } .alertify-text { border: 1px solid #CCC; padding: 10px; border-radius: 4px; } .alertify-button { border-radius: 4px; color: #FFF; font-weight: bold; padding: 6px 15px; text-decoration: none; text-shadow: 1px 1px 0 rgba(0,0,0,.5); box-shadow: inset 0 1px 0 0 rgba(255,255,255,.5); background-image: -webkit-linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,0)); background-image: -moz-linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,0)); background-image: -ms-linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,0)); background-image: -o-linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,0)); background-image: linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,0)); } .alertify-button:hover, .alertify-button:focus { outline: none; background-image: -webkit-linear-gradient(top, rgba(0,0,0,.1), rgba(0,0,0,0)); background-image: -moz-linear-gradient(top, rgba(0,0,0,.1), rgba(0,0,0,0)); background-image: -ms-linear-gradient(top, rgba(0,0,0,.1), rgba(0,0,0,0)); background-image: -o-linear-gradient(top, rgba(0,0,0,.1), rgba(0,0,0,0)); background-image: linear-gradient(top, rgba(0,0,0,.1), rgba(0,0,0,0)); } .alertify-button:focus { box-shadow: 0 0 15px #2B72D5; } .alertify-button:active { position: relative; box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05); } .alertify-button-cancel, .alertify-button-cancel:hover, .alertify-button-cancel:focus { background-color: #FE1A00; border: 1px solid #D83526; } .alertify-button-ok, .alertify-button-ok:hover, .alertify-button-ok:focus { background-color: #5CB811; border: 1px solid #3B7808; } .alertify-log { background: #1F1F1F; background: rgba(0,0,0,.9); padding: 15px; border-radius: 4px; color: #FFF; text-shadow: -1px -1px 0 rgba(0,0,0,.5); } .alertify-log-error { background: #FE1A00; background: rgba(254,26,0,.9); } .alertify-log-success { background: #5CB811; background: rgba(92,184,17,.9); }
