[英]jquery-ui slider change value measurement
在我的应用程序中,我使用的是jquery-ui
滑块。 用户能够将滑块的值从1(月)更改为60(月)。 实际上1-60个月。 根据11之后的新要求,滑块的值应改为1(年),2(年)等。 我关注的是,我可以使用这种滑块,它会改变数值测量吗? 如果是的话,请举例说明。
这是我的来源。
$(".slider").slider({
animate: true,
range: "min",
value: 1,
min: 1,
max: 60,
step: 1
});
虽然这不是开箱即用的,
我在这里为你做了一个工作小提琴http://jsfiddle.net/JFJKP/
HTML:
<div class="slider"></div>
<br/>
<div class='showAltValue'>Click to Show Alt Value</div>
JS:
$(".slider").slider({
animate: true,
range: "min",
value: 1,
min: 1,
max: 60,
altValue: 'Nothing Selected',
step: 1,
change: function (event, ui) {
value = ui.value;
years = Math.floor(value / 12);
months = value % 12 // value modulus of 12 gives remainder
if (years > 1) {
yearString = 'years';
} else {
yearString = 'year';
}
if (months > 1 && months != 0) {
monthString = 'months';
} else {
monthString = 'month';
}
// Now format the output.
if (years == 0) {
altValue = months + ' ' + monthString;
} else {
if (months == 0) {
//dont' show months
altValue = years + ' ' + yearString;
} else {
altValue = years + ' ' + yearString + ' ' + months + ' ' + monthString;
}
}
// Now alert the altValue
alert(altValue);
// You can now use this as a label Value somewhere and even store it as a slider attribute as such
$(event.target).slider("option", "altValue", altValue);
}
});
$('.showAltValue').click(function () {
alert($('.slider').slider("option", "altValue"));
});
这至少应该让你走上正轨。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.