纯HTML弹出必填信息(popHint)

【实例简介】

【实例截图】

【核心代码】

    <script language="javascript" type="text/javascript">
<!--
        // 这里都是公用函数，挺多的...
        var 
        // 获取元素
$ = function (element) {
    return (typeof (element) == 'object' ? element : document.getElementById(element));
},

        // 生成元素到refNode
appendElement = function (tagName, Attribute, strHtml, refNode) {
    var cEle = document.createElement(tagName);
    // 属性值
    for (var i in Attribute) {
        cEle.setAttribute(i, Attribute[i]);
    }
    cEle.innerHTML = strHtml;

    refNode.appendChild(cEle);
    return cEle;
},

        // 获取元素坐标
getCoords = function (node) {
    var x = node.offsetLeft;
    var y = node.offsetTop;
    var parent = node.offsetParent;
    while (parent != null) {
        x = parent.offsetLeft;
        y = parent.offsetTop;
        parent = parent.offsetParent;
    }
    return { x: x, y: y };
},

        // 事件操作(可保留原有事件)
eventListeners = [],
findEventListener = function (node, event, handler) {
    var i;
    for (i in eventListeners) {
        if (eventListeners[i].node == node && eventListeners[i].event == event && eventListeners[i].handler == handler) {
            return i;
        }
    }
    return null;
},
myAddEventListener = function (node, event, handler) {
    if (findEventListener(node, event, handler) != null) {
        return;
    }
    if (!node.addEventListener) {
        node.attachEvent('on' event, handler);
    } else {
        node.addEventListener(event, handler, false);
    }
    eventListeners.push({ node: node, event: event, handler: handler });
},
removeEventListenerIndex = function (index) {
    var eventListener = eventListeners[index];
    delete eventListeners[index];
    if (!eventListener.node.removeEventListener) {
        eventListener.node.detachEvent('on' eventListener.event,
  eventListener.handler);
    } else {
        eventListener.node.removeEventListener(eventListener.event,
  eventListener.handler, false);
    }
},
myRemoveEventListener = function (node, event, handler) {
    var index = findEventListener(node, event, handler);
    if (index == null) return;
    removeEventListenerIndex(index);
},
cleanupEventListeners = function () {
    var i;
    for (i = eventListeners.length; i > 0; i--) {
        if (eventListeners[i] != undefined) {
            removeEventListenerIndex(i);
        }
    }
};
-->
    </script>
    <script language="javascript" type="text/javascript">
<!--
        /*********************************************
        - POPHint 弹出提示框
        - By Mudoo 2008.5
        **********************************************/
        function popHint(obj, msg, initValues) {
            var 
 _obj = $(obj),
 _objHint = $("popHint"),
 _msg = msg,
 _init = initValues;

            // 初始化失败...
            if (_obj == undefined || _msg == undefined || _msg == "") return;

            // 设置初始值
            _init = _init == undefined ? { _type: "wrong", _event: "click"} : _init;
            // obj如果不可见。设置弹出对象为obj父元素
            if (_obj.style.display == 'none' || _obj.style.visibility == 'hidden' || _obj.getAttribute('type') == 'hidden') _obj = _obj.parentNode;

            var 
 _type = null,
 _event = null,
 _place = getCoords(_obj),
 _marTop = null,
 _objText = $("popHintText"),

            // 初始化
 init = function () {
     var _hint = _obj.getAttribute("hint");
     if (_hint == "false") return;

     // 有的时候initValues不为空.但是只设置一个值...避免发生错误.再次设置初始值...
     _type = _init._type == undefined ? "wrong" : _init._type;
     _type = _type.toLowerCase();
     _event = _init._event == undefined ? "click" : _init._event;
     _event = _event.toLowerCase();

     /*
     ******************************************
     popHtml
     ******************************************
     <div id="popHint">
     <div id="popHeader">
     <div class="popLeft"></div>
     <div id="popHintText"><span class=\"popIcon wrong></span>请输入您的用户名！</div>
     <div class="popRight"></div>
     </div>
     <div class="popAngle"><span></span></div>
     </div>
     */

     // 好了.输出...
     var _Html = "<div id=\"popHeader\">" 
     " <div class=\"popLeft\"></div>" 
     " <div id=\"popHintText\"></div>" 
     " <div class=\"popRight\"></div>" 
     "</div>" 
     "<div class=\"popAngle\"><span></span></div>"

     if (_objHint == null) {
         _objHint = appendElement("div", { "id": "popHint" }, _Html, document.body);
         _objHint.style.display = "none";
         _objText = $("popHintText");
     }

     show();
 },
            // 显示
 show = function () {
     _objHint.style.display = "";
     _marTop = _objHint.offsetHeight;

     _msg = "<span class=\"popIcon " _type "\"></span>" _msg;
     _objText.innerHTML = _msg;

     _objHint.style.left = _place.x "px";
     _objHint.style.top = (_place.y - _marTop 8) "px";

     // 关闭触发事件
     switch (_event) {
         case "blur":
             //myAddEventListener(_obj, 'blur', hide);
             break;
         //default :  
         case "click":
             //             myAddEventListener(document, 'mousedown', hide);
             myAddEventListener(_objHint, 'mousedown', hide);
             break;
         //这里可以自己扩展很多事件...  
     }
 },
            // 关闭
 hide = function () {
     _objHint.style.display = "none";
     _objText.innerHTML = "";
     // 移除关闭触发事件
     //myRemoveEventListener(_obj, 'blur', hide);
     //myRemoveEventListener(document, 'mousedown', hide);
 };

            init();
        }

-->
    </script>