是否有一个插件或jquery滑块的示例使用非均匀可分的值？ [英] Is there a plugin or example of a jquery slider working with non-equably divisible values?

问题描述

我找到了两个优秀的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/demos/slider /＃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它的self是唯一可用的选项。将在代码中挖掘，看看我是否能找到需要改变的必要位。如果在此期间任何人有任何想法!!!

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;
    }
});

应该适用于你描述的内容...我已经测试了它用鼠标拖放了使用左/右/主页/结束键（显然，如果你想要一个垂直滑块，你需要将左/右更改为向上/向下）。

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隐藏下拉列表，并根据选项创建值数组。然后你可以在更新上面代码中的滑块的同时更新（隐藏）下拉列表，这样当你的表单发布时，将在下拉列表中选择正确的值。

• Obviously the values array is whatever steps you want for your purposes.
• Also obviously, the above code assumes a div with an id of "slider" to work.
• It will probably work strangely if your min/max values are not the same as your min/max values for the slider (I would suggest just using "min: values[0], max: values[values.length - 1]" as your min/max options on the slider & then you should always be safe).
• Obviously this option won't currently degrade to a drop down list, but it would be very easy to do... simply render your choices as a normal drop down list (the default state incase of no javascript) & then use jquery to hide the drop down list and also create your values array based on the options. Then you could just update the (hidden) drop down list at the same time as you update the slider in the code above, so that when your form posts, the correct value will be selected in the drop down list.

希望有所帮助。

这篇关于是否有一个插件或jquery滑块的示例使用非均匀可分的值？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！