摘要:功能很簡(jiǎn)單,就是可以在文本框下面顯示一個(gè)氣泡提示,如上圖。只要在文本框啟用,提交時(shí)內(nèi)容為空時(shí)就會(huì)出現(xiàn)如圖提示。
某日,忽的想寫個(gè)js小控件。功能很簡(jiǎn)單,就是可以在文本框下面顯示一個(gè)氣泡提示,如上圖。圖是Chrome里截來的,是Chrome原生的提示樣式。只要在文本框啟用『required』,提交時(shí)內(nèi)容為空時(shí)就會(huì)出現(xiàn)如圖提示。
首先第一步,該是要構(gòu)建一個(gè)提示文字的HTML模型,那么彈出提示時(shí)就可以被重復(fù)構(gòu)建了(如上圖)。
提示文字..
HTML模型包含兩個(gè)部分,提示文字和一個(gè)啥也沒有是div,那個(gè)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{}/* 暫且保留,說不定以后加點(diǎn)什么樣式~~ */
CSS一共需要調(diào)用到兩張背景圖:
因?yàn)闅馀萏崾净旧鲜菓腋≡谖谋究蛏戏降模圆粫?huì)被計(jì)入正常流中,因此通過「position: absolute」屬性使其脫離正常流。
接下來就是Javascript的部分了。因?yàn)楸救舜髮W(xué)學(xué)的是C++,所以對(duì)面向?qū)ο蟊容^鐘情,所以就用面向?qū)Φ姆椒▉黹_發(fā)這個(gè)js控件。
首先,定義一下我們需要那些屬性和方法:
屬性:
element:氣泡指向的文本框元素,姑且稱之為目標(biāo)元素吧~;
message:消息提示的內(nèi)容;
id:說不定我們需要彈出好多個(gè)提示框,所以我們需要一個(gè)唯一標(biāo)識(shí)來區(qū)隔它們~;
方法:
Show:顯示氣泡提示;
Remove:移除氣泡;
OK,首先寫個(gè)構(gòu)造函數(shù),這個(gè)類就叫MessageBox吧~
MessageBox = function(element, id, message) { // Init value this.message = ""; this.element = undefined; this.id = ""; this.message = message; this.element = element; this.id = id; };
接著就是完成兩個(gè)方法了~
Show——首先要解決兩個(gè)問題:
插入DOM元素;
顯示在哪兒?
第一個(gè)問題好解決,查一查W3School就O了~
第二個(gè),因?yàn)槲覀兪怯媒^對(duì)定位,而且是要顯示在目標(biāo)元素附近。因此就需要知道目標(biāo)元素的位置。這個(gè)嘛…就要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的私有方法。不過個(gè)人喜歡啦~
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; } };
因?yàn)樘崾究蝻@示在目標(biāo)元素下方,因此提示框絕對(duì)定位的
top = nodetop + nodeview.height + 5 ;(如下圖)
加上5px是為了避免提示框貼在文本框底部。
如此,氣泡提示控件就完成了,調(diào)用時(shí)如下:
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——下載地址??
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/49455.html
摘要:功能很簡(jiǎn)單,就是可以在文本框下面顯示一個(gè)氣泡提示,如上圖。只要在文本框啟用,提交時(shí)內(nèi)容為空時(shí)就會(huì)出現(xiàn)如圖提示。 showImg(http://segmentfault.com/img/bVbrGa); 某日,忽的想寫個(gè)js小控件。功能很簡(jiǎn)單,就是可以在文本框下面顯示一個(gè)氣泡提示,如上圖。圖是Chrome里截來的,是Chrome原生的提示樣式。只要在文本框啟用『required』,提交...
摘要:功能很簡(jiǎn)單,就是可以在文本框下面顯示一個(gè)氣泡提示,如上圖。只要在文本框啟用,提交時(shí)內(nèi)容為空時(shí)就會(huì)出現(xiàn)如圖提示。 showImg(http://segmentfault.com/img/bVbrGa); 某日,忽的想寫個(gè)js小控件。功能很簡(jiǎn)單,就是可以在文本框下面顯示一個(gè)氣泡提示,如上圖。圖是Chrome里截來的,是Chrome原生的提示樣式。只要在文本框啟用『required』,提交...
摘要:自成立之初,一直秉承著開源一切的初心,為了給予廣大開發(fā)者們更多的資源及內(nèi)容。借此,官方將開源項(xiàng)目進(jìn)行分類和介紹,使開發(fā)者們更好的去了解去使用。更多的開源項(xiàng)目均在中。 APICloud自成立之初,一直秉承著開源一切的初心,為了給予廣大開發(fā)者們更多的資源及內(nèi)容。不知不覺,2年時(shí)間已過,APICloud的github上已經(jīng)集合了APICloud模塊、前端框架及文檔、云API SDK、開發(fā)工具...
摘要:自成立之初,一直秉承著開源一切的初心,為了給予廣大開發(fā)者們更多的資源及內(nèi)容。借此,官方將開源項(xiàng)目進(jìn)行分類和介紹,使開發(fā)者們更好的去了解去使用。更多的開源項(xiàng)目均在中。 APICloud自成立之初,一直秉承著開源一切的初心,為了給予廣大開發(fā)者們更多的資源及內(nèi)容。不知不覺,2年時(shí)間已過,APICloud的github上已經(jīng)集合了APICloud模塊、前端框架及文檔、云API SDK、開發(fā)工具...
閱讀 3864·2021-09-23 11:51
閱讀 3057·2021-09-22 15:59
閱讀 856·2021-09-09 11:37
閱讀 2063·2021-09-08 09:45
閱讀 1260·2019-08-30 15:54
閱讀 2056·2019-08-30 15:53
閱讀 485·2019-08-29 12:12
閱讀 3283·2019-08-29 11:15