如何让jQuery UI滑块捕捉到预定义的值？

我有一个滑块在jQuery UI中，我有一些预定义的值，用户可以选择。但是，现在，它只是从1-60开始，而不是使用我的价值观。我有以下数字： 1,3,5,15,30,60如何让jQuery UI滑块捕捉到预定义的值？

这是我的代码：

$(document).ready(function(){ 
    var valMap = [1,3,5,15,30,60]; 
    $("#resolution-slider").slider({ 
     min: 1, 
     max: 60, 
     values: [2], 
     slide: function(event, ui) {       
      $("#resolution").val(ui.values[0]);     
      $(".resolution-preview").html(ui.values[0]);     
     }  
    }); 
});

我怎样才能使滑块捕捉到我的valMap值？

来源

2012-05-02 Elias

没有内置的功能来做到这一点，但是你可以重写“幻灯片”事件捕捉到您的值。请参阅此问题中接受的anser：http://stackoverflow.com/questions/681303/is-there-a-plugin-or-example-of-a-jquery-slider-working-with-non-equably-divisib –

为什么不这样做：

$(document).ready(function(){ 
    var valMap = [1,3,5,15,30,60]; 
    $("#resolution-slider").slider({ 
     max: valMap.length - 1, // Set "max" attribute to array length 
     min: 0, 
     values: [2], 
     slide: function(event, ui) { 
     $("#resolution").val(valMap[ui.values[0]]); // Fetch selected value from array    
     $(".resolution-preview").html(valMap[ui.values[0]]); 
     } 
    }); 
});

来源

2012-05-02 10:11:19 Jan

这就像一个魅力！德！ :) – Elias

我认为这是你想要的，试试看下面的代码：

<div id="slide"></div> 

var valMap = [1,3,5,15,30,60]; 

$("#slide").slider({ 
    max: 60, 
    min: 1, 
    stop: function(event, ui) { 
    console.log(ui.value); 
    }, 
    slide: function(event, ui) { 
    // 1,3,5,15,30,60 
    return $.inArray(ui.value, valMap) != -1; 
    } 
});

来源

2012-05-02 09:49:42 ijse

如何让jQuery UI滑块捕捉到预定义的值？

回答

相关问题