摘要：功能很簡單，就是可以在文本框下面顯示一個氣泡提示，如上圖。只要在文本框啟用，提交時內(nèi)容為空時就會出現(xiàn)如圖提示。

某日，忽的想寫個js小控件。功能很簡單，就是可以在文本框下面顯示一個氣泡提示，如上圖。圖是Chrome里截來的，是Chrome原生的提示樣式。只要在文本框啟用『required』，提交時內(nèi)容為空時就會出現(xiàn)如圖提示。

首先第一步，該是要構(gòu)建一個提示文字的HTML模型，那么彈出提示時就可以被重復(fù)構(gòu)建了（如上圖）。

    

    

        
提示文字..
    

HTML模型包含兩個部分，提示文字和一個啥也沒有是div，那個div就是用來顯示提示消息上方的小三角的~因此，我們還需要一些CSS來定義賦予樣式。

.megbox{
    position: absolute;
    background-color: #FFF;
    border: 1px solid #a4acb5;
    padding: 5px 10px;
    border-radius: 5px;
    z-index: 100;
}
.megbox_top{
    width: 13px;
    height: 7px;
    position: absolute;
    background: url(./images/up.gif) no-repeat;
    top: -7px;
}
.megbox_meg{
    padding-left: 25px;
    background: url(./images/warning.gif) no-repeat;
    line-height: 20px;
}
.megbox_txt{}/* 暫且保留，說不定以后加點什么樣式~~ */

CSS一共需要調(diào)用到兩張背景圖：　

因為氣泡提示基本上是懸浮在文本框上方的，所以不會被計入正常流中，因此通過「position: absolute」屬性使其脫離正常流。

接下來就是Javascript的部分了。因為本人大學(xué)學(xué)的是C++，所以對面向?qū)ο蟊容^鐘情，所以就用面向?qū)Φ姆椒▉黹_發(fā)這個js控件。

首先，定義一下我們需要那些屬性和方法：

屬性：

element：氣泡指向的文本框元素，姑且稱之為目標(biāo)元素吧~；

message：消息提示的內(nèi)容；

id：說不定我們需要彈出好多個提示框，所以我們需要一個唯一標(biāo)識來區(qū)隔它們~；

方法：

Show：顯示氣泡提示；

Remove：移除氣泡；

OK，首先寫個構(gòu)造函數(shù)，這個類就叫MessageBox吧~

MessageBox = function(element, id, message)
{
    // Init value
    this.message = "";
    this.element = undefined;   
    this.id = "";

    this.message = message;
    this.element = element;
    this.id = id;
};

接著就是完成兩個方法了~

Show——首先要解決兩個問題：

插入DOM元素；

顯示在哪兒？

第一個問題好解決，查一查W3School就O了~

第二個，因為我們是用絕對定位，而且是要顯示在目標(biāo)元素附近。因此就需要知道目標(biāo)元素的位置。這個嘛…就要Google一下了。

我參照了這位大牛的函數(shù)——阮一峰。

略做修改后，如下：

document.getElementView = function (element)
{
    if(element != document)
        return {
            width: element.offsetWidth,
            height: element.offsetHeight
        }
    if (document.compatMode == "BackCompat"){
        return {
            width: document.body.clientWidth,
            height: document.body.clientHeight
        }
    } else {
        return {
            width: document.documentElement.clientWidth,
            height: document.documentElement.clientHeight
        }
    }
};

document.getElementLeft = function (element)
{
    var actualLeft = element.offsetLeft;
    var current = element.offsetParent;
    while (current !== null){
        actualLeft += current.offsetLeft;
        current = current.offsetParent;
    }
    return actualLeft;
};

document.getElementTop = function (element)
{
    var actualTop = element.offsetTop;
    var current = element.offsetParent;
    while (current !== null){
        actualTop += current.offsetTop;
        current = current.offsetParent;
    }
    return actualTop;
};

把他們都作為document方法加進(jìn)入了~這樣似乎不太好，最安全的做法應(yīng)該是作為MessageBox的私有方法。不過個人喜歡啦~

Remove的話就是把創(chuàng)建的元素刪除而已~

最后方法定義如下：

MessageBox.prototype = {

    constructor : MessageBox, // 聲明構(gòu)造函數(shù)

    Show : function()
    {
        if(!this.element) return false;
        if(this.element.box)
            this.element.box.Remove(true);
        var megbox = document.createElement("div");
        megbox.className = "megbox";
        megbox.id = "megbox_" + this.id;    //把id加上前綴，作為氣泡的id
        var megbox_top = document.createElement("div");
        megbox_top.className = "megbox_top";
        var megbox_meg = document.createElement("div");
        megbox_meg.className = "megbox_meg";
        var megbox_txt = document.createElement("div");
        megbox_txt.className = "megbox_txt";
        var megs=document.createTextNode(this.message);

        megbox.appendChild(megbox_top);
        megbox.appendChild(megbox_meg);
        megbox_meg.appendChild(megbox_txt);
        megbox_txt.appendChild(megs);
        this.element.box = this;

        document.getElementsByTagName("body")[0].appendChild(megbox);

        var node_view = document.getElementView(this.element);
        var node_top = document.getElementTop(this.element);
        var node_left = document.getElementLeft(this.element);

        megbox.style.top = (node_top + node_view.height + 5) + "px";
        megbox.style.left = node_left + "px";

        return true;
    },

    Remove : function()
    {
        var id = this.id;
        var node = document.getElementById("megbox_" + id);
        if(node)
        {
            node.parentNode.removeChild(node);
            return true;
        }
        return false;
    }   
};

因為提示框顯示在目標(biāo)元素下方，因此提示框絕對定位的

top = nodetop + nodeview.height + 5 ;（如下圖）

加上5px是為了避免提示框貼在文本框底部。

如此，氣泡提示控件就完成了，調(diào)用時如下：

var test = document.getElementById("test");
var Box = new MessageBox(test, 1, "Test Message.."); 
Box.Show(); // Show the MessageBox

// -----------------------------------

if(Box instanceof MessageBox) Box.Remove(); // Remove MessageBox

最后，附上增強(qiáng)版MessageBox——下載地址??