一個氣泡提示的Javascript控件

某日，忽的想寫個js小控件。功能很簡單，就是能夠在文本框下面顯示一個氣泡提示，如上圖。圖是Chrome裏截來的，是Chrome原生的提示樣式。只要在文本框啓用『required』，提交時內容爲空時就會出現如圖提示。

首先第一步，該是要構建一個提示文字的HTML模型，那麼彈出提示時就能夠被重複構建了（如上圖）。

<div class="megbox">
    <div class="megbox_top"></div>
    <div class="megbox_meg">
        <div class="megbox_txt">提示文字..</div>
    </div>
</div>

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一共須要調用到兩張背景圖：　

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

接下來就是Javascript的部分了。由於本人大學學的是C++，因此對面向對象比較鍾情，因此就用面向對的方法來開發這個js控件。

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

屬性：

element：氣泡指向的文本框元素，姑且稱之爲目標元素吧~；

message：消息提示的內容；

id：說不定咱們須要彈出好多個提示框，因此咱們須要一個惟一標識來區隔它們~；

方法：

Show：顯示氣泡提示；

Remove：移除氣泡；

OK，首先寫個構造函數，這個類就叫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了~

第二個，由於咱們是用絕對定位，並且是要顯示在目標元素附近。所以就須要知道目標元素的位置。這個嘛…就要Google一下了。

我參照了這位大牛的函數——阮一峯。

略作修改後，以下：

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方法加進入了~這樣彷佛不太好，最安全的作法應該是做爲MessageBox的私有方法。不過我的喜歡啦~

Remove的話就是把建立的元素刪除而已~

最後方法定義以下：

MessageBox.prototype = {

    constructor : MessageBox, // 聲明構造函數

    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;
    }   
};

由於提示框顯示在目標元素下方，所以提示框絕對定位的

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

加上5px是爲了不提示框貼在文本框底部。

如此，氣泡提示控件就完成了，調用時以下：

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

最後，附上加強版MessageBox——下載地址››