在带有多个手柄的jquery ui滑块上显示工具提示
在带有多个手柄的jquery ui滑块上显示工具提示
提问于 2018-06-10 03:03:59
我有一个带有多个手柄的Jquery ui滑块，我可以添加和删除它，我想在移动它的时候在手柄上方显示一个工具提示，这是我创建的代码：
var tooltip = $('<div id="tooltip" />').css({
position: 'absolute',
top: -25,
left: -10
}).hide();
var values = [10, 50, 70, 90];
var val = 20;
//add handle to the slider
$('button').bind('click', function(e) {
e.preventDefault();
$(".slider").slider("destroy");
values.push(val);
values = values.sort();
$(".slider").slider({
min: 0,
max: 100,
steps: 1,
values: values
})
})
//create the slider
$(".slider").slider({
min: 0,
max: 100,
steps: 1,
values: values,
slide: function(event, ui) {
tooltip.text(ui.value);
},
change: function(event, ui) {}
}).find(".ui-slider-handle").append(tooltip).hover(function() {
tooltip.show()
}, function() {
tooltip.hide()
});
//remove slider handle on double click
$(document).on('dblclick', '.ui-slider-handle', function() {
if ($('.ui-slider-handle').length > 2)
$(this).remove();
//alert($(this)[0].style.left);
})正如你在示例中看到的，工具提示运行良好，但它没有出现在正确的位置，而且它也不能与新创建的句柄一起工作。
有没有人能帮我一下？
谢谢
回答 1
Stack Overflow用户
发布于 2018-06-10 04:04:37
第一个问题:绑定已弃用，请使用on
当你销毁滑块时，你也移除了工具提示！
因此，在单击按钮时，在销毁滑块之前，您需要保留工具提示(jQuery.clone())的副本，以便再次使用它。
为了简化一切，你可以使用一个滑块创建函数。
为了解决最后一个问题(...but它没有出现在正确的位置)，你需要修改这行代码：
tooltip.text(ui.value);至：
$(this).find('div').text(ui.value);代码片段：
function createSlider(tooltip, values) {
$(".slider").slider({
min: 0,
max: 100,
steps: 1,
values: values,
slide: function(event, ui) {
$(this).find('div').text(ui.value);
},
change: function(event, ui) {}
}).find(".ui-slider-handle").append(tooltip).hover(function() {
$(".ui-slider-handle").find('div').hide()
$(this).find('div').show();
});
}
var tooltip = $('<div id="tooltip" />').css({
position: 'absolute',
top: -25,
left: -10
}).hide();
var values = [10, 50, 70, 90];
var val = 23;
$('button').on('click', function(e) {
e.preventDefault();
//
// preserve tooltip
//
tooltip = $('#tooltip').clone();
$(".slider").slider("destroy");
values.push(val);
values = values.sort();
createSlider(tooltip, values);
})
createSlider(tooltip, values);
$(document).on('dblclick', '.ui-slider-handle', function() {
if ($('.ui-slider-handle').length > 2)
$(this).remove();
//alert($(this)[0].style.left);
})body {
margin-top: 80px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<div class="slider"></div>
<br>
<button>Click it!</button>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50777574
复制相关文章
相似问题