奇怪的jQuery UI滑块行为

weird jQuery UI Slider behavior

本文关键字：UI jQuery      更新时间：2023-09-26

我正在开发一个简单的单页网站，我正在集成jQuery UI Slider。我正在集成它的网站是：网站。

似乎我的滑块有点问题。如果您在使用左右箭头（或左右键盘键）导航时仔细观察滑块，您会注意到，在向后移动时，在最后一步之前，最小范围会跳到手柄前面几个像素（背景图像）。

还有附加到手柄的 animate 属性在使用鼠标光标移动手柄时不起作用，据说手柄位于位置 0 并且您单击最后一个位置，通常它应该动画到最后一个位置但它跳到那里。

有人可以告诉我如何修复这些错误吗？我尝试在CSS上解决第一个问题，但似乎不是因为这个。

  1. "最小范围跳到手柄前面" - 我在这里减少了错误：http://jsfiddle.net/jefferyto/Gd5dn/

    这是对非像素值进行动画处理时jQuery.animate()中的错误;滑块使用百分比。在动画之前，jQuery 将元素的起始值（以像素为单位）转换为结束值的单位，并将此非 px 起始值分配给元素（jQuery 1.7.2 中的第 8601-8605 行（未缩小））。

    对于较小的结束值（如 0%），计算存在缺陷，因此范围的起始宽度大于应有的宽度。

    我已经打开了一个带有修复程序的拉取请求;同样的修复程序可以应用于当前稳定版本的jQuery。

    更新：您可以在此处找到修复此错误（适用于jQuery 1.7.2）的插件：http://jsfiddle.net/jefferyto/zbkQX/

    复制自（顶部）

    // Start jQuery.animate() fix

    to（在测试代码之前）

    // End jQuery.animate() fix

    如果您将此代码粘贴到插件中，它应该可以工作.js。

  2. "它应该动画到最后一个位置，但它跳到那里" - 这是因为 Slider 和 jPages 插件与循环回调连接。

    当用户单击滑块时，Slider 会触发slide事件，然后对手柄和范围进行动画处理。slide事件处理程序调用 jPages 以更改为新页面。jPages调用其分配的回调函数，该函数将当前页码传递回Slider。滑块设置其值并开始对手柄/范围进行动画处理。

    在slide事件之后，Slider 返回到对手柄和范围进行动画处理（这实际上是第二次对手柄和范围进行动画处理）。滑块在制作动画之前对元素进行.stop(1, 1)调用，这会导致第一个动画停止并立即跳转到其结束值。（第二个.animate()不执行任何操作，因为元素已经处于正确的位置。

    （我希望这是有道理的：-）

    我建议在 jPages 回调中添加逻辑，仅当触发器最初不是来自 Slider 时才使用新页码调用 Slider。

    更新：

    我认为您需要更新两个回调：

    对于滑块：

    slide: function(event, ui) {
    if (!self.paging) {
        self.paging = true;
        $(self.shop_navigation_class).jPages(ui.value);
        self.paging = false;
    }
}

    对于 jPages：

    callback: function(pages) {
    var data = {
        current_page: pages.current,
        total_pages: pages.count
    }
    self.set_local_storage_data(self.data_key, JSON.stringify(data));
    if (!self.paging) {
        self.paging = true;
        $(self.shop_slider_class).slider("value", pages.current);
        self.paging = false;
    }
}

    请让我知道这是否适合您。

最简单的答案可能是不使用jQueryUI的滑块。

看过你的代码后，看起来你很容易胜任JS和CSS的能力，可以自己复制它的外观和核心行为，并让它完全按照你想要的方式工作。

相关文章：