2

我正在开发一个简单的单页网站，并且正在集成jQuery UI Slider。我将其集成到的网站是：网站。

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

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

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

4

2 回答 2

5

  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

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

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

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

    事件结束后slide，Slider 返回动画手柄和范围（这实际上是第二次动画）。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;
    }
}

    对于 jPage：

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

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

于 2012-06-03T11:10:56.200 回答
1

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

查看您的代码后，您似乎很容易在 JS 和 CSS 方面具备足够的能力，可以自己复制其外观和核心行为，并使其完全按照您的意愿工作。

于 2012-06-01T11:32:38.713 回答