jQuery UI滑块:HTML中的值,最小值和最大值 [英] Jquery ui slider: value, min and max in the html
本文介绍了jQuery UI滑块:HTML中的值,最小值和最大值的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在用jquery-ui制作一些滑块,我有一个疑问,我该怎么做:
I am making some sliders with jquery-ui and i have a question how i can do the follow:
我有这个html代码:
I have this html code:
<div class="slider range-slide">
<b>A range slider:</b>
<span class="amount"></span>
<div class="slide"></div>
</div>
这是js:
$(".range-slide").each(function () {
var $this = $(this);
$(".slide", $this).slider({
values: [30, 60],
min: 0,
max: 100,
range: true,
slide: function (event, ui) {
$("span.amount", $this).html("" + ui.values[0] +
" - " + ui.values[1]);
}
});
$(".range-slide span.amount").html("" + $(".slide").slider("values", 0) +
" - " + $(".slide").slider("values", 1));
});
一切正常,但是我该怎么做:
Everyting is working fine but how can i do someting like this:
<div class="slider range-slide">
<b>A range slider:</b>
<span class="amount"></span>
<div class="slide" value="30,60" max="100" min="10"></div>
</div>
推荐答案
更改滑块以使用这些值.
Change your slider to use those values.
$(".slide", $this).slider({
values: [30, 60],
min: $(this).attr('min'),
max: $(this).attr('max'),
range: true,
slide: function(event, ui) {
$("span.amount", $this).html("" + ui.values[0] + " - " + ui.values[1]);
}
});
更新: 查看此小提琴
$(".range-slide div.slide").each(function() {
$(this).slider({
values: [30, 60],
min: parseInt($(this).attr('min')),
max: parseInt($(this).attr('max')),
range: true,
slide: function(event, ui) {
$("span.amount", $(this).parent()).html("" + ui.values[0] + " - " + ui.values[1]);
}
});
$(".range-slide span.amount").html("" + $(this).slider("values", 0) + " - " + $(this).slider("values", 1));
});
更新2 使用split以逗号分隔值并将其分配给变量. 小提琴
UPDATE 2 Use split to separate the values by commas and assign them to variables. Fiddle
$(".range-slide div.slide").each(function() {
values = $(this).attr('value').split(',');
firstVal = values[0];
secondVal = values[1];
$(this).slider({
values: [firstVal , secondVal],
min: parseInt($(this).attr('min')),
max: parseInt($(this).attr('max')),
range: true,
slide: function(event, ui) {
$("span.amount", $(this).parent()).html("" + ui.values[0] + " - " + ui.values[1]);
}
});
$(".range-slide span.amount").html("" + $(this).slider("values", 0) + " - " + $(this).slider("values", 1));
});
这篇关于jQuery UI滑块:HTML中的值,最小值和最大值的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文