jQuery: прокрутка динамически генерируемых элементов списка - PullRequest
Новая
       9

jQuery: прокрутка динамически генерируемых элементов списка

0 голосов
/ 17 января 2011

Я пытаюсь включить скрипт прокрутки Valums (http://valums.com/scroll-menu-jquery/) в динамически создаваемую нумерацию плагина Cycle, http://www.malsup.com/jquery/cycle/pager2.html. В основном я пытаюсь получить динамическую пагинацию (1, 2, 3 ...) прокручивать мышью.

Итак, у меня есть оригинальный демонстрационный код Cycle:

$ ( '# слайд-шоу'). Ранее ( ''). Цикл ({ FX: 'TurnDown', скорость: «быстро», время ожидания: 0, пейджер: '#nav', 

// callback fn that creates a thumbnail to use as pager anchor 
pagerAnchorBuilder: function(idx, slide) { 
    return '<li><a href="#"><img src="' + slide.src + '" width="50" height="50" /></a></li>'; 
}

}); * +1011 *

А потом я пытаюсь применить:

$ (функция () { // Получить наши элементы для более быстрого доступа и установить ширину наложения var div = $ ('div # nav'), ul = $ ('ul # nav'), // неупорядоченный список левого поля ulPadding = 15; 

//Get menu width
var divWidth = div.width();

//Remove scrollbars
div.css({overflow: 'hidden'});

//Find last image container
var lastLi = ul.find('li:last-child');

//When user move mouse over menu
div.mousemove(function(e){

  //As images are loaded ul width increases,
  //so we recalculate it each time
  var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding;

  var left = (e.pageX - div.offset().left) * (ulWidth-divWidth) / divWidth;
  div.scrollLeft(left);
});

});

Проблема в том, что:

var lastLi = ul.find ('li: last-child');

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

Ответы [ 2 ]

0 голосов
/ 17 января 2011

Хорошо, поэтому мне пришлось использовать .live(), как показано ниже: 

div.live('mousemove', function(e) {
        var lastLi = ul.find('li:last-child');
        var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding;
        var left = (e.pageX - div.offset().left) * (ulWidth-divWidth) / divWidth;
        div.scrollLeft(left);
    });
0 голосов
/ 17 января 2011

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

<div>
    <span>one</span>
    <span>two</span>
    <span>three</span>
    <span>four</span>
  </div>

<script>
    $("div span:last-child")
        .css({color:"red", fontSize:"80%"})
        .hover(function () {
              $(this).addClass("someclass");
            }, function () {
              $(this).removeClass("someclass");
            });

</script>

Попробуйте восстановить этот список динамически.

P.S. Вам не хватает атрибута 'alt' в ваших изображениях.

...