水平导航栏上的标题，带点在fullpage.js中 [英] Title on horizontal navigation bar with dots in fullpage.js

问题描述

我正在使用fullpage.js设计网站。我想为水平导航栏中的每个点提供标题。

  function addSlidesNavigation（section，numSlides）{
 section.append（'< div class =fp-slidesNav >< UL>< / UL>< / DIV>'）; 
 var nav = section.find（'。fp-slidesNav'）; 
 
 //顶部或底部
 nav.addClass（options.slidesNavPosition）; （var i = 0; i  nav.find（'ul'）。append（'< li>< a href =＃）的
 
。 ><跨度>< /跨度>< / A>< /立GT;'）; 
} 
 
 //居中它
 nav.css（'margin-left'，' - '+（nav.width（）/ 2）+'px'）; 
 
 nav.find（'li'）。first（）。find（'a'）。addClass（'active'）; 
 
 code 
 
 
 
函数调用来自：
  if（options.slidesNavigation）{
 addSlidesNavigation（$（this），numSlides）; 
} 
  
该函数生成水平导航栏。我想为每个添加标题。我不知道该怎么做。请帮助。
解决方案
我按照以下方法完成了这项工作。  
 
在jquery.fullpage.js的索引页中： horizo​​ntalNavigationToolTip = ['tooltip1'，'tooltip2']， 
 
 
 
 ：
  function addSlidesNavigation（section，numSlides）{
 section.append（'< div class =fp- slidesNav>< UL>< / UL>< / DIV>'）; 
 var nav = section.find（'。fp-slidesNav'）; 
 
 //顶部或底部
 nav.addClass（options.slidesNavPosition）; 
 
 for（var i = 0; i  //nav.find('ul').append('<li><a href = ＃title ='+ tooltip [i] +'>< span>< / span>< / a>< / li>'）; 
 
 //仅在需要时添加工具提示（由用户定义）
 var tooltip = options.horizo​​ntalNavigationToolTip [i]; 
 
 var li ='< li>< a class =tooltipshref =＃>< span>< / span>< div>< img src = images / tooltip /'+ tooltip +'。png/>< / span>< / div>< / a>'; 
 li + ='< / li>'; 
 
 nav.find（'ul'）。append（li）; 
} 
 
 //居中它
 nav.css（'margin-left'，' - '+（nav.width（）/ 2）+'px'）; 
 
 nav.find（'li'）。first（）。find（'a'）。addClass（'active'）; 
} 
  
希望这有助于其他人。
 
I am designing website using fullpage.js. I want to give title to each dot in horizontal navigation bar. 
function addSlidesNavigation(section, numSlides){
        section.append('<div class="fp-slidesNav"><ul></ul></div>');
        var nav = section.find('.fp-slidesNav');

        //top or bottom
        nav.addClass(options.slidesNavPosition);

        for(var i=0; i< numSlides; i++){
            nav.find('ul').append('<li><a href="#"><span></span></a></li>');
        }

        //centering it
        nav.css('margin-left', '-' + (nav.width()/2) + 'px');

        nav.find('li').first().find('a').addClass('active');
}
function call from :
if(options.slidesNavigation){
    addSlidesNavigation($(this), numSlides);
}
This function generates horizontal navigation bar. I want to add title for each. I am not getting how do I do it. Please help.
解决方案
I did it by following way.

In index page:     horizontalNavigationToolTip = ['tooltip1','tooltip2'],

in jquery.fullpage.js:
function addSlidesNavigation(section, numSlides){
        section.append('<div class="fp-slidesNav"><ul></ul></div>');
        var nav = section.find('.fp-slidesNav');

        //top or bottom
        nav.addClass(options.slidesNavPosition);

        for(var i=0; i< numSlides; i++){
            //nav.find('ul').append('<li><a href="#" title="'+ tooltip[i] +'"><span></span></a></li>');

            // Only add tooltip if needed (defined by user)
            var tooltip = options.horizontalNavigationToolTip[i];

            var li = '<li><a class="tooltips" href="#"><span></span><div><img src="images/tooltip/'+ tooltip +'.png" /></span></div></a>';
            li += '</li>';

            nav.find('ul').append(li);
        }

        //centering it
        nav.css('margin-left', '-' + (nav.width()/2) + 'px');

        nav.find('li').first().find('a').addClass('active');
    }
hope this is helpful to others.

                        
这篇关于水平导航栏上的标题，带点在fullpage.js中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！