jQuery Cycle - создание собственного пейджера - PullRequest
Новая
       21

jQuery Cycle - создание собственного пейджера

2 голосов
/ 07 января 2012

Относительно (я надеюсь) простой вопрос jQuery:

У меня есть меню: 

<ul id="menu" style="list-style:none">
    <li><a href="#asics">ASICS</a></li>
    <li>/</li>
    <li><a href="#plants">PLANTS PLUS</a></li>
    <li>/</li>
    <li><a href="#tooheys">TOOHEYS</a></li>
    <li>/</li>
    <li><a href="#olympics">OLYMPICS</a></li>
    <li>/</li>
    <li><a href="#panadol">PANADOL</a></li>
    <li>/</li>
    <li><a href="#kia">KIA CADENZA</a></li>
</ul>

Меню управляет ползунком (код не нужен, просто стандартные деления цикла. Вот код, взятый из Руководства по плагину для цикла jQuery : 

var slider = new Swipe(document.getElementById('slider'));
$('#adSlideshow').cycle({ 
    fx:     'fade', 
    speed:  'fast', 
    timeout: 0,  
    pager:  '#menu',
    pagerAnchorBuilder: function(idx, slide) { 
        // return selector string for existing anchor 
        return '#menu li:eq(' + idx + ') a'; 
    }
});

Как видите, в моем меню каждая вторая ссылка (с тегами) имеет отношение к пейджеру; каждый элемент <li>/</li> - это просто разделитель между каждым элементом ссылки. Как я могу отредактировать код пейджера, чтобы он использовал только правильные элементы <li>?

Вот jsFiddle, чтобы лучше проиллюстрировать, что я имею в виду: http://jsfiddle.net/y4Qfw/12/ <- Как вы можете видеть, ссылки вызывают каждый второй div. Сейчас я просто помещаю фиктивные div в каждую вторую позицию, чтобы код работал нормально, но я бы предпочел найти менее громоздкое решение. Мысли? </p>

1 Ответ

1 голос
/ 07 января 2012

Не используйте <li>/</li> для пробелов .. используйте другой элемент или, что еще лучше, удалите их и используйте следующее правило CSS: 

#menu li {
    margin-bottom: 30px;
}

Пример: http://jsfiddle.net/y4Qfw/13/

Используйте элементыдля чего они предназначены

...