1. Tooltip (caixa de prompt)
Arquivo de código -fonte:
Tooltip.js
Tooltip.scss
Princípio de implementação:
1. Obtenha as informações de posicionamento do elemento a serem exibidas (superior, esquerda, inferior, direita, largura, altura, etc.)
2. Calcule a posição da dica de ferramenta, que é de cima, esquerda, inferior e direita.
3. Em seguida, calcule o valor da coordenada com base no valor calculado da posição
4. Aplique valores de coordenadas na dica de ferramenta
Análise de código -fonte:
1. Proprietário Document: Document; Contém dois objetos: <doctype>, DocumentElement (nó raiz)
2.
3. O método offset.SetOffset é aplicado e o parâmetro usando é passado, porque quando o deslocamento é definido, ele não pode ser arredondado.
4. $ Viewport: Exiba o elemento de contêiner do ToolTipr
5. GetPosition: Esta função obtém informações relacionadas às coordenadas de posicionamento do elemento, como: topo, esquerda, inferior, direita, largura, altura, rolagem, etc.
5.1. O método GetBoundingClientRect é usado, mas esse método pode conectar a largura e a altura no IE8.
5.2. Se for um corpo, a largura e a altura serão redefinidas para a janela
5.3. O código -fonte é o seguinte:
$ element = $ element || Este. Consulte https://github.com/twbs/bootstrap/issues/14093 elrect = $ .extend ({}, elrect, {width: elrect.right - elRect.left, altura: elrect.bottom - elrect.top})} var elsset = isbody? {top: 0, esquerda: 0}: $ element.offset () var scroll = {scroll: isbody? document.documentElement.scrolltop || Document.Body.Scrolltop: $ element.Scrolltop ()} var OuterDims = Isbody? {Width: $ (Window) .Width (), altura: $ (janela) .Height ()}: Nullreng $ .Extend ({}, elrect, rolagem, shotos, eloffset)0
6.1. Hora inferior
6.1.1. Top é a parte superior + altura do elemento de posicionamento (POS)
6.1.2. Esquerda é a largura do elemento de posicionamento (pos) /2 elemento da dica de ferramenta largura /2
6.2. Quando o topo
6.2.1. O topo é a altura do elemento top-tooltip que localiza o elemento (POS).
6.2.2. Esquerda é a largura do elemento de posicionamento (pos) /2 elemento da dica de ferramenta largura /2
6.3. Quando saiu
6.3.1. Top é o elemento de posicionamento superior (POS) Hight/2 ToolTip element Hight/2
6.3.2. A esquerda é a largura do elemento da dica de ferramenta esquerda que localiza o elemento (POS).
6.4. Certo
6.4.1. Top é o elemento de posicionamento superior (POS) Hight/2 ToolTip element Hight/2
6.4.2. Esquerda é a largura do elemento de posicionamento (POS)
6.5. A posição do pequeno triângulo é geralmente 50% do elemento. No entanto, se a dica de ferramenta estiver oculta por esquerda, superior, direita e inferior, ela precisará ser recalculada e ajustada. O nome do método é: getViewPortAjustedDelta
6.5.1. Primeiro calcule a largura ou a altura do transbordamento
6.5.2. Em seguida, calcule o valor de Arrowdelta, oculte o valor * 2 largura da dica de ferramenta + largura da dica de ferramenta
6.5.3. Defina o valor da porcentagem superior ou esquerda do triângulo
2. Popover (caixa pop -up)
Arquivo de código -fonte:
Popover.js
Popover.scss
Princípio de implementação:
1. Herite a implementação da dip da ferramenta
2. Com um título adicional, você também pode personalizar o conteúdo (controles interativos, como entrada e botão, podem ser inseridos nele)
Se você ainda deseja estudar em profundidade, pode clicar aqui para estudar e anexar 3 tópicos interessantes a você:
Tutorial de aprendizado de bootstrap
Tutorial prático de bootstrap
Tutorial de uso de plug-in bootstrap
O exposto acima é tudo sobre este artigo, espero que seja útil para todos aprenderem a programação de JavaScript.