我有一个带有工具提示的jquery滑块控件。用户可以滑动以更改调整工具提示的值,或者用户可以在文本框中输入值,滑块和工具提示应调整文本框中的值。
请参阅随附的jfiddle http://jsfiddle.net/k2sarah/caUku/2/。
<div id='slider'></div>
<div id='slider2'></div>
<input id='t1' type='text' />
var initialValue = 2012;
var sliderTooltip = function(event, ui) {
var curValue = ui.value || initialValue;
var target = ui.handle || $('.ui-slider-handle');
var tooltip = '<div class="tooltip"><div class="tooltip-inner">' + curValue +
'</div><div class="tooltip-arrow"></div></div>';
$(target).html(tooltip);
}
$('#t1').change(function () {
var value = $('input[id$=t1]').val();
$("#slider").slider("value", parseInt(value));
sliderTooltip;
});
$("#slider").slider({
value: initialValue,
min: 1955,
max: 2015,
step: 1,
create: sliderTooltip,
slide: sliderTooltip
});
var sliderTooltip1 = function(event, ui) {
var curValue1 = ui.value || initialValue;
var target = ui.handle || $('.ui-slider-handle');
var tooltip = '<div class="tooltip"><div class="tooltip-inner">' + curValue1 +
'</div><div class="tooltip-arrow"></div></div>'; $(target).html(tooltip);
}
$("#slider2").slider({
value: initialValue,
min: 1955,
max: 2015,
step: 1,
create: sliderTooltip1,
slide: sliderTooltip1
});
以下代码调整滑块的值,但不会导致工具提示值反映到当前滑块值。
$('#t1').change(function () {
var value = $('input[id$=t1]').val();
$("#slider").slider("value", parseInt(value));
sliderTooltip;
});
任何帮助将不胜感激。
THKS 肯
答案 0 :(得分:1)
这是一个解决方案:jsFiddle
这将触发滑块的更改事件:
$('#t1').change(function () {
var value = $(this).val();
$(".slider").slider("value", parseInt(value));
});
现在我们必须听滑块内的更改事件:
change: function (event, ui) {
$(".tooltip-inner").html(ui.value);
}
整个滑块现在看起来像这样(因为你可以看到工具提示在创建时只设置了一次):
$(".slider").slider({
value: initialValue,
min: 1955,
max: 2015,
step: 1,
create: sliderTooltip,
slide: function (event, ui) {
$(".tooltip-inner").html(ui.value);
},
change: function (event, ui) {
$(".tooltip-inner").html(ui.value);
}
});
答案 1 :(得分:0)
您必须调用您的函数,尝试更改:
sliderTooltip;
为:
sliderTooltip();
答案 2 :(得分:0)
小提琴中的错误应该是:
$('#t1').change(function () {
var value = $('input#t1').val();
$("#slider1").slider("option", "value", parseInt(value, 10));
sliderTooltip();
});
编辑:
添加了change
事件以更新句柄值:
change: function (event, ui) {
$(".tooltip-inner", this).html(ui.value); /*thanks rusIn */
您可以将以下内容添加到slide:
以反映输入字段中的更改:
$('#t1').val(ui.value);
见工作fiddle