试图获取当前位置的工具提示
Trying to get Tooltip for the Current Position
我有一个滑块和一个小的输入文本框,它会根据您在其上滚动的位置进行更新。
这里是 javascript:
$(function() {
var tooltip = $('<div id="tooltip" />').css({
position: 'absolute',
top: -25,
left: -10
}).hide();
$("#client-slider").slider({
range: "min",
value: 30,
min: 15,
max: 300,
slide: function(event, ui) {
$('#client').val(ui.value).trigger("change");
tooltip.text(ui.value);
},
change: function(event, ui) {}
}).find(".ui-slider-handle").append(tooltip).hover(function() {
tooltip.show();
}, function() {
tooltip.hide();
});
});
$("#client").val($("#client-slider").slider("value"));
}
这里是 html/css:
<input type="text" id="client" style="width:50px;text-align:center"/>
<div id="slider"></div>
我遇到无法在我的滑块上显示工具提示的错误
**请注意它不是任何现有问题的重复 - 我试图从这个 answer 中获得帮助,但都是徒劳的
从旧帖子中获取答案通常不是一个好主意。此实现更新且更简单:
document.getElementById("slider").addEventListener("input", function(event) {
document.getElementById("budget").value = event.target.value;
})
<input type="text" id="budget" style="width:50px;text-align:center"/>
<input id="slider" type="range" min="15" max="300" value="15"/>
完整代码:
<input type="text" id="budget" style="width:50px;text-align:center"/>
<input id="slider" type="range" min="15" max="300" value="15"/>
<script type="text/javascript">
document.getElementById("slider").addEventListener("input", function(event) {
document.getElementById("budget").value = event.target.value;
})
</script>
对于 JQUERY 实现 基于此 answer:
var tooltip = $('<div id="tooltip" />').css({
position: 'absolute',
top: -25,
left: -10
}).hide();
$("#slider").slider({
value: 500,
min: 0,
max: 1000,
step: 50,
slide: function(event, ui) {
tooltip.text((ui.value/1000)*100 + "%");
$( "#client" ).val((ui.value/1000)*100 + "%");
},
change: function(event, ui) {}
}).find(".ui-slider-handle").append(tooltip).hover(function() {
tooltip.show()
}, function() {
tooltip.hide()
})
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/smoothness/jquery-ui.css">
<input type="text" id="client" style="width:50px;text-align:center"/>
<div id="slider" style="margin:50px"></div>
<!-- Get ajax -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
在 fiddle 上也试试。
我有一个滑块和一个小的输入文本框,它会根据您在其上滚动的位置进行更新。
这里是 javascript:
$(function() {
var tooltip = $('<div id="tooltip" />').css({
position: 'absolute',
top: -25,
left: -10
}).hide();
$("#client-slider").slider({
range: "min",
value: 30,
min: 15,
max: 300,
slide: function(event, ui) {
$('#client').val(ui.value).trigger("change");
tooltip.text(ui.value);
},
change: function(event, ui) {}
}).find(".ui-slider-handle").append(tooltip).hover(function() {
tooltip.show();
}, function() {
tooltip.hide();
});
});
$("#client").val($("#client-slider").slider("value"));
}
这里是 html/css:
<input type="text" id="client" style="width:50px;text-align:center"/>
<div id="slider"></div>
我遇到无法在我的滑块上显示工具提示的错误
**请注意它不是任何现有问题的重复 - 我试图从这个 answer 中获得帮助,但都是徒劳的
从旧帖子中获取答案通常不是一个好主意。此实现更新且更简单:
document.getElementById("slider").addEventListener("input", function(event) {
document.getElementById("budget").value = event.target.value;
})
<input type="text" id="budget" style="width:50px;text-align:center"/>
<input id="slider" type="range" min="15" max="300" value="15"/>
完整代码:
<input type="text" id="budget" style="width:50px;text-align:center"/>
<input id="slider" type="range" min="15" max="300" value="15"/>
<script type="text/javascript">
document.getElementById("slider").addEventListener("input", function(event) {
document.getElementById("budget").value = event.target.value;
})
</script>
对于 JQUERY 实现 基于此 answer:
var tooltip = $('<div id="tooltip" />').css({
position: 'absolute',
top: -25,
left: -10
}).hide();
$("#slider").slider({
value: 500,
min: 0,
max: 1000,
step: 50,
slide: function(event, ui) {
tooltip.text((ui.value/1000)*100 + "%");
$( "#client" ).val((ui.value/1000)*100 + "%");
},
change: function(event, ui) {}
}).find(".ui-slider-handle").append(tooltip).hover(function() {
tooltip.show()
}, function() {
tooltip.hide()
})
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/smoothness/jquery-ui.css">
<input type="text" id="client" style="width:50px;text-align:center"/>
<div id="slider" style="margin:50px"></div>
<!-- Get ajax -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
在 fiddle 上也试试。