2010-11-11 139 views
0

嗨我很新的JavaScript和JQuery。我最近發現了Jcarousel插件,並且我嘗試了幾個關於sorgalla的例子,但似乎無法弄清楚。JCarousel和JqueryUI滑塊問題

我想要的是從數據庫中填充圖像(鏈接)的旋轉木馬,我想要顯示的圖像的選擇基於我從jqueryui滑塊獲得的2個日期參數。我的想法是使用「from」和「to」日期參數對python腳本執行ajax請求,該腳本以JSON格式返回圖像鏈接。但我的問題是,當我從滑塊中選擇一個新的圖像範圍的傳送帶去香蕉(顯示空盒子或半圖像)。

如果有人能夠在這裏向我推薦正確的方向,我將不勝感激,謝謝。 這裏是我的腳本:

<script type="text/javascript"> 

function js(){ 
    $('#mycarousel').empty(); 
    var start_d=$("#valueAA").val(); 
    var end_d=$("#valueBB").val(); 
    $.getJSON("http://www.xxx.com/zzzzzzzzz/cgi-bin/hnf.py"  , 
     {start_d: start_d, end_d: end_d}        , 
     function(data){ 
      var encoded = $.toJSON(data); 
      for(var i=0; i < data.articles.length; i++) { 
       $('#mycarousel').append('<li><img src="' + $.evalJSON(encoded).articles[i].img + '" width="120" height="100" alt="" /></li>'); 
      } 
      jQuery('#mycarousel').jcarousel({scroll: 1}); 
     } 
    ); 
} 

$(document).ready(function() { 
    $(function(){ 
     $('select#valueAA, select#valueBB').selectToUISlider({ 
      sliderOptions: { 
       stop: function(e,ui) { 
        js(); 
       } 
      } 
     }); 
     labels: 12 
     //fix color 
     fixToolTipColor(); 
    }); 

    //quick function for tooltip color match 
    function fixToolTipColor(){ 
     //grab the bg color from the tooltip content - set top border of pointer to same 
     $('.ui-tooltip-pointer-down-inner').each(function(){ 
      var bWidth = $('.ui-tooltip-pointer-down-inner').css('borderTopWidth'); 
      var bColor = $(this).parents('.ui-slider-tooltip').css('backgroundColor') 
      $(this).css('border-top', bWidth+' solid '+bColor); 
     }); 
    } 
}); 
</script> 

回答

0

找到了解決辦法:

我不能只是空我UL出於某種原因,而是一個解決方法是放置在包裝的UL和銷燬的包裝和改造的ul在每個圖像集之間。也許不是最性感的解決方案,但它的工作原理..

解決方案:

function js(){ 
    $('#wrap').remove(); 
    $('#container').append('<div id ="wrap"></div>'); 
    $('#wrap').append('<ul id="mycarousel" class="jcarousel-skin-tango"></ul>'); 
    var start_d=$("#valueAA").val(); 
    var end_d=$("#valueBB").val(); 
    $.getJSON("http://www.xxx.com/zzz/cgi-bin/hnf.py"  , 
     {start_d: start_d, end_d: end_d}        , 
     function(data){ 
      var encoded = $.toJSON(data); 
      for(var i=0; i < data.articles.length; i++) { 
       $('#mycarousel').append('<li><img src="' + $.evalJSON(encoded).articles[i].img + '" width="110" height="100" alt="" /></li>'); 
      } 
      jQuery('#mycarousel').jcarousel({scroll: 1}); 
     } 
    ); 
}