Maison >interface Web >js tutoriel >Implémentation de la fonction de moniteur de défilement dans Bootstrap
Implémentation de la fonction de moniteur de défilement dans Bootstrap
- 巴扎黑original
- 2017-07-23 15:26:511314parcourir
Les mots précédents
Le plug-in d'écoute de défilement est utilisé pour mettre à jour automatiquement les éléments de navigation en fonction de la position de la barre de défilement. Faites défiler la zone sous la barre de navigation et faites attention aux changements dans les éléments de navigation. Les éléments du menu déroulant seront également automatiquement mis en surbrillance. Cet article présentera en détail l'utilisation de base du moniteur de défilement Bootstrap
Le plug-in de surveillance de défilement met automatiquement à jour les éléments de navigation correspondants dans la barre de navigation en fonction de position de défilement. Le plug-in peut détecter automatiquement quelle position a été atteinte, puis ajouter un style actif
à l'élément parent du menu qui doit être mis en surbrillance s'il y a un menu déroulant dans la navigation. , et le contenu de la zone de défilement atteint la zone correspondant à l'élément enfant du menu déroulant, En plus du sous-menu mis en surbrillance, l'élément parent du sous-menu (bouton déroulant) sera également mis en surbrillance
En utilisation quotidienne , la surveillance du défilement est généralement utilisée de deux manières. L'une consiste à fixer la hauteur d'un élément, à faire défiler, puis à mettre en surbrillance le menu correspondant. L'autre consiste à surveiller le défilement de la page entière (corps). L'utilisation des deux méthodes est la même et toutes deux nécessitent les trois étapes suivantes :
1. Définissez le conteneur de défilement, c'est-à-dire définissez data-target="#selector" data-spy="scroll" sur l'élément que vous souhaitez surveiller. Attributs
2. Définissez le conteneur du lien de menu L'identifiant (ou le style) du conteneur et le sélecteur correspondant à l'attribut data-target doivent être cohérents
3. Dans le conteneur de menu, il doit y avoir. Un élément de style nav, et il y a un élément li dans son contenu. L'élément a contenu dans li peut également détecter les liens de menu en surbrillance, qui répondent aux conditions du .nav li > un sélecteur
4 . Quelle que soit la méthode de mise en œuvre, les composants qui doivent être surveillés pour la surveillance du défilement sont position: relative;, c'est-à-dire le positionnement relatif
[hauteur de l'élément fixe]
.<div id="myNavbar" class="navbar navbar-default navbar-fixed-top" role="navigation" style="position:relative"> <ul class="nav navbar-nav"><li><a href="#html" tabindex="-1">HTML</a></li><li><a href="#css" tabindex="-1">CSS</a></li><li><a href="#javascript" tabindex="-1">javascript</a></li> </ul></div><div data-spy="scroll" data-target="#myNavbar" style="margin-top:150px;height:250px;overflow:auto;position:relative"><h4 id="html">Html</h4><p>Html内容</p><br><p>...</p><br><p>...</p><br><p>...</p><h4 id="css">CSS</h4><p>CSS内容</p><br><p>...</p><br><p>...</p><br><p>...</p><h4 id="javascript">javascript</h4><p>javascript内容</p><br><p>...</p><br><p>...</p><br><p>...</p><br><p>...</p><br><p>...</p><br><p>...</p></div>
[élément corps]
<body data-spy="scroll" data-target="#myNavbar" style="height:300px;position:relative"><div id="myNavbar" class="navbar navbar-default navbar-fixed-top" role="navigation"> <ul class="nav navbar-nav"><li><a href="#html" tabindex="-1">HTML</a></li><li><a href="#css" tabindex="-1">CSS</a></li><li><a href="#javascript" tabindex="-1">javascript</a></li> </ul></div><h4 id="html" style="margin-top:150px">Html</h4><p>Html内容</p><br><p>...</p><br><p>...</p><br><p>...</p><h4 id="css">CSS</h4><p>CSS内容</p><br><p>...</p><br><p>...</p><br><p>...</p><h4 id="javascript">javascript</h4><p>javascript内容</p><br><p>...</p><br><p>...</p><br><p>...</p><br><p>...</p><br><p>...</p><br><p>...</p></body>
Appel JS
Dans le framework Bootstrap, il est relativement simple de déclencher le moniteur de défilement à l'aide de méthodes JavaScript. Il vous suffit de spécifier les noms de deux conteneurs
<div id="myNavbar" class="navbar navbar-default navbar-fixed-top" role="navigation"> <ul class="nav navbar-nav"><li><a href="#html" tabindex="-1">HTML</a></li><li><a href="#css" tabindex="-1">CSS</a></li><li><a href="#javascript" tabindex="-1">javascript</a></li> </ul></div><div id="scrollspy" style="margin-top:150px;height:250px;overflow:auto;position:relative"><h4 id="html">Html</h4><p>Html内容</p><br><p>...</p><br><p>...</p><br><p>...</p><h4 id="css">CSS</h4><p>CSS内容</p><br><p>...</p><br><p>...</p><br><p>...</p><h4 id="javascript">javascript</h4><p>javascript内容</p><br><p>...</p><br><p>...</p><br><p>...</p><br><p>...</p><br><p>...</p><br><p>...</p></div><script>$('#scrollspy').scrollspy({ target: '#myNavbar' })
</script>.
Méthode
Lorsque vous utilisez le plug-in d'écoute de défilement pour ajouter ou supprimer des éléments dans le DOM, vous devez appeler ceci méthode d'actualisation comme suit
$('[data-spy="scroll"]').each(function () { var $spy = $(this).scrollspy('refresh')
})Il convient de noter que cette méthode d'actualisation n'est valable que pour un usage déclaratif. Si vous utilisez le déclencheur JS et devez actualiser le DOM, vous devez réappliquer le plug-in ; ou obtenir l'instance à partir de l'attribut data-scrollspy, puis appeler la méthode d'actualisation
[Paramètre]
Les paramètres peuvent être transmis via des attributs de données ou JavaScript. Pour l'attribut data, son nom est formé en ajoutant le nom du paramètre à data-, par exemple data-offset=""
Le moniteur de défilement fournit un paramètre de décalage, et la valeur par défaut de ce paramètre est 10. Par défaut, si le contenu défilant se trouve à moins de 10 px du conteneur de défilement, l'élément de menu correspondant sera mis en surbrillance
[Événement]
La surveillance du défilement prend également en charge les fonctions d'abonnement et de déclenchement d'événements, actuellement uniquement. un événement d'activation
activate.bs.scrollspy 每当一个新条目被激活后都将由滚动监听插件触发此事件。
<div id="myNavbar" class="navbar navbar-default navbar-fixed-top" role="navigation"> <ul class="nav navbar-nav"><li><a href="#html" tabindex="-1">HTML</a></li><li><a href="#css" tabindex="-1">CSS</a></li><li><a href="#javascript" tabindex="-1">javascript</a></li> </ul></div><div id="scrollspy" data-spy="scroll" data-target="#myNavbar" data-offset="0" style="margin-top:150px;height:250px;overflow:auto;position;relative"><h4 id="html">Html</h4><p>Html内容</p><br><p>...</p><br><p>...</p><br><p>...</p><h4 id="css">CSS</h4><p>CSS内容</p><br><p>...</p><br><p>...</p><br><p>...</p><h4 id="javascript">javascript</h4><p>javascript内容</p><br><p>...</p><br><p>...</p><br><p>...</p><br><p>...</p><br><p>...</p><br><p>...</p></div><script>$(function(){
$("#myNavbar").on('activate.bs.scrollspy',function(e){
$(e.target).siblings().css('outline','none')
.end().css('outline','1px solid black');
})
})
</script>
Code source JS
【1】IIFE
Utilisez la fonction d'appel immédiat pour empêcher le code du plug-in de fuir, formant ainsi une boucle fermée, et ne peut être étendu qu'à partir du fn de jQuery
+function ($) {//使用es5严格模式'use strict';//}(window.jQuery);【2】Paramètres initiaux
function ScrollSpy(element, options) {this.$body = $(document.body)//判断滚动容器是否是body，如果是则使用window，如果不是则使用该元素本身this.$scrollElement = $(element).is(document.body) ? $(window) : $(element)//将默认值和传进来的options参数合并，后者优先级高this.options = $.extend({}, ScrollSpy.DEFAULTS, options)//如果option里设置了target，即data-target有值，则优先使用//如果没有，则查找通过.nav样式的子元素，即.nav样式内的li子元素内的a链接，作为菜单容器this.selector = (this.options.target || '') + ' .nav li > a'this.offsets = []this.targets = []//高亮显示的菜单this.activeTarget = nullthis.scrollHeight = 0//给滚动容器绑定滚动事件this.$scrollElement.on('scroll.bs.scrollspy', $.proxy(this.process, this))//计算当前页面内所有滚动容器内的id集合和每个id元素距离浏览器顶部的像素距离this.refresh()//开始正式处理this.process()
} //版本是3.3.7
ScrollSpy.VERSION = '3.3.7' //默认值为offset：10
ScrollSpy.DEFAULTS = {
offset: 10
}【3】Code principal du plugin
//获取滚动容器的滚动高度
ScrollSpy.prototype.getScrollHeight = function () {//获取特定滚动容器的滚动高度，如果没有则获取body元素的滚动高度return this.$scrollElement[0].scrollHeight || Math.max(this.$body[0].scrollHeight, document.documentElement.scrollHeight)
}
ScrollSpy.prototype.refresh = function () {var that = thisvar offsetMethod = 'offset'var offsetBase = 0this.offsets = []this.targets = []this.scrollHeight = this.getScrollHeight()if (!$.isWindow(this.$scrollElement[0])) {
offsetMethod = 'position' offsetBase = this.$scrollElement.scrollTop()
}this.$body
.find(this.selector)
.map(function () {var $el = $(this)var href = $el.data('target') || $el.attr('href')var $href = /^#./.test(href) && $(href)//返回一个二维数组，每个滚动容器内的id对象到页面顶部的距离以及高亮菜单容器里所对应的href值return ($href && $href.length && $href.is(':visible') && [[$href[offsetMethod]().top + offsetBase, href]]) || null })
.sort(function (a, b) { return a[0] - b[0] })
.each(function () {//收集所有的偏移值，也就是距离top的距离that.offsets.push(this[0])//收集菜单容器里的所有href值，也就是滚动容器里的id值that.targets.push(this[1])
})
}
ScrollSpy.prototype.process = function () {//获取滚动容器的scrollTop，再加上设置的offset值var scrollTop = this.$scrollElement.scrollTop() + this.options.offset//获取滚动高度var scrollHeight = this.getScrollHeight()//最大滚动=总scrollheight + 设置的offset值 - 设置高度heightvar maxScroll = this.options.offset + scrollHeight - this.$scrollElement.height()var offsets = this.offsetsvar targets = this.targetsvar activeTarget = this.activeTargetvar iif (this.scrollHeight != scrollHeight) { this.refresh()
}//如果超过了最大滚动，说明已经滚动到底了if (scrollTop >= maxScroll) { //如果最后一个元素还没有高亮，则设置最后一个元素高亮 return activeTarget != (i = targets[targets.length - 1]) && this.activate(i)
}if (activeTarget && scrollTop < offsets[0]) { this.activeTarget = null return this.clear()
}//倒序遍历所有元素的offsetfor (i = offsets.length; i--;) { //如果i元素不等于当前高亮元素 activeTarget != targets[i]//滚动高度 大于 i元素的offsets&& scrollTop >= offsets[i]//i+1元素不存在，或者i+1元素大于滚动高度&& (offsets[i + 1] === undefined || scrollTop < offsets[i + 1])//则设置i为高亮元素&& this.activate(targets[i])
}
} //设置高亮菜单元素
ScrollSpy.prototype.activate = function (target) {//赋值实例属性this.activeTarget = targetthis.clear()//查找菜单中符合[data-target+"#' + 所高亮元素的id + '"]属性的元素//或者href值是#' + 所高亮元素的id + '的话，也可以var selector = this.selector +
'[data-target="' + target + '"],' + this.selector + '[href="' + target + '"]'//查找父元素li，然后添加active高亮样式var active = $(selector)
.parents('li')
.addClass('active')//如果li元素的父元素有dropdown-menu样式，则表示是一个dropdown下拉菜单if (active.parent('.dropdown-menu').length) {
active = active
.closest('li.dropdown')//则需要给dropdown的li元素也加上active高亮样式.addClass('active')
}//触发自定义高亮事件active.trigger('activate.bs.scrollspy')
}
//删除其他高亮元素的active样式
ScrollSpy.prototype.clear = function () {
$(this.selector)
.parentsUntil(this.options.target, '.active')
.removeClass('active')
}【4 】Définition du plug-in jQuery
function Plugin(option) {//根据选择器，遍历所有符合规则的元素return this.each(function () { var $this = $(this) //获取自定义属性bs.scrollspy的值 var data = $this.data('bs.scrollspy') //如果option参数是对象，则作为ScrollSpy的参数传入 var options = typeof option == 'object' && option //如果值不存在，则将ScrollSpy实例设置为bs.scrollSpy值 if (!data) $this.data('bs.scrollspy', (data = new ScrollSpy(this, options))) //如果option传递了string，则表示要执行某个方法 if (typeof option == 'string') data[option]()
})
} var old = $.fn.scrollspy //保留其他库的$.fn.scrollspy代码(如果定义的话)，以便在noConflict之后可以继续使用该老代码
$.fn.scrollspy = Plugin //重设插件构造器，可以通过该属性获取插件的真实类函数
$.fn.scrollspy.Constructor = ScrollSpy【5】Traitement anti-conflit
$.fn.scrollspy.noConflict = function () { //恢复以前的旧代码$.fn.scrollspy = old//将$.fn.scrollspy.noConflict()设置为Bootstrap的Scrollspy插件return this
}【6】Événement déclencheur de liaison
$(window).on('load.bs.scrollspy.data-api', function () {//遍历所有符合条件的滚动容器$('[data-spy="scroll"]').each(function () { var $spy = $(this) //执行scrollspy插件，并传入滚动容器上设置的自定义参数(data-开头) Plugin.call($spy, $spy.data())
})
})
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Articles Liés
Voir plus- Une analyse approfondie du composant de groupe de liste Bootstrap
- Explication détaillée du currying de la fonction JavaScript
- Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)
- Angularjs intègre l'interface utilisateur WeChat (weui)
- Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript