1. ToolTip (cuadro de inmediato)
Archivo del código fuente:
Tooltip.js
Tooltip.scss
Principio de implementación:
1. Obtenga la información de posicionamiento del elemento a mostrar (arriba, izquierda, abajo, derecha, ancho, altura, etc.)
2. Calcule la posición de la información sobre herramientas, que es uno de la parte superior, izquierda, inferior y derecha.
3. Luego calcule el valor de coordenada en función del valor de posición calculado
4. Aplicar valores de coordenadas a la información sobre herramientas
Análisis del código fuente:
1. Propietario Documento: documento; Contiene dos objetos: <COCTYPE>, DocumentElement (nodo raíz)
2. $. .Contains (DOMA, DOMB): Determine si DOMA contiene elementos DOMB
3. El método offset.setOffSet se aplica y se pasa el parámetro usando, porque cuando se establece el desplazamiento, no se puede redondear.
4. $ Viewport: Muestre el elemento contenedor de ToolTipr
5. Getpose: esta función obtiene información relacionada con las coordenadas de posicionamiento de elementos, como: arriba, izquierda, abajo, derecha, ancho, altura, desplazamiento, etc.
5.1. Se utiliza el método GetBoundingClientRect, pero este método puede enchufar el ancho y la altura en IE8.
5.2. Si es un cuerpo, el ancho y la altura se restablecerán a la ventana
5.3. El código fuente es el siguiente:
$ elemento = $ elemento || este. $ elemento // Si no se pasan parámetros, entonces $ elemento (el elemento que desencadena el evento de información de herramientas) es la var El = $ elemento [0] var isBody = el.tagname == 'Body' var Elrect = el.getBoundingClientRect () if (elrect.width == null) {// width y la altura faltan en ie8, lo que computa manualmente; Consulte https://github.com/twbs/bootstrap/issues/14093 Elrect = $ .extend ({}, Elrect, {width: elrect.right - elrect.left, height: elrect.bottom - elrect.top})} var eloffset = ¿es todo el mundo? {top: 0, izquierda: 0}: $ element.offset () var scroll = {scroll: isBody? document.documentelement.scrolltop || document.body.scrolltop: $ element.scrolltop ()} var ourdims = isBody? {ancho: $ (ventana) .width (), altura: $ (ventana) .Height ()}: nullreturn $ .extend ({}, elrect, desplazamiento, exterdims, elffset)6. GetCalCaluleFoftset: calcula el valor de coordenadas de la información sobre herramientas, utilizando el principio de plegamiento de ancho y altura para implementarlo
6.1. Tiempo de fondo
6.1.1. La parte superior es la parte superior + altura del elemento de posicionamiento (POS)
6.1.2. La izquierda es el ancho del elemento de posicionamiento (POS) /2 El elemento de información sobre herramientas ancho /2
6.2. Cuando la parte superior
6.2.1. La parte superior es la altura del elemento de tool superior que localiza el elemento (POS).
6.2.2. La izquierda es el ancho del elemento de posicionamiento (POS) /2 El elemento de información sobre herramientas ancho /2
6.3. Cuando se queda
6.3.1. La parte superior es el elemento de posicionamiento superior (POS) Altura/2 Altura del elemento de información sobre herramientas/2
6.3.2. La izquierda es el ancho del elemento de información sobre herramientas izquierda que localiza el elemento (POS).
6.4. Bien
6.4.1. La parte superior es el elemento de posicionamiento superior (POS) Altura/2 Altura del elemento de información sobre herramientas/2
6.4.2. La izquierda es el ancho del elemento de posicionamiento (POS)
6.5. La posición del pequeño triángulo es generalmente el 50% del elemento. Sin embargo, si la información sobre herramientas está oculta por izquierda, superior, derecha e inferior, debe recalcularse y ajustarse. El nombre del método es: getViewPortadJustedDelta
6.5.1. Primero calcule el ancho o la altura del desbordamiento
6.5.2. Luego calcule el valor de ArrowDelta, oculte el valor * 2 Ancho de información sobre herramientas + Ancho de información sobre herramientas
6.5.3. Establezca el valor del porcentaje superior o izquierdo del triángulo
2. Popover (caja emergente)
Archivo del código fuente:
Popover.js
Popover.scss
Principio de implementación:
1. Heredar la implementación de información sobre herramientas
2. Con un título adicional, también puede personalizar el contenido (se pueden insertar controles interactivos como la entrada y el botón)
Si aún desea estudiar en profundidad, puede hacer clic aquí para estudiar y adjuntar 3 temas emocionantes a usted:
Tutorial de aprendizaje de bootstrap
Tutorial práctico de bootstrap
Tutorial de uso de complemento de bootstrap
Lo anterior se trata de este artículo, espero que sea útil para todos aprender la programación de JavaScript.