A2D JS框架

写了个微型JS框架

主要实现了：showDialog、noConflict、定位元素、event绑定功能

使用端的代码：

<head>
    <title></title>
    <script src="A2D.js" type="text/javascript"></script>
    <link href="A2D.css" rel="stylesheet" type="text/css" />
    <script language="A2D" type="text/A2DTemplate" id="showDialog">     //搞了个html模版
        <div class="tooltip">{msg}</div>
    </script>
</head>
<body>
    <button id="a111">Test2</button>

    <script language="javascript" type="text/javascript">
        var newName=$.noConflict();
        newName.say();
        newName.bind(newName("a111"), "click", function () {
                                                               newName.showDialog('raised by test2 button.' + new Date()); 
                                                           });
    </script>
</body>

 

A2D.js代码

(function (wd, doc) {
    function noConflict() {
        wd.$ = _$;
        wd.A2D = A2D;
        return A2D;
    }
    function saySomeWord() {
        showDialog("My name is Aaron");
    }
    function showDialog(msg) {
        var template = findA2DTemplate("showDialog");

        template = A2D.helper.replace(template, "{msg}", msg);

        var div = document.createElement("div");
        div.innerHTML = template;

        var first = doc.body.firstChild;
        doc.body.insertBefore(div, first);
    }
    function findA2DTemplate(templateId) {
        return A2D(templateId).innerHTML;
    }

    function bind(element, evtName, evtHandler) {
        if (doc.addEventListener)
            element.addEventListener(evtName, evtHandler, false);
        else
            element.attachEvent("on" + evtName, evtHandler);
    }


    var A2D = function (id) {
        return doc.getElementById(id);
    }
    A2D.noConflict = noConflict;
    A2D.say = saySomeWord;
    A2D.showDialog = showDialog;
    A2D.bind = bind;

    A2D.helper = {};
    A2D.helper.replace = function (src, search, tobe) {
        while (src.indexOf(search) >= 0) {
            src = src.replace(search, tobe);
        }
        return src;
    }

    var _$ = wd.$;
    wd.$ = A2D;
}
)(window, document);

 

A2D.css代码

.tooltip
{
    padding: 10px;
    font-size: large;
    font-style: normal;
    color: #008000;
    background-color: #CCCCFF;
    border-bottom-style: dotted;
    border-right-style: dotted;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-right-color: #C0C0C0;
    border-bottom-color: #C0C0C0;
}

 

效果图：

给我的感觉是前端东西比较新颖，要很努力才能真正精通。

 

 

posted @ 2013-08-02 16:03  McKay  阅读(1367)  评论(0)  编辑  收藏  举报