Question

我正在使用jQuery UI滑块，但由于某些标签重叠，我想更改使用的百分比步骤。

例如，我有四个步骤，min:0, max:3。该插件按比例划分步骤（在css中，left: 0%, 33%, 66%, 100%）

但我想更改这些以允许标签显示没有任何重叠，但保留四个步骤（例如left:0%, 20%, 45%, 90%）。

我所做的是

$j( "span.ui-slider-pip.ui-slider-pip-label.ui-slider-pip-1" ).css('left','20%');

以及其他百分比等等。这会按照我喜欢的方式移动标签，但是当我滑动它时，实际的滑块手柄不匹配，因为它使用的是原始百分比。我正在查看插件代码，但在这种特殊情况下无法看到我如何影响它。

如何更改jQuery以将滑块移动到我的自定义百分比？

Answer 1

如果不在滑块插件核心中重写_trimAlignValue()方法，则无法实现...

$.ui.slider.prototype._trimAlignValue = function() {
    /* your logic here */
};

以下是参考源代码：
https://github.com/jquery/jquery-ui/blob/master/ui/slider.js#L518-L537

我做了很快的游戏，你应该得到一种理想的效果：

$.ui.slider.prototype._trimAlignValue = function(v) { 
    if( v < 0.3 ) {
        return parseFloat( 0 );
    } else if( v < 1 ) {
        return parseFloat( 0.6 );
    } else if( v < 2 ) {
        return parseFloat( 1.35 );
    } else {
        return parseFloat( 2.7 );
    }
}

只要您将滑块的max保持在 3 ，将min保持在 0 。但您可能还需要重新调整pips以匹配此修剪对齐的值。此外，您需要将ui.value输出转换为您想要的任何内容，但这应该很简单。

最好，Simey。

jquery ui slider pips改变百分比步骤

1 个答案: