摘要:功能很簡單,就是可以在文本框下面顯示一個氣泡提示,如上圖。只要在文本框啟用,提交時內容為空時就會出現如圖提示。
某日,忽的想寫個js小控件。功能很簡單,就是可以在文本框下面顯示一個氣泡提示,如上圖。圖是Chrome里截來的,是Chrome原生的提示樣式。只要在文本框啟用『required』,提交時內容為空時就會出現如圖提示。
首先第一步,該是要構建一個提示文字的HTML模型,那么彈出提示時就可以被重復構建了(如上圖)。
提示文字..
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——下載地址??
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/77925.html
摘要:功能很簡單,就是可以在文本框下面顯示一個氣泡提示,如上圖。只要在文本框啟用,提交時內容為空時就會出現如圖提示。 showImg(http://segmentfault.com/img/bVbrGa); 某日,忽的想寫個js小控件。功能很簡單,就是可以在文本框下面顯示一個氣泡提示,如上圖。圖是Chrome里截來的,是Chrome原生的提示樣式。只要在文本框啟用『required』,提交...
摘要:功能很簡單,就是可以在文本框下面顯示一個氣泡提示,如上圖。只要在文本框啟用,提交時內容為空時就會出現如圖提示。 showImg(http://segmentfault.com/img/bVbrGa); 某日,忽的想寫個js小控件。功能很簡單,就是可以在文本框下面顯示一個氣泡提示,如上圖。圖是Chrome里截來的,是Chrome原生的提示樣式。只要在文本框啟用『required』,提交...
摘要:自成立之初,一直秉承著開源一切的初心,為了給予廣大開發者們更多的資源及內容。借此,官方將開源項目進行分類和介紹,使開發者們更好的去了解去使用。更多的開源項目均在中。 APICloud自成立之初,一直秉承著開源一切的初心,為了給予廣大開發者們更多的資源及內容。不知不覺,2年時間已過,APICloud的github上已經集合了APICloud模塊、前端框架及文檔、云API SDK、開發工具...
摘要:自成立之初,一直秉承著開源一切的初心,為了給予廣大開發者們更多的資源及內容。借此,官方將開源項目進行分類和介紹,使開發者們更好的去了解去使用。更多的開源項目均在中。 APICloud自成立之初,一直秉承著開源一切的初心,為了給予廣大開發者們更多的資源及內容。不知不覺,2年時間已過,APICloud的github上已經集合了APICloud模塊、前端框架及文檔、云API SDK、開發工具...
閱讀 1185·2023-04-25 17:05
閱讀 3011·2021-11-19 09:40
閱讀 3544·2021-11-18 10:02
閱讀 1740·2021-09-23 11:45
閱讀 3022·2021-08-20 09:36
閱讀 2783·2021-08-13 15:07
閱讀 1133·2019-08-30 15:55
閱讀 2459·2019-08-30 14:11