Question

我在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，而演示页面上的脚本仍然是测试版2，可能就是这样吗？

编辑2：

不，那不是它......我检查过旧的文档，但是最新版本的新文档中的示例在他们的演示页面上也运行良好。所以这是另一回事。

Answer 1

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

Answer 2

嗯，不确定你的代码中还有什么，这是一个例子：

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

Slider Docs：

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>

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

Answer 3

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

Answer 4

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

滑块不在jQuery Mobile中工作

4 个答案: