Le plug-in Scroll Monitoring (ScrollSpy), c'est-à-dire la mise à jour automatique du plug-in de navigation, mettra automatiquement à jour la cible de navigation correspondante en fonction de la position de la barre de défilement. Son implémentation de base est d'ajouter une classe. Activer à la barre de navigation en fonction de la position de la barre de défilement lorsque vous faites défiler.
Si vous souhaitez référencer la fonctionnalité du plugin séparément, vous devez référencer ScrollSpy.js. Ou, comme mentionné dans le chapitre Bootstrap Plugin Présentation, vous pouvez vous référer à bootstrap.js ou versions compressées de bootstrap.min.js.
1. Utilisation
Vous pouvez ajouter un comportement d'écoute de défilement à la navigation supérieure:
1. Grâce à l'attribut de données: ajoutez des données-pypy = "Scroll" à l'élément que vous souhaitez écouter (généralement le corps). Ajoutez ensuite le cible de données d'attribut avec l'ID de l'élément parent du composant Bootstrap .nav ou la propriété de la classe. Pour que cela fonctionne correctement, vous devez vous assurer qu'il y a des éléments dans le corps de la page qui correspondent à l'ID du lien que vous souhaitez écouter.
<Body Data-Spy = "Scroll" Data-Target = ". Navbar-Example"> ... <div> <ul> ... </ul> </div> ... </body>
2. Via JavaScript: vous pouvez appeler la surveillance du défilement via JavaScript, sélectionnez l'élément à écouter, puis appelez la fonction .scrollSpy ():
$ ('body'). ScrollSpy ({Target: '.navbar-Example'})
2. Suivi de défilement
Le plug-in à écouter Scroll est utilisé pour mettre à jour automatiquement les éléments de navigation en fonction de la position où se trouve la barre de défilement et des éléments de navigation affichés en surbrillance.
// Exemple de base <NAV ID = "NAV"> <a href = "#"> Développement Web </a> <ul> <li> <a href = "# html5"> html5 </a> </li> <li> <a href = "# bootstrap"> bootstrap </a> </li> <li> <a href = "# # #" Data-Toggle = "> JEV> <span> </ span> </a> <ul> <li> <a href = "# jQuery"> jQuery </a> </li> <li> <a href = "# yui"> yui </a> </li> <li> <a href = "# extjs"> extjs </a> </li> </li> </li> </li> </li> </li> </li> </li> Data-Offset = "0" Data-Target = "# NAV" Data-Spy = "Scroll" Style = "Height: 200px; Overflow: Auto; Position: relative; padding: 0 10px;"> <h4 id = "html5"> html5 </h4> <p> Une application HTML dans le sous-sol de la sous-tension standard après HTML4.01 a été publiée dans décembre 1999. HTML5 et d'autres normes ont été laissées pour compte. Afin de promouvoir le développement du mouvement de standardisation Web, certaines sociétés ont uni leurs forces pour établir un groupe de travail sur la technologie des applications HyperText (Organisation Web du groupe de travail sur la technologie des applications HyperText-Whatwg. Whatwg est dédié aux formulaires et applications Web, tandis que W3C (World Wide Web Consortium) se concentre sur XHTML2.0. En 2006, les deux côtés ont décidé de coopérer pour créer une nouvelle version de HTMl. ID = Bootstrap "> Bootstrap </h4> <p> Bootstrap, de Twitter, est actuellement un framework frontal très populaire. Les spécifications Elegant HTML et CSS, écrites dans le langage Dynamic CSS. [3] </p> <h4 id = "jQuery"> jQuery </h4> <p> jQuery est une autre bibliothèque JavaScript après le prototype. Le navigateur IE6 / 7/8 est plus en charge. À partir du contenu HTML. Les champignons après une pluie, et il est écrasant. <h4 id = "extjs"> extjs </h4> <p> Les extjs peuvent être utilisés pour développer RIA, c'est-à-dire les applications ajax de clients riches. etc. Extjs était à l'origine basée sur la technologie YUI et a été développé par le développeur JacksLocum.
Il y a deux attributs importants, comme le montre la figure ci-dessous:
PS: Dans un menu et une période facile, le cible des données peut également être stable pour réaliser la mise en évidence de surveillance de défilement sans réglage. Mais lorsque vous n'associez pas l'un d'eux lors de plusieurs navigations, cela entraînera une erreur, il faut donc généralement ajouter.
Si vous utilisez la méthode de script JavaScript, vous pouvez supprimer les données - * et utiliser les définitions d'attribut de script: offset, espion et cible. Les méthodes spécifiques sont les suivantes:
// définir la propriété $ ('# contenu'). ScrollSpy ({offset: 0, cible: '#nav',});Il y a aussi un événement pour passer à une nouvelle entrée.
// Les événements sont liés à la navigation
$ ('# nav'). on ('active.bs.scrollspy', function () {
alert («Cet événement est déclenché après l'activation d'une nouvelle entrée!»);
});
Il existe également un moyen de mettre à jour le DOM de conteneur lors de l'écoute de défilement.
// partie html
<Conctionnement> <h4 id = "html5"> html5 <a href = "#" onclick = "supprimer (this)"> Supprimer ceci </a> </h4> <p> ... </p> </ section>
// Lors de la suppression du contenu, actualisez le DOM pour éviter le désalignement de la surveillance de la navigation
Fonction supprime (e) {$ (e) .parents ('. Sec'). Remove (); $ ('# contenu'). ScrollSpy ('Refresh');}Remarque: Cette méthode doit utiliser Data- * Decarative.
Ce qui précède concerne cet article, j'espère qu'il sera utile à l'apprentissage de tout le monde.