[英]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.