65 html javascript jquery user-interface slider
是否可以使用JQuery Slider(范围滑块/双滑块)来获得非线性(非一致"步长")值？
我想将水平滑块看起来像:
|----|----|----|----|----|--------|--------|-------------------------|--------------------------|...
0 500 750 1000 1250 1500 2000 2500 75000 100000...
例如,我想要以下JQuery代码:
var values = [0, 500, 750, 1000, 1250, 1500, 2000, 2500, 75000, 100000, 150000, 200000, 250000, 300000, 350000, 400000, 500000, 1000000];
var slider = $("#price-range").slider({
orientation: 'horizontal',
range: true,
min: 0,
max: 1000000,
values: [0, 1000000],
slide: function(event, ui) {
var includeLeft = event.keyCode != $.ui.keyCode.RIGHT;
var includeRight = event.keyCode != $.ui.keyCode.LEFT;
slider.slider('option', 'value', findNearest(includeLeft, includeRight, ui.value));
$("#price-amount").html('$' + ui.values[0] + ' - $' + ui.values[1]);
return false;
},
change: function(event, ui) {
getHomeListings();
}
});
function findNearest(includeLeft, includeRight, value) {
var nearest = null;
var diff = null;
for (var i = 0; i < values.length; i++) {
if ((includeLeft && values[i] <= value) || (includeRight && values[i] >= value)) {
var newDiff = Math.abs(value - values[i]);
if (diff == null || newDiff < diff) {
nearest = values[i];
diff = newDiff;
}
}
}
return nearest;
}
上面的代码并不完全正常,但是对齐网格功能不起作用.
Alc*_*nja 53
不确定您是否希望滑块刻度与您的值*成比例*但如果是这样,我为其他提出相同问题的人提供了解决方案.你可以在这里找到我的解决方案.基本上我使用了slide当您移动滑块以模仿步进时触发的事件,但是基于定义步骤的自定义数组.这样,它只允许您"步进"到预定义的值,即使它们没有均匀分布.
*换句话说,如果您希望滑块看起来像这样:
|----|----|----|----|----|----|----|
0 10 20 100 1000 2000 10000 20000
然后在这里使用其他解决方案之一,但如果你想让你的滑块看起来像这样(图表不按比例):
|--|--|-------|-----------|-----------|--------------------|--------------------|
0 10 20 100 1000 2000 10000 20000
然后我链接的解决方案可能更多你所追求的.
编辑:好的,这个版本的脚本应该使用双滑块:
$(function() {
var values = [0, 500, 750, 1000, 1250, 1500, 2000, 2500, 75000, 100000, 150000, 200000, 250000, 300000, 350000, 400000, 500000, 1000000];
var slider = $("#price-range").slider({
orientation: 'horizontal',
range: true,
min: 0,
max: 1000000,
values: [0, 1000000],
slide: function(event, ui) {
var includeLeft = event.keyCode != $.ui.keyCode.RIGHT;
var includeRight = event.keyCode != $.ui.keyCode.LEFT;
var value = findNearest(includeLeft, includeRight, ui.value);
if (ui.value == ui.values[0]) {
slider.slider('values', 0, value);
}
else {
slider.slider('values', 1, value);
}
$("#price-amount").html('$' + slider.slider('values', 0) + ' - $' + slider.slider('values', 1));
return false;
},
change: function(event, ui) {
getHomeListings();
}
});
function findNearest(includeLeft, includeRight, value) {
var nearest = null;
var diff = null;
for (var i = 0; i < values.length; i++) {
if ((includeLeft && values[i] <= value) || (includeRight && values[i] >= value)) {
var newDiff = Math.abs(value - values[i]);
if (diff == null || newDiff < diff) {
nearest = values[i];
diff = newDiff;
}
}
}
return nearest;
}
});
请注意,它在最左端看起来有点滑稽,因为跳转与右手端相比非常接近,但如果使用键盘箭头移动滑块,则可以根据需要看到它的步进.解决这个问题的唯一方法就是将你的规模改为不那么急剧地指数化.
编辑2: 好的,如果在使用真值时间距过于夸张,可以使用滑块的一组假值,然后查找当您需要使用实际值时所对应的实际值(在与此处提出的其他解决方案类似的方式).这是代码:
$(function() {
var trueValues = [0, 500, 750, 1000, 1250, 1500, 2000, 2500, 75000, 100000, 150000, 200000, 250000, 300000, 350000, 400000, 500000, 1000000];
var values = [0, 1, 2, 3, 4, 5, 6, 7, 10, 15, 20, 25, 30, 40, 50, 60, 75, 100];
var slider = $("#price-range").slider({
orientation: 'horizontal',
range: true,
min: 0,
max: 100,
values: [0, 100],
slide: function(event, ui) {
var includeLeft = event.keyCode != $.ui.keyCode.RIGHT;
var includeRight = event.keyCode != $.ui.keyCode.LEFT;
var value = findNearest(includeLeft, includeRight, ui.value);
if (ui.value == ui.values[0]) {
slider.slider('values', 0, value);
}
else {
slider.slider('values', 1, value);
}
$("#price-amount").html('$' + getRealValue(slider.slider('values', 0)) + ' - $' + getRealValue(slider.slider('values', 1)));
return false;
},
change: function(event, ui) {
getHomeListings();
}
});
function findNearest(includeLeft, includeRight, value) {
var nearest = null;
var diff = null;
for (var i = 0; i < values.length; i++) {
if ((includeLeft && values[i] <= value) || (includeRight && values[i] >= value)) {
var newDiff = Math.abs(value - values[i]);
if (diff == null || newDiff < diff) {
nearest = values[i];
diff = newDiff;
}
}
}
return nearest;
}
function getRealValue(sliderValue) {
for (var i = 0; i < values.length; i++) {
if (values[i] >= sliderValue) {
return trueValues[i];
}
}
return 0;
}
});
你可以摆弄values数组中的数字(代表滑块停止点),直到你按照你想要的方式间隔它们.通过这种方式,您可以从用户的角度来感受它,就像它与值按比例滑动一样,但不会过于夸张.显然,如果你的真值是动态创建的,你可能需要提出一个算法来生成滑块值而不是静态定义它们......
Bha*_*mar 14
HTML:
<body>
<p>
Slider Value: <span id="val"></span><br/>
Nonlinear Value: <span id="nlVal"></span><br/>
</p>
<div id="slider"></div>
</body>
JS:
$(function() {
var valMap = [0, 25,30,50,55,55,60,100];
$("#slider").slider({
// min: 0,
max: valMap.length - 1,
slide: function(event, ui) {
$("#val").text(ui.value);
$("#nlVal").text(valMap[ui.value]);
}
});
});
一个选项是使用步长为1并引用包含所选值的数组.从0开始,最多20,获取数组[value_of_slider]以获得实际值.我不知道滑块是否足以告诉您是否有办法为其提供一组自定义值.
基于@Seburdis的上述答案和讨论,并使用您示例中的名称:
var prices_array = [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 150, 200, 250, 500, 1000, 1500, 2000, 2500, 5000, 10000];
function imSliding(event,ui)
{
//update the amount by fetching the value in the value_array at index ui.value
$('#amount').val('$' + prices_arr[ui.value] + ' - $' + prices_arr[prices_arr.length - 1]);
}
$('#slider-interval').slider({ min:0, max:values_arr.length - 1, slide: imSliding});
我想我可以提供一个更好的解决方案:我的想法是保持一个数组,除了滑块之外还有我的实际值,然后将step属性设置为1并让滑块与该index数组一起工作,然后从中获取实际值我真正的数据阵列.希望这个例子有助于:http://jsfiddle.net/3B3tt/3/