2012-05-05 4 views
1

это мой первый пост здесь, я надеюсь, что я не буду делать на много ошибок ...jQuery.cycle пейджер делитель

Я использую замечательный jquery.cycle плагин для модуля слайдера новостей на моем сайте. Теперь я хотел бы добавить пейджер, который выглядит следующим образом:

01/02/03/04

Это означает, что я должен добавить «разделители» (= «/» прямой слэш) после каждого номера пейджера кроме последнего. Но я не могу понять, как я мог это сделать.

Это то, что у меня есть:

// redefine Cycle's updateActivePagerLink function 
$.fn.cycle.updateActivePagerLink = function(pager, currSlideIndex) { 
    $(pager) 
     .find('a') 
     .removeClass('active') 
     .filter('a:eq('+currSlideIndex+')') 
     .addClass('active'); 
}; 



$('div.teaser-news') 
    .after('<div class="pager-news"></div>') 
    .cycle({ 
     fx:  'scrollRight', 
     rev:  1, 
     speed: 'slow', 
     timeout: 6000, 
     pager:'.pager-news', 
     pagerAnchorBuilder: function(idx, slide) { 

      var numSlides = $("div.teaser-news").length; 

      if(idx < 10){ 
       idx += '<a href="#">0' + idx + '</a><span class="divider">&nbsp;&#47;&nbsp;</span>'; 
      } else { 
       idx += '<a href="#">' + idx + '</a><span class="divider">&nbsp;&#47;&nbsp;</span>'; 
      } 

      return idx; 
     } 
}); 

Может кто-нибудь помочь мне избавиться от последних косых черт? Спасибо!

+0

Пожалуйста, отметьте один из ответов ниже, щелкнув зеленую стрелку, если это вам поможет. – lucuma

ответ

0
if(idx < 10){ 
    idx += '<a href="#">0' + idx + '</a>'; 
    if (idx+1 != numSlides) { 
     idx += '<span class="divider">&nbsp;&#47;&nbsp;</span>'; 
    } 
} else { 
    idx += '<a href="#">' + idx + '</a>'; 
    if (idx+1 != numSlides) { 
     idx += '<span class="divider">&nbsp;&#47;&nbsp;</span>'; 
    } 
} 

ИМХО

0

Я предпочел бы просто использовать функцию площадки:

function zeroPad(num, places) { 
    var zero = places - num.toString().length + 1; 
    return Array(+(zero > 0 && zero)).join("0") + num; 
} 

, а затем вы можете удалить, если/то и просто сделать:

var slash = "/"; 
if (idx=(numSlides-1)) 
    slash = ""; 

return zeroPad(idx+slash, 2); 

Есть еще несколько примеров How to output integers with leading zeros in JavaScript

0

Функция нулевой площадки, добавленная lucuma, пригодилась мне, хотя после небольшого эксперимента я обнаружил, что выход не понравился добавление за пределами обертки. Поэтому, когда я пытался сделать return <a href='#'>" + zeroPad(n,2) + "</a>&nbsp;/&nbsp; игнорировали разметку после закрытия </a>

Чтобы обойти это я должен был добавить обертывание <li>, чтобы я мог затем добавить слэш внутри обертки. Я внесла свой код, чтобы он соответствовал

$('.carousel .images').cycle({ 
    timeout: 5000, 
    pager : '.pager-news', 
    pagerAnchorBuilder: function(idx, slide) { 
    var n = idx+1; 
    var wrapper = $("div.teaser-news"); 
    if(n != wrapper.children().length){ 
     return "<li><a href='#'>" + zeroPad(n,2) + "</a>&nbsp;/&nbsp;</li>"; 
    }else{ 
     return "<li><a href='#'>" + zeroPad(n,2) + "</a></li>"; 
    } 
    } 
}); 
Смежные вопросы