10

我发现了两个出色的 jquery 插件，用于为 Web 表单生成滑块，它们在不支持 javascript 的浏览器中很好地降级，关闭了样式等。

第一个是 Jquery.UI 版本：http ://ui.jquery.com/demos/slider/#steps

第二个是滑块的选择元素：http ://www.filamentgroup.com/lab/update_jquery_ui_16_slider_from_a_select_element/

但是，我需要创建一个不只是将滑块分成相等部分的滑块。

例如，假设我有以下数字范围：

800,1000,1100,1200,1300,1400,1500

我希望滑块在 800 和 1000 之间有一个很好的大间隙，然后在 1100-1500 之间有更小的间隙

所以滑块看起来有点像这样：

800----1000--1100--1200--1300--1400--1500

最好我希望它降级为下拉菜单，所以问题是有没有人知道支持此功能的插件或有任何建议以实现此功能的最佳方式，自定义灯丝组插件滚动我自己的等等。

更新：一直在使用灯丝组的滑块进行破解，无论如何它都通过 JQuery UI 的滑块实现了句柄。所以看起来修改 JQuery.UI 它的自身是唯一可用的选项。将在代码中挖掘，看看我是否能找到需要更改的必要位。如果在此期间有人有任何想法！

4

2 回答 2

27

您可以通过挂钩到幻灯片事件（有效地覆盖它）来使用 jquery 的滑块来做到这一点......这样的事情：

$(function() {
    var values = [0, 10, 50, 60, 70, 80, 90, 91, 92, 93, 94, 95, 100];
    var slider = $("#slider").slider({
        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));
            return false;
        }
    });
    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;
    }
});

应该适用于您所描述的...我已经测试了它是否可以使用鼠标拖动并使用左/右/home/end 键（显然，如果您想要垂直，您需要将左/右更改为上/下滑块）。

一些注意事项：

  • 显然，值数组是您想要的任何步骤。
  • 同样显然，上面的代码假设一个 id 为“slider”的 div 可以工作。
  • 如果您的最小值/最大值与滑块的最小值/最大值不同（我建议只使用“min：values [0]，max：values [values.length - 1]”作为您在滑块上的最小/最大选项，那么您应该始终是安全的）。
  • 显然这个选项目前不会降级为下拉列表，但它会很容易做到......只需将您的选择呈现为正常的下拉列表（默认状态为无 javascript）然后使用 jquery 隐藏下拉列表，并根据选项创建您的值数组。然后，您可以在更新上面代码中的滑块的同时更新（隐藏）下拉列表，这样当您的表单发布时，将在下拉列表中选择正确的值。

希望有帮助。

于 2009-03-26T03:04:04.773 回答
0

在 Es6 中，您可以通过以下方式找到离您最近的号码 ..

function findClosest(array, value) {
  return array.sort( (a, b) => Math.abs(value - a) - Math.abs(value - b) )[0];
}

let array = [1, 5, 10, 28, 21];
let v = 4;
let number = findClosest(array, v); // -> 5

于 2016-11-30T13:14:14.040 回答