Jquery mobile jQuery移动滑块输出错误代码
我有一个带有滑块的页面，它连接到一个可缩放的图像。该滑块使用jQuery滑块插件，现在我想让该滑块对移动设备友好。 我开始只是添加了一个静态移动滑块。我添加了jQuery mobile css和js，并插入了如下输入[type=range]： 我没有添加标签，因为我发现它不是绝对必要的。 DOM中输出的代码如下：Jquery mobile jQuery移动滑块输出错误代码,jquery-mobile,slider,range,Jquery Mobile,Slider,Range,我有一个带有滑块的页面，它连接到一个可缩放的图像。该滑块使用jQuery滑块插件，现在我想让该滑块对移动设备友好。 我开始只是添加了一个静态移动滑块。我添加了jQuery mobile css和js，并插入了如下输入[type=range]： 我没有添加标签，因为我发现它不是绝对必要的。 DOM中输出的代码如下： 有人知道这里发生了什么吗？来自jQueryMobile文档 框架将查找类型为range和的所有输入元素 自动将其增强为带有相应输入的滑块 所以你所看到的是完全正常的。我假设你想摆脱旋转
有人知道这里发生了什么吗？来自jQueryMobile文档 框架将查找类型为range和的所有输入元素 自动将其增强为带有相应输入的滑块 所以你所看到的是完全正常的。我假设你想摆脱旋转器，只需要滑动条。你可以用两种方式来实现 1对输入类型使用data role=none。这将告诉jQuery移动框架不要增强输入类型，它将看起来像一个普通的html滑块 2通过操纵CSS隐藏微调器 我认为第二点会对你起作用 下面是一个示例代码，演示了我所说的内容
<!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>