Ползунок jQuery, как внести изменение размера “шага”
Я знаю, что опоздал на эту вечеринку на пару сотен тысяч минут, но я решил добавить свои 2 цента. Я удивлен, что никто не предложил это, поэтому я предполагаю, что есть кое-что, что я не знаю, что могло бы сделать это не идеальным, поэтому, возможно, я узнаю что-то новое, если это будет сбито. Я часто использую решение, которое использует метод System.Threading.Timer Change().
using System.Threading;
Timer delayedActionTimer;
public MyClass()
{
// Setup our timer
delayedActionTimer = new Timer(saveOrWhatever, // The method to call when triggered
null, // State object (Not required)
Timeout.Infinite, // Start disabled
Timeout.Infinite); // Don't repeat the trigger
}
// A change was made that we want to save but not until a
// reasonable amount of time between changes has gone by
// so that we're not saving on every keystroke/trigger event.
public void TextChanged()
{
delayedActionTimer.Change(3000, // Trigger this timers function in 3 seconds,
// overwriting any existing countdown
Timeout.Infinite); // Don't repeat this trigger; Only fire once
}
// Timer requires the method take an Object which we've set to null since we don't
// need it for this example
private void saveOrWhatever(Object obj)
{
/*Do the thing*/
}
4 ответа
Не уверен, что вы хотите, чтобы масштаб ползунка был пропорционален вашим значениям *, но если да, я предоставил решение для этого для кто-то другой, задавший тот же вопрос. Вы можете найти мое решение здесь . В основном я использую событие 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;
}
});
Обратите внимание, что это выглядит немного забавно в дальнем левом конце, так как прыжки расположены так близко друг к другу по сравнению с правым концом, но вы можете увидеть его шаг по желанию, если вы используйте стрелки на клавиатуре для перемещения ползунка. Хорошо, если интервал слишком преувеличен, когда вы используете истинные значения, вы можете использовать набор фальшивых значений для ползунка, а затем искать реальное значение, которому оно соответствует, когда вам нужно использовать реальное значение (аналогично что предложили другие решения здесь). Вот код:
$(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 (которые представляют точки остановки ползунка), пока не разнесете их так, как хотите. Таким образом, с точки зрения пользователя, вы можете создать ощущение, будто оно скользит пропорционально значениям, но без преувеличения. Очевидно, что если ваши истинные значения создаются динамически, вам может потребоваться разработать алгоритм для генерации значений ползунка вместо их статического определения ...
На основе приведенного выше ответа и обсуждения @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});
Один из вариантов - использовать размер шага, равный единице, и ссылаться на массив, содержащий выбранные вами значения. Начните с 0, увеличьте до 20, получите массив [value_of_slider], чтобы получить фактическое значение. Я недостаточно хорошо знаю ползунки, чтобы сказать вам, есть ли способ задать им собственный набор значений.
если min и max значения одинаковы, значение ползунка не меняется
изменить эту часть
if (ui.value == ui.values[0]) {
slider.slider('values', 0, value);
}
else {
slider.slider('values', 1, value);
}
в
if ( ui.values[0] == ui.values[1] ) {
slider.slider('values', 0, value);
slider.slider('values', 1, value);
}else{
if (ui.value == ui.values[0]) {
slider.slider('values', 0, value);
}else {
slider.slider('values', 1, value);
}
}