Un día, de repente quería escribir un widget js. La función es muy simple, es decir, puede mostrar un aviso de burbuja debajo del cuadro de texto, como se muestra arriba. La imagen está tomada de Chrome, es el estilo de solicitud nativo de Chrome. Mientras "requerido" esté habilitado en el cuadro de texto, el mensaje de la figura aparecerá cuando el contenido esté vacío cuando se envíe.
El primer paso es crear un modelo HTML del texto de solicitud, de modo que cuando aparezca la solicitud, se pueda construir repetidamente (como se muestra arriba).
<div class="megbox">
<div class="megbox_top"></div>
<div class="megbox_meg">
<div class="megbox_txt">提示文字..</div>
</div>
</div>
El modelo HTML consta de dos partes, el texto de solicitud y un div que no es nada. Ese div se usa para mostrar el pequeño triángulo sobre el mensaje de solicitud ~ Por lo tanto, también necesitamos algo de CSS para definir el estilo.
.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 necesita llamar dos imágenes de fondo en total:
Debido a que el aviso de burbuja está básicamente suspendido sobre el cuadro de texto, no se contará en el flujo normal, por lo que está separado del flujo normal por la propiedad "posición: absoluta".
Lo siguiente es la parte de Javascript. Como estudié C ++ en la universidad, estoy más interesado en la orientación a objetos, así que desarrollé este control js de una manera orientada a la derecha.
Primero, defina las propiedades y métodos que necesitamos:
Propiedades:
elemento: el elemento del cuadro de texto señalado por la burbuja, llamémoslo el elemento objetivo ~;
mensaje: el contenido del mensaje del mensaje;
id: Tal vez necesitemos desplegar múltiples cuadros de solicitud, por lo que necesitamos un identificador único para separarlos ~;
Método:
Mostrar: muestra consejos de burbujas;
Eliminar: eliminar burbujas;
OK, primero escribe un constructor, esta clase se llama MessageBox ~
MessageBox = function(element, id, message)
{
// Init value
this.message = "";
this.element = undefined;
this.id = "";
this.message = message;
this.element = element;
this.id = id;
};
Lo siguiente es completar dos métodos ~
Mostrar — Primero, debemos resolver dos problemas:
Insertar elementos DOM;
¿Dónde se muestra?
El primer problema es fácil de resolver, verifique W3School y será O ~
El segundo es porque estamos usando posicionamiento absoluto y se muestra cerca del elemento objetivo. Por lo tanto, necesita saber la posición del elemento objetivo. Bueno ... Google está por venir.
Me referí a la función de Daniel: Ruan Yifeng .
Después de una ligera modificación, como sigue:
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;
};
Añádalos a todos como métodos de documentos ~ Esto no parece muy bueno, el enfoque más seguro debería ser un método privado de MessageBox. Pero me gusta ~
Eliminar es eliminar el elemento creado.
El método final se define de la siguiente manera:
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;
}
};
Debido a que el cuadro de aviso se muestra debajo del elemento de destino, el cuadro de aviso está en una posición absoluta
top = node top + node view.height + 5; (como se muestra a continuación)
Se agrega 5px para evitar que el cuadro de aviso se pegue en la parte inferior del cuadro de texto.
De esta forma, el control de aviso de burbuja se completa cuando se llama de la siguiente manera:
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
Finalmente, adjunte la versión mejorada de MessageBox: dirección de descarga ››