2012-11-29 40 views
0

使用第二個答案this question我寫了一個4手柄jQuery滑塊的代碼。它工作正常,但後來我不得不在同一頁面上製作多個滑塊,所以我嘗試對代碼進行模塊化,分離幻燈片功能。現在滑塊中的處理程序完全忽略了我爲這種情況設置的條件。Jquery UI滑塊滑動功能的問題

這裏是我的滑動功能的代碼,我如何把它的滑塊設置:

滑動功能:

function slidegen(event,ui,index){ 

    //Code for handler 0 
    if(ui.handle == $("#weightage_slider_"+index+"_0").get(0)){ 
     if(ui.values[0] >= ui.values[1]){ 

      /*FOR SOME REASON THE NEXT LINE HAS NO EFFECT*/ 

      $("#weightage_slider_"+index).slider('values', 0, ui.values[1]); 
      return false; 
     } else { 
      // handle-0 will move 
      // update display of colored handle ranges 
      $("#weightage_slider_a_"+index).css('left', '0%'); 
      $("#weightage_slider_a_"+index).css('width', (to100(ui.values[0])+'%')); 
      $("#weightage_slider_b_"+index).css('left', (to100(ui.values[0])+'%')); 
      $("#weightage_slider_b_"+index).css('width', ((to100(ui.values[1])-to100(ui.values[0]))+'%')); 
     } 
    } 

    /*SIMILAR CODE FOR THE REST OF THE HANDLERS HERE*/ 
} 

滑塊設置:

$("#weightage_slider_0").slider({ 
    min: 1, 
    max: 5, 
    step: 0.01, 
    values: handlers, // set four handles 
    slide: function(event, ui) { 
     slidegen(event,ui,0); 
    }, 
    change: function(event, ui) {  
     changen(event,ui,0); 
    } 
}); 

據我所知,在一張幻燈片,會出現以下序列:(i)更改ui.value(ii)調用滑塊功能(iii)移動滑塊手柄。難道是因爲我在滑塊功能中再次調用了錯誤,所以我正在改變這個順序?

回答

0

問題解決了!看來你不能將你要用作設置的功能模塊化。我認爲它必須與範圍問題。相反,我模塊整個滑塊創建,你可以看到下面或在this link

function makeslider(index,h) { 
     $("#weightage_slider_" + index).slider({ 
      min: 1, 
      max: 5, 
      step: 0.01, 
      values: h, 
      // set four handles 
      slide: function(event, ui) { 
       /*Generic slide function code here*/ 
      }, 
      change: function(event, ui) { 
       /*Generic change function code here*/ 
      }, 
      create: function(event, ui) { 
       /*Generic create function code here*/ 
      }  
     }); 
} 

makeslider(0, handlers); 
makeslider(1, handlers1); 
makeslider(2, handlers2);