jQuery Mobile Slider 输出错误代码答案

【问题标题】：jQuery Mobile Slider outputting wrong codejQuery Mobile Slider 输出错误代码
【发布时间】：2012-02-04 15:26:42
【问题描述】：

我有一个带有连接到可深度缩放图像的滑块的页面。该滑块使用 jQuery 滑块插件，现在我想让该滑块对移动设备友好。我从添加一个静态移动滑块开始。我添加了 jQuery mobile css 和 js 并插入了input[type="range"]：

<input type="range" id="zoomRange" value="25" min="0" max="100" />

我没有添加标签，因为我发现它不是绝对必要的。而DOM中的输出代码如下：

<input type="number" data-type="range" max="100" min="0" value="25" id="zoomRange"
       class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all ui-input-text ui-body-c ui-shadow-inset">
<a href="#" class="ui-slider-handle ui-state-default ui-corner-all ui-link" style="left: 0%;"></a>

有人知道这里发生了什么吗？

【问题讨论】：

标签： jquery-mobile slider range

【解决方案1】：

来自 jQueryMobile 文档

框架将找到所有 type="range" 的输入元素，并且自动将它们增强为带有随附输入的滑块

所以你看到的是完全正常的。我假设你想摆脱那个微调器，只用滑块。你可以通过两种方式做到这一点。

1) 使用 data-role="none" 和 input 类型。这将告诉 jQuery Mobile 框架不要增强输入类型，它看起来像一个普通的 html 滑块。

2) 通过操作 CSS 隐藏微调器。

我认为没有。 2 会为您解决问题。

这是一个示例代码，说明了我在说什么。

<!DOCTYPE html> 
<html>
<head>
  <title>Page Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href=
  "http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" type="text/css">
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js">
</script>
  <script type="text/javascript" src=
  "http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js">
</script>
  <style type="text/css">
       #slider-2{
         display:none;
         }
  </style>
</head>

<body>
  <div data-role="page" id="page1">
    <div data-role="header">
      <h1>Page1</h1>
    </div><!-- /header -->

    <div data-role="content" id="content">
      <div data-role="fieldcontain">
        <label for="slider-0">jQueryMobile Default</label> <input type="range" name=
        "slider" id="slider-0" value="25" min="0" max="100">
      </div>

      <div data-role="fieldcontain">
        <label for="slider-1">data-role='none'</label> <input type="range" name="slider"
        id="slider-1" value="25" min="0" max="100" data-role="none">
      </div>

      <div data-role="fieldcontain">
        <label for="slider-2">Spinner hidden</label> <input type="range" name="slider"
        id="slider-2" value="25" min="0" max="100">
      </div>
    </div><!-- /content -->
  </div><!-- /page -->
</body>
</html>

这里有一个演示 - http://jsfiddle.net/2SXV6/

如果有帮助请告诉我

【讨论】：