使用英寸的 jquery ui 滑块

Posted 2023-05-08

【中文标题】使用英寸的 jquery ui 滑块

【英文标题】：jquery ui slider using Inches

【发布时间】：2012-08-26 07:01:18

【问题描述】：

我需要使用带有英寸的 Jquery UI 滑块。

我知道如何让滑块使用标准数字，例如：0 到 100，但我不确定如何让英寸工作。

我假设需要额外的计算 - 也许。

关于如何让这个工作的任何建议？

【问题讨论】：

如果您以英寸为单位计算，为什么不能将它们用作“标准数字”？只需以英寸为单位除以 12 即可得到一英尺等

检查这个问题和解决方案：***.com/questions/11906088/… 这里有一个不错的 jsFiddle 解决方案：jsfiddle.net/cpPFC

【参考方案1】：

以下内容应该可以帮助您入门：

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/