是否有使用非等分值的 jquery 滑块的插件或示例?

2022-01-24 00:00:00 slider jquery javascript

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

I have found two excellent jquery plugins for generating a slider for a web form, which degrade nicely in browsers that do not support javascript have styles turned off etc.

首先是Jquery.UI版本:http://ui.jquery.com/演示/滑块/#steps

The first is the Jquery.UI version : http://ui.jquery.com/demos/slider/#steps

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

The second is a select element to slider : http://www.filamentgroup.com/lab/update_jquery_ui_16_slider_from_a_select_element/

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

However I need to create a slider that doesn't just divide the slider up in equal parts.

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

For example let's say I have the following range of numbers:

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

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

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

I'd like the slider to have a nice big gap between 800 and 1000 then smaller gaps between 1100-1500

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

So the slider would look a little like this:

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

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

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

Preferably I'd like it to degrade to a drop down, so the question is does anyone know of a plugin that supports this or has any recommendations for the best way of achieving this, customise the filamentgroup plugin roll my own etc.

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

Update: Been hacking about with filament group's slider and it implements the handles via JQuery UI's slider anyway. So it looks like modding JQuery.UI its self is the only option available. Will dig about in the code to see if I can find the requisite bit that needs changing. If in the meantime anyone has any ideas!!!

推荐答案

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

You could do it using jquery's slider by hooking into the slide event (effectively overriding it)... Something like this:

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

Should work for what you describe... I've tested it for dragging with the mouse & using left/right/home/end keys (obviously you'd need to change the left/right to up/down if you want a vertical slider).

一些注意事项:

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

希望对您有所帮助.

相关文章