滑块在 jQuery Mobile 中不起作用

Posted 2023-02-22

【中文标题】滑块在 jQuery Mobile 中不起作用

【英文标题】：Slider not working in jQuery Mobile

【发布时间】：2011-12-11 18:51:52

【问题描述】：

我正在尝试 jQuery Mobile 中的滑块小部件，只是从文档中复制了代码：

    <div data-role="fieldcontain">
        <label for="slider">Input slider:</label>
        <input type="range" name="slider" id="slider" value="0" min="0" max="100"/>
    </div>

但这根本没有按预期工作。当我在 Safari 中拖动滑块时，数字几乎随机变化。它们从 0 增加到 9，然后在滑块的最右侧返回到 0，然后当我向后滑动时，它在 0 和 9 之间来回移动......

我是不是做错了什么？

我在 CodeIgniter 应用程序中使用它。

编辑：

我刚刚发现它在 iPhone 上运行时确实有效，但在桌面上的 Safari 中却不行。它仍然很奇怪，因为首先我需要它在桌面上工作以进行开发，其次，它可以在 jQuery Mobile 演示站点上工作......我试过查看那个代码，甚至完全复制它，但它仍然是在我的页面上不起作用。

我已经更新到 RC2，而演示页面上的脚本仍然是 beta 2，可以吗？

编辑 2：

不，不是这样...我检查了旧文档，但最新版本的新文档中的示例在他们的演示页面上也可以正常工作。所以这是另一回事。

【参考方案1】：

我注意到了同样的问题，但我相信这是由于使用了实验性的滚动视图...如果我注释掉我的滚动视图脚本，翻转开关滑块会再次起作用。

【参考方案2】：

请记住，jqueryMobile 1.0.1 版与 jquery 1.7.1 不完全兼容，这使得滑块无法在某些浏览器上运行。 尝试将 jquery 降级到 1.6.4 版，滑块应该开始工作

【讨论】：

感谢 JackNova，我已降级到 jQuery 1.6.4 并且它开始工作了。

谢谢您，您的解决方案有效。应该注意的是，jQuery Mobile 1.1.0-rc1 可以与 jQuery 1.7.1 一起使用，但它也更改了一些控件以具有新的默认外观（例如翻转开关）。

【参考方案3】：

我自己找到了答案。当我在 Safari 中查看网络检查器时，jQuery Mobile 样式表将输入字段的宽度设置为 50px。如果我将其增加到 70px，我注意到这些值实际上在增加，只是我之前只看到了左边的数字。奇怪的是，即使使用了相同的样式表，它在他们的演示站点上似乎也运行良好！无论如何，我通过覆盖该规则并将其设置为 70px 使其工作。

【讨论】：

抱歉，我不明白样式表是如何导致滑块中数字随机递增（更改）的问题？

嗯，我发现它们毕竟不是随机变化的，它只是这样出现，因为只有左边的数字是可见的。所以它从 1-9 开始增加，然后又回到 1（看似，但实际上是 10-11、20-21...等），最后回到最右边的 1（即 100）。为什么宽度在我的网站上不起作用，但在我不知道的演示网站上。我什至还没有可能导致它的自定义 css...

您使用的是什么视口？ 是推荐的

是的，这就是我所拥有的。直接取自 jQuery Mobile 文档。

【参考方案4】：

嗯不知道你的代码还有什么，这里是一个例子：

http://jsfiddle.net/sYQAu/1/

滑块文档：

http://jquerymobile.com/demos/1.0rc2/docs/forms/slider/index.html

HTML

<div data-role="page" id="slider-test">
    <div data-role="content">

        <label for="slider-0">Input slider:</label>
        <input type="range" name="slider-1" id="slider-0" value="2" min="0" max="10"  />
        <br />
        <div data-role="fieldcontain">
            <label for="slider">Input slider:</label>
            <input type="range" name="slider" id="slider" value="0" min="0" max="100"/>
        </div>

    </div>
</div>

顺便说一句，如果这很重要，我在 Ubuntu 10.04 上使用 Chrome，这可能是 Safari 桌面问题。尝试使用其他浏览器，因为您的代码对我来说看起来不错