如何使用 jQuery 滑块显示文本值?
How to display text values with jQuery slider?
我的目标是制作一个滑块,滑动时会更改信息文本。
不幸的是,jQuery 移动文档仅显示数值:http://demos.jquerymobile.com/1.4.5/slider/
目前我正在使用 select 字段:
<select name="condition" id="filter_condition">
<option value="18">Average</option>
<option value="13">Good</option>
<option value="277">Bad</option>
</select>
如本例所示,值不是 1-3 且顺序不对。
我不想显示 select 字段,而是显示一个滑块,左边是坏的,右边是好的。
这在 jQuery 手机上可行吗?我只找到了带有数值的示例。
无法完全理解为什么不对您的值进行排序,但无论如何,这是我的建议。
如果这不是您所期望的,请随时更新您的问题并提供更多详细信息。
在您的示例中,您只需要创建与您的选项对应的三个滑块扇区,显然,它们之间的关系。使用 cases[val].value
筛选出您需要的内容。 input.change
活动是你的朋友。
$(document).on("pagecreate", "#page-one", function() {
var cases = [{value:277, label:"bad"},{value:18, label:"average"},{value:13, label:"good"}];
$(".full-width-slider input").on("change", function() {
var val = ($(this).val()/100)|0;
$(".full-width-slider h3").text(cases[val].label);
});
});
/* Hide the number input */
.full-width-slider input {
display: none !important;
}
.full-width-slider .ui-slider-track {
margin-left: 15px;
}
.full-width-slider h3 {
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
</head>
<body>
<div id="page-one" data-role="page">
<div role="main" class="ui-content">
<div class="full-width-slider">
<h3 class="ui-bar ui-bar-a ui-corner-all">bad</h3>
<input type="range" min="0" max="299" value="0" autocomplete="off" />
</div>
</div>
</div>
</body>
</html>
这是关于 slider
事件的另一个例子:
我的目标是制作一个滑块,滑动时会更改信息文本。
不幸的是,jQuery 移动文档仅显示数值:http://demos.jquerymobile.com/1.4.5/slider/
目前我正在使用 select 字段:
<select name="condition" id="filter_condition">
<option value="18">Average</option>
<option value="13">Good</option>
<option value="277">Bad</option>
</select>
如本例所示,值不是 1-3 且顺序不对。
我不想显示 select 字段,而是显示一个滑块,左边是坏的,右边是好的。
这在 jQuery 手机上可行吗?我只找到了带有数值的示例。
无法完全理解为什么不对您的值进行排序,但无论如何,这是我的建议。
如果这不是您所期望的,请随时更新您的问题并提供更多详细信息。
在您的示例中,您只需要创建与您的选项对应的三个滑块扇区,显然,它们之间的关系。使用 cases[val].value
筛选出您需要的内容。 input.change
活动是你的朋友。
$(document).on("pagecreate", "#page-one", function() {
var cases = [{value:277, label:"bad"},{value:18, label:"average"},{value:13, label:"good"}];
$(".full-width-slider input").on("change", function() {
var val = ($(this).val()/100)|0;
$(".full-width-slider h3").text(cases[val].label);
});
});
/* Hide the number input */
.full-width-slider input {
display: none !important;
}
.full-width-slider .ui-slider-track {
margin-left: 15px;
}
.full-width-slider h3 {
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
</head>
<body>
<div id="page-one" data-role="page">
<div role="main" class="ui-content">
<div class="full-width-slider">
<h3 class="ui-bar ui-bar-a ui-corner-all">bad</h3>
<input type="range" min="0" max="299" value="0" autocomplete="off" />
</div>
</div>
</div>
</body>
</html>
这是关于 slider
事件的另一个例子: