javascript - 是否有使用不可等分值的 jquery slider 的插件或示例？

Question

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

首先是 Jquery.UI 版本:http://ui.jquery.com/demos/slider/#steps

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

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

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

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

我希望 slider 在 800 和 1000 之间有一个很大的差距，然后在 1100-1500 之间有一个较小的差距

所以 slider 看起来有点像这样:

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

最好我希望它降级为下拉菜单，所以问题是有没有人知道支持这个的插件或者有任何关于实现这个的最佳方法的建议，自定义 filamentgroup 插件等等。

更新:一直在研究 filament group 的 slider ，它无论如何都是通过 JQuery UI 的 slider 实现句柄的。所以看起来修改 JQuery.UI 本身是唯一可用的选项。将在代码中挖掘，看看我是否能找到需要更改的必要位。如果在此期间有人有任何想法!!!

Answer 1

您可以使用 jquery 的 slider 通过 Hook 到 slide 事件(有效地覆盖它)来做到这一点......像这样:

$(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 键(显然，如果您需要将左/右更改为上/下想要一个垂直 slider )。

一些注意事项:

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

希望对您有所帮助。