2014.01.12 笔记 (很好的提示框)

美观并且可以自定义按钮文字，可直接带回调函数的提示框

 

首先是核心JS代码。 这个代码还在理解中。

(function(e, t) {
    "use strict";
    var n = e.document,
    alertifyFun;
    alertifyFun = function() {
        var findDom, i, s, o, u, a, f, l, c, h, p, d, v, m, HtmlObj, showTime, b, isAlt, KeyCodes, BtnTexts, x, T;
        return HtmlObj = {
            buttons: {
                holder: '<nav class="alertify-buttons">{{buttons}}</nav>',
                ok: '<a href="#" class="alertify-button alertify-button-ok" id="aOK">{{ok}}</a>',
                cancel: '<a href="#" class="alertify-button alertify-button-cancel" id="aCancel">{{cancel}}</a>'
            },
            input: '<input type="text" class="alertify-text" id="aText">',
            message: '<p class="alertify-message">{{message}}</p>',
            log: '<article class="alertify-log{{class}}">{{message}}</article>'
        },
        showTime = 5e3,//右下角“点击按钮的结果的弹出框” 的默认显示时间
        KeyCodes = {
            ENTER: 13,
            ESC: 27
        },
        BtnTexts = {
            ok: "OK",
            cancel: "Cancel"
        },
        T = [],//T.push({type: 弹框类型a,message: 提示内容b,callback: 回调函数c})
        isAlt = !1,//记录点击a标签时，是否已经弹出提示框
        findDom = function(e) {
            return n.getElementById(e)
        },
        i = function(i) {
            var o = findDom("aOK") || t,
            u = findDom("aCancel") || t,
            f = findDom("aText") || t,
            l = typeof o != "undefined",
            c = typeof u != "undefined",
            p = "",
            d,
            v,
            m,
            g;
            d = function(e) {
                m(e),
                typeof f != "undefined" && (p = f.value),
                typeof i == "function" && i(!0, p),
                typeof e.preventDefault != "undefined" && e.preventDefault()
            },
            v = function(e) {
                m(e),
                typeof i == "function" && i(!1),
                typeof e.preventDefault != "undefined" && e.preventDefault()
            },
            m = function(e) {
                a(),
                h(n.body, "keyup", g)
            },
            g = function(e) {
                var t = e.keyCode;
                t === KeyCodes.ESC && c && v(e)
            },
            l && s(o, "click", d),
            c && s(u, "click", v),
            s(n.body, "keyup", g),
            e.setTimeout(function() {
                f ? f.focus() : o.focus()
            },
            50)
        },
        s = function(e, t, n) {
            typeof e.addEventListener == "function" ? e.addEventListener(t, n, !1) : e.attachEvent && e.attachEvent("on" + t, n)
        },
        //此处判断生成提示框中的内容
        o = function(e) {
            var t = "",
            n = e.type,
            r = e.message;
            t += '<div class="alertify-dialog">',
            t += '<article class="alertify-inner">',
            t += HtmlObj.message.replace("{{message}}", r),
            n === "prompt" && (t += HtmlObj.input),
            t += HtmlObj.buttons.holder,
            t += "</article>",
            t += "</div>";
            switch (n) {
            case "confirm":
            case "prompt":
                t = t.replace("{{buttons}}", HtmlObj.buttons.ok + HtmlObj.buttons.cancel),
                t = t.replace("{{ok}}", BtnTexts.ok).replace("{{cancel}}", BtnTexts.cancel);
                break;
            case "alert":
                t = t.replace("{{buttons}}", HtmlObj.buttons.ok),
                t = t.replace("{{ok}}", BtnTexts.ok);
                break;
            default:
            }
            return b.className = "alertify alertify-show alertify-" + n,
            m.className = "alertify-cover",
            t
        },
        //此处按时去除“点击按钮的结果的弹出框” 
        u = function() {
            setTimeout(function() {
                var e = x.childNodes[x.childNodes.length - 1];
                typeof e != "undefined" && x.removeChild(e)
            },
            showTime)
        },
        a = function() {
            T.splice(0, 1),
            T.length > 0 ? c() : (isAlt = !1, b.className = "alertify alertify-hide alertify-hidden", m.className = "alertify-cover alertify-hidden")
        },
        //此处...
        f = function() {
            n.createElement("nav"),
            n.createElement("article"),
            n.createElement("section"),

            m = n.createElement("div"),
            m.setAttribute("id", "alertifycover"),
            m.className = "alertify-cover alertify-hidden",
            n.body.appendChild(m),//

            b = n.createElement("section"),
            b.setAttribute("id", "alertify"),
            b.className = "alertify alertify-hidden",
            n.body.appendChild(b),

            x = n.createElement("section"),
            x.setAttribute("id", "alertifylogs"),
            x.className = "alertify-logs",
            n.body.appendChild(x),

            delete this.init
        },
        //此处生成右下角的“点击按钮的结果的弹出框” 中的内容
        l = function(e, t) {
            var r = n.createElement("article");
            r.className = "alertify-log" + (typeof t == "string" && t !== "" ? " alertify-log-" + t: ""),
            r.innerHTML = e,
            x.insertBefore(r, x.firstChild),
            setTimeout(function() {
                r.className = r.className + " alertify-log-show"
            },50),//显示弹出框
            u()//按时去除
        },
        c = function() {
            var e = T[0];
            isAlt = !0,
            b.innerHTML = o(e),//调用方法向提示框中插入要显示内容
            i(e.callback)//点击确定或者取消后的回调方法
        },
        h = function(e, t, n) {
            typeof e.removeEventListener == "function" ? e.removeEventListener(t, n, !1) : e.detachEvent && e.detachEvent("on" + t, n)
        },
        //根据点击 a 标签的类型,来执行相应的方法
        p = function(e, t, n) {
            var r = function() {
                if (b && b.scrollTop !== null) return;//若右下角显示的弹出框数量过多，则不再弹框
                r()
            };
            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 n != "undefined" && typeof n != "function") throw new Error("fn must be a function");
            return typeof this.init == "function" && (this.init(), r()),
            T.push({
                type: t,
                message: e,
                callback: n
            }),
            isAlt || c(),
            this
        },
        d = function(e) {
            return function(t) {
                v(t, e)
            }
        },
        v = function(e, t) {
            var n = function() {
                if (x && x.scrollTop !== null) return;
                n()
            };
            return typeof this.init == "function" && (this.init(), n()),
            l(e, t),
            this
        },
        {
            alert: function(e, t) {
                return p.call(this, e, "alert", t),//e:message; "alert": type;  t:function()
                this
            },
            confirm: function(e, t) {
                return p.call(this, e, "confirm", t),
                this
            },
            extend: d,
            init: f,
            log: function(e, t) {
                return v.call(this, e, t),
                this
            },
            prompt: function(e, t) {
                return p.call(this, e, "prompt", t),
                this
            },
            success: function(e) {
                return v.call(this, e, "success"),
                this
            },
            error: function(e) {
                return v.call(this, e, "error"),
                this
            },
            delay: showTime,
            labels: BtnTexts
        }
    },
    typeof define == "function" ? define([],
    function() {
        return new alertifyFun
    }) : typeof e.alertify == "undefined" && (e.alertify = new alertifyFun)
})(this);

 

 

