2011-01-17 3 views
0

私はValumsのスクロールスクリプト(http://valums.com/scroll-menu-jquery/)を動的に作成されたCycleプラグインのページネーションhttp://www.malsup.com/jquery/cycle/pager2.htmlに組み込もうとしています。基本的には、動的ページネーション(1,2,3 ...)をmousemoveでスクロールさせようとしています。jQuery:動的に生成されたリストアイテムをスクロール

だから、私はオリジナルのサイクルのデモコードがあります。

$( '#スライドショーを')( '')の前にサイクル({ FX: 'ターンダウン'、 スピード: '' 速く、 タイムアウト: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>'; 
} 

})。

そして私は、適用しようとしています:

$(関数(){ //は、高速アクセスのために私たちの要素を取得し、オーバーレイ幅 するvar DIV = $( 'のdiv#のナビゲーションバーを')に設定、 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( 'リー:最後の子');

すべての要素が動的に作成されるため、最後の要素が見つかりません。 #nav内の要素がmousemove上でスクロール可能になるようにスクリプトがどのようにバインドされるかについてのアイデアはありますか?

答えて

0

私はあなたのコードを試しませんでしたが、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」属性がありません。

+0

one two three four
を動的にjQueryを介して生成されていません。私の問題はそれです var lastLi = ul.find( 'li:last-child'); は、サイクルプラグインで動的に生成されたページネーションを実際に表示しません。 – Darik

0

[OK]を、ので、私は、以下に示すよう.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); 
    }); 
関連する問題