下面是创建一个Fieldcontain Slider的完整攻略：
步骤1：引入jQuery Mobile库
在HTML文件中引入jQuery Mobile库：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Fieldcontain Slider</title>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css"/>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
</head>
<body>
</body>
</html>
步骤2：创建Fieldcontain容器
我们需要在body标签中创建一个容器，用于包装我们的Fieldcontain Slider。在这个示例中，我们使用<fieldset>标签来创建Fieldcontain容器，因为它更语义化。
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Choose a pet:</legend>
<!-- 将slider添加在这里 -->
</fieldset>
注意我们在<fieldset>标签中添加了两个属性data-role和data-type，其中data-role="controlgroup"用于指定Fieldcontain容器为一个控件组，data-type="horizontal"用于指定控件组中的元素水平排列。
步骤3：创建Slider
在Fieldcontain容器中添加一个Slider元素:
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Choose a pet:</legend>
<input type="range" name="slider" id="slider" value="0" min="0" max="100">
</fieldset>
在这个示例中，我们使用了<input>标签创建Slider，属性type="range"指定了Slider类型，属性name和id用于标识Slider，相关属性值value、min和max用于指定Slider的初始值、最小值和最大值。
步骤4：初始化Slider
在HTML文件中，添加以下JavaScript代码用于初始化Slider:
<script>
$(document).on("pagecreate","#page1",function(){
$("#slider").on("change",function(){
var val = $(this).val();
alert(val);
});
});
</script>
在这个示例中，我们在$(document).on("pagecreate","#page1",function(){})函数中注册了一个change事件，当Slider的值发生变化时触发该事件。在事件处理函数中，我们使用$(this).val()获取Slider的值，并将其展示出来。
示例1：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Fieldcontain Slider - 示例1</title>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css"/>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<script>
$(document).on("pagecreate","#page1",function(){
$("#slider").on("change",function(){
var val = $(this).val();
alert(val);
});
});
</script>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="content">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Choose a pet:</legend>
<input type="range" name="slider" id="slider" value="0" min="0" max="100">
</fieldset>
</div>
</div>
</body>
</html>
运行示例1，当Slider的值发生变化时会弹出一个对话框，显示当前Slider的值。
示例2：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Fieldcontain Slider - 示例2</title>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css"/>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<script>
$(document).on("pagecreate","#page1",function(){
$("#slider").on("change",function(){
var val = $(this).val();
$("#value").text(val);
});
});
</script>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="content">
<div data-role="fieldcontain">
<label for="slider">Slider:</label>
<input type="range" name="slider" id="slider" value="0" min="0" max="100">
<span id="value">0</span>
</div>
</div>
</div>
</body>
</html>
运行示例2，当Slider的值发生变化时，会动态更新旁边的文本框，显示当前Slider的值。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：如何使用jQuery Mobile创建一个Fieldcontain Slider - Python技术站
微信扫一扫 
支付宝扫一扫 