[英]jquery-ui slider change value measurement
In my application I'm using jquery-ui
slider. 在我的应用程序中,我使用的是jquery-ui
滑块。 Users able to change value of slider from 1 (month) to 60 (month). 用户能够将滑块的值从1(月)更改为60(月)。 Actually 1-60 are months. 实际上1-60个月。 According to the new requirements after 11, value of slider should be changed to 1 (year), 2 (year) and so on. 根据11之后的新要求,滑块的值应改为1(年),2(年)等。 My concern is the following, can I have this kind of slider, which changes values measurement ? 我关注的是,我可以使用这种滑块,它会改变数值测量吗? If yes, pls give me example. 如果是的话,请举例说明。
Here is my source. 这是我的来源。
$(".slider").slider({
animate: true,
range: "min",
value: 1,
min: 1,
max: 60,
step: 1
});
Whilst this is not possible out of the box, 虽然这不是开箱即用的,
I have made a working fiddle for you here http://jsfiddle.net/JFJKP/ 我在这里为你做了一个工作小提琴http://jsfiddle.net/JFJKP/
HTML: HTML:
<div class="slider"></div>
<br/>
<div class='showAltValue'>Click to Show Alt Value</div>
JS: 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"));
});
This should at least get you on the right track. 这至少应该让你走上正轨。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.