然后是界面调用：

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>JavaScript消息提示框类库 – Alertify 演示页面 &gt;&gt; 给力技术</title>
    <!--演示页面的CSS样式-->

    <link rel="stylesheet" href="AlertifyPage_files/alertify.core-default.css">
    
    <script>
        // 使低版本浏览器支持html5
        document.createElement("nav");
        document.createElement("header");
        document.createElement("article");
        document.createElement("section");
    </script>
   
</head>
<body style="">
    <div id="header">
        JavaScript消息提示框类库 － Alertify
    </div><p></p><p></p>
    <div class="content">
        <h2><b>JavaScript消息提示框类库 – Alertify  演示页面</b></h2>
        

        <p></p> <p></p>


        <h3><span>自定义按钮文字</span></h3>
        <p>
        <label for="okVal">自定义确定按钮的文字: </label><input type="text" id="okVal" value="确定">&nbsp;&nbsp;&nbsp;&nbsp;
        <label for="cancelVal">自定义取消按钮的文字: </label><input type="text" id="cancelVal" value="取消">
        </p>
        <nav>
            <a class="button-primary" href="javascript:void(0);" id="alert2"  onClick="lAlert2Click('Alertify  演示页面');">Alert Dialog</a>
            <a class="button-primary" href="javascript:void(0);" id="confirm2" onClick="lConfirm2Click('Alertify  演示页面');">Confirm Dialog</a>
            <a class="button-primary" href="javascript:void(0);" id="prompt2" onClick="lPrompt2Click('Alertify  演示页面');">Prompt Dialog</a>
        </nav>
        
        <p></p> <p></p>
        

        <h3><span>自定义提示信息</span></h3>
        <nav>
            <a class="button-primary" href="javascript:void(0);" id="log1" onClick="log1Click();">Notification</a>
            <a class="button-primary" href="javascript:void(0);" id="log2" onClick="log2Click();">Success</a>
            <a class="button-primary" href="javascript:void(0);" id="log3" onClick="log3Click();">Error</a>
            <p></p>

        </nav>
        <p></p> <p></p>

        <script type="text/javascript" src="./AlertifyPage_files/alertify.min.js"></script>  
        <script type="text/javascript">
          
           var ok = document.getElementById("okVal"),//确定按钮的文字
            cancel = document.getElementById("cancelVal");//取消按钮的文字
            
           var setLabel = function (reset) {
                reset = reset || false;
                alertify.labels.ok = (ok.value && !reset) ? ok.value : "OK";
                alertify.labels.cancel = (cancel.value && !reset) ? cancel.value : "Cancel";
            };


            var lAlert2Click = function (message) {
                setLabel();
                alertify.alert(message); return false;
            };

            var lConfirm2Click = function (message) {
                setLabel();
                alertify.confirm(message, function (e) {
                    if (e) {
                        alertify.success("你点击的是 '" + alertify.labels.ok + "'");
                    } else {
                        alertify.error("你点击的是 '" + alertify.labels.cancel + "'");
                    }
                });
                return false;
            };

            var lPrompt2Click= function (message) {
                setLabel();
                alertify.prompt(message, function (e, str) {
                    if (e) {
                        alertify.success("你点击的是  '" + alertify.labels.ok + "' ，输入的文字是: " + str);
                    } else {
                        alertify.error("你点击的是  '" + alertify.labels.cancel + "'");
                    }
                });
                return false;
            };

            var log1Click = function () { alertify.log("正常提示消息."); return false; };
            var log2Click = function () { alertify.success("success 提示消息."); return false; };
            var log3Click = function () { alertify.error("error 提示消息."); return false; };

        </script>
    </div>

