1. Infiltration (boîte d'invite)
Fichier de code source:
Info-bulle.js
Info-bulle.scss
Principe de mise en œuvre:
1. Obtenez les informations de positionnement de l'élément à afficher (en haut, à gauche, en bas, à droite, largeur, hauteur, etc.)
2. Calculez la position de l'info-bulle, qui est celle du haut, de la gauche, du bas et de la droite.
3. Calculez ensuite la valeur des coordonnées en fonction de la valeur de position calculée
4. Appliquer des valeurs de coordonnées à l'info-bulle
Analyse du code source:
1. Propriétaire de propriétaire: document; Contient deux objets: <doctype>, documentElement (nœud racine)
2. $ .CONTAINS (DOMA, Domb): Déterminez si Doma contient des éléments Domb
3. La méthode OFFSET.SetOffset est appliquée et le paramètre d'utilisation est passé, car lorsque le décalage est défini, il ne peut pas être arrondi.
4. $ fenêtre: Afficher l'élément de conteneur de ToolTipr
5. GetPosition: Cette fonction obtient des informations liées aux coordonnées de positionnement des éléments, telles que: haut, gauche, bas, droit, largeur, hauteur, défilement, etc.
5.1. La méthode GetBoundingClientRect est utilisée, mais cette méthode peut brancher la largeur et la hauteur dans IE8.
5.2. S'il s'agit d'un corps, la largeur et la hauteur seront réinitialisées à la fenêtre
5.3. Le code source est le suivant:
$ element = $ élément || Cet élément. $ // Si aucun paramètre n'est passé, alors $ element (l'élément qui déclenche l'événement d'infiltration) est le var el = $ élément par défaut [0] var isBody = el.tagname == 'body' var elrect = el.getBoundingClientRect () if (elrect.width == null) {// largeur et hauteur sont manquants dans ie8, donc les compauses; Voir https://github.com/twbs/bootstrap/issues/14093 elrect = $ .Extend ({}, elrect, {width: elrect.right - elrect.left, height: elrect.bottom - elrect.top})} var eloffset = isbody? {TOP: 0, gauche: 0}: $ element.offset () var scroll = {Scroll: est lebody? document.DocumentElement.ScrollTop || document.body.scrolltop: $ element.scrolltop ()} var exterdims = est lebody? {width: $ (window) .width (), height: $ (window) .height ()}: nullreturn $ .extend ({}, elrect, scroll, outerdims, eloffset)6. GetCalculedOffset: calcule la valeur de coordonnée de l'influence, en utilisant le principe de pliage de largeur et de hauteur pour l'implémenter
6.1. Temps inférieur
6.1.1. Le haut est la hauteur du haut + de l'élément de positionnement (POS)
6.1.2. La gauche est la largeur de l'élément de positionnement (POS) / 2 Élément d'infultification Largeur / 2
6.2. Quand le haut
6.2.1. Le haut est la hauteur de l'élément toolttip qui localise l'élément (POS).
6.2.2. La gauche est la largeur de l'élément de positionnement (POS) / 2 Élément d'infultification Largeur / 2
6.3. Lorsqu'il est laissé
6.3.1. Le haut est l'élément de positionnement supérieur (POS) Hauteur / 2 Élément d'info-bulle Hauteur / 2
6.3.2. La gauche est la largeur de l'élément d'info-bulle gauche qui localise l'élément (POS).
6.4. Droite
6.4.1. Le haut est l'élément de positionnement supérieur (POS) Hauteur / 2 Élément d'info-bulle Hauteur / 2
6.4.2. À gauche est la largeur de l'élément de positionnement (pos)
6.5. La position du petit triangle est généralement de 50% de l'élément. Cependant, si l'info-bulle est cachée par gauche, haut, droite et inférieur, il doit être recalculé et ajusté. Le nom de la méthode est: getviewportadjusteddelta
6.5.1. Calculez d'abord la largeur ou la hauteur du débordement
6.5.2. Calculez ensuite la valeur de Arrowdelta, masquez la valeur * 2 Largeur de l'infiltration + largeur d'influence
6.5.3. Définissez la valeur du pourcentage supérieur ou gauche du triangle
2. Popover (Popup Box)
Fichier de code source:
Popover.js
Popover.scss
Principe de mise en œuvre:
1. Hériter de l'implémentation de l'info-bulle
2. Avec un titre supplémentaire, vous pouvez également personnaliser le contenu (les contrôles interactifs tels que l'entrée et le bouton peuvent être insérés)
Si vous souhaitez toujours étudier en profondeur, vous pouvez cliquer ici pour étudier et vous attacher 3 sujets passionnants:
Tutoriel d'apprentissage bootstrap
Tutoriel pratique de bootstrap
Tutoriel d'utilisation du plug-in bootstrap
Ce qui précède concerne cet article, j'espère qu'il sera utile pour tout le monde d'apprendre la programmation JavaScript.