jquery ui слайдер с использованием дюймов

введите здесь описание изображения

Мне нужно использовать слайдер пользовательского интерфейса Jquery с дюймами.

Я знаю, как заставить ползунок работать со стандартными числами, например: от 0 до 100, но я не уверен, как заставить работать дюймы.

Я предполагаю, что необходим дополнительный расчет - может быть.

Любые советы о том, как заставить это работать?


html jquery jquery-ui jquery-ui-slider
person Adam    schedule 31.08.2012    source источник
comment
Если вы считаете в дюймах, почему вы не можете использовать их как «стандартные числа»? Просто посчитайте в дюймах и разделите на 12, чтобы получить фут и т. д.   -  person Richard de Wit    schedule 31.08.2012
comment
Проверьте этот вопрос и решение: stackoverflow.com/questions/11906088/ Здесь есть хороший jsFiddle с решением: jsfiddle.net/cpPFC   -  person Stefan Neubert    schedule 31.08.2012

Ответы (1)


arrow_upward
5
arrow_downward

Вот кое-что, с чего вам следует начать:

function toFeet(n) {
    return Math.floor(n / 12) + "'" + (n % 12) + '"';
}

$(function () {
    $("#slider").slider({
        min: 55,
        max: 85,
        values: [60, 80],
        range: true,
        slide: function(event, ui) {
            // ui.values[0] and ui.values[1] are the slider handle values.
            $("#result .min").html(toFeet(ui.values[0]));
            $("#result .max").html(toFeet(ui.values[1]));
        }
    });
});​

Все, что вам нужно сделать, это перевести минимальное и максимальное значения ползунка в дюймы. При перемещении ползунка вы можете отображать футы и дюймы, выполнив простое преобразование (реализованное здесь в методе toFeet).

Пример: http://jsfiddle.net/andrewwhitaker/4extL/57/< /а>

person Andrew Whitaker    schedule 31.08.2012