</body></html>

 

 

这个是提示框的样式：

@charset "utf-8";
/* CSS Document */

.alertify-show,.alertify-log{-webkit-transition:all 500ms cubic-bezier(0.175,0.885,0.320,1);-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);}.alertify-hide{-webkit-transition:all 250ms cubic-bezier(0.600,0,0.735,0.045);-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);}.alertify-cover{position:fixed;z-index:99999;top:0;right:0;bottom:0;left:0;}.alertify{position:fixed;z-index:99999;top:50px;left:50%;width:550px;margin-left:-275px;}.alertify-hidden{top:-50px;visibility:hidden;}.alertify-logs{position:fixed;z-index:5000;bottom:10px;right:10px;width:300px;}.alertify-log{display:block;margin-top:10px;position:relative;right:-300px;}.alertify-log-show{right:0;}.alertify-dialog{padding:25px;}.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{display:inline-block;cursor:pointer;margin-left:5px;}@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;}}
.alertify,.alertify-log{font-family:sans-serif;}.alertify{background:#FFF;border:10px solid #333;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;-moz-background-clip:padding;background-clip:padding-box;}.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;box-shadow:0 0 15px #2B72D5;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:active{position:relative;top:1px;}.alertify-button-cancel{background-color:#FE1A00;border:1px solid #D83526;}.alertify-button-ok{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);}

 

开始是觉得这个代码写的好复杂，完全可以写的简单些，后来发现，它还处理了一些我没有考虑到的细节地方。

 

在这个JS中，看到了这个方法： p.call(thisObj,arg1,arg2,arg3);  没有用过，不太明白，然后查了一下资料。

通过人家写的方法，让我很快明白了。他是这么写的。

通过简单的示例来说明： 
obj1.method1.call(obj2,argument1,argument2) 
如上，call的作用就是把obj1的方法放到obj2上使用，后面的argument1..这些做为参数传入． 

举一个具体的例子 
function add(a,b) 
{ 
    alert(a+b); 
} 
function sub(a,b) 
{ 
    alert(a-b); 
} 

add.call(sub,3,1); 

这个例子中的意思就是用 add 来替换 sub，add.call(sub,3,1) == add(3,1) ，所以运行结果为：alert(4); // 注意：js 中的函数其实是对象，函数名是对 Function 对象的引用。 


看一个稍微复杂一点的例子 

function Class1() 
{ 
    this.name = "class1"; 

    this.showNam = function() 
    { 
        alert(this.name); 
    } 
} 

function Class2() 
{ 
    this.name = "class2"; 
} 

var c1 = new Class1(); 
var c2 = new Class2(); 

c1.showNam.call(c2); 

注意，call 的意思是把 c1 的方法放到c2上执行，原来c2是没有showNam() 方法，现在是把c1 的showNam()方法放到 c2 上来执行，所以this.name 应该是 class2，执行的结果就是 ：alert（"class2"）; 

怎么样，觉得有意思了吧，可以让a对象来执行b对象的方法，这是java程序员所不敢想的。还有更有趣的，可以用 call 来实现继承 

function Class1() 
{ 
    this.showTxt = function(txt) 
    { 
        alert(txt); 
    } 
} 

function Class2() 
{ 
    Class1.call(this); 
} 

var c2 = new Class2(); 

c2.showTxt("cc"); 

这样 Class2 就继承Class1了，Class1.call(this) 的 意思就是使用 Class1 对象代替this对象，那么 Class2 中不就有Class1 的所有属性和方法了吗，c2 对象就能够直接调用Class1 的方法以及属性了，执行结果就是：alert（“cc”）; 

对的，就是这样，这就是 javaScript 如何来模拟面向对象中的继承的，还可以实现多重继承。 

function Class10() 
{ 
    this.showSub = function(a,b) 
    { 
        alert(a-b); 
    } 
} 

function Class11() 
{ 
    this.showAdd = function(a,b) 
    { 
        alert(a+b); 
    } 
} 


function Class2() 
{ 
    Class10.call(this); 
    Class11.call(this); 
} 

很简单，使用两个 call 就实现多重继承了 
当然，js的继承还有其他方法，例如使用原型链，这个不属于本文的范畴，只是在此说明call 的用法 
说了call ，当然还有 apply，这两个方法基本上是一个意思 
区别在于 call 的第二个参数可以是任意类型，而apply的第二个参数必须是数组