我在这里有这段代码:
$(function() {
$( document ).tooltip({
items: ".draggable ui-draggable ui-resizable",
track: true,
content: function(){
var time = $( this ).width();
if(time<0) {
time = 0;
}
var seconds = time%60;
var minutes = (time-seconds)/60;
var output;
if(minutes >= 10) {
output = ""+minutes;
} else {
output = "0"+minutes;
}
output += ":";
if(seconds >= 10) {
output += seconds;
} else {
output += "0"+seconds;
}
return output;
}
});
});
.draggable
类也是可拖动和可调整大小的,我需要在工具提示中显示动态更改的内容(时间hh / min)
如何动态更改工具提示中的内容?
演示:http://jsbin.com/erofot/119
为什么在调整div的大小时,工具提示内容不会动态更改?
答案 0 :(得分:0)
问题是每次工具提示显示时内容都会更新。每次调整div时都需要更新内容。
创建一个更新内容的函数,如下所示:
function updateTooltipContent() {
var time = $(this).width();
if (time < 0) {
time = 0;
}
var seconds = time % 60;
var minutes = (time - seconds) / 60;
var output;
if (minutes >= 10) {
output = "" + minutes;
} else {
output = "0" + minutes;
}
output += "h ";
if (seconds >= 10) {
output += seconds;
} else {
output += "0" + seconds;
}
return output + "min";
}
在.resizable初始化中,将resize参数设置为updateTooltipContent,如下所示:
// 3 make the clone resizable
.resizable({
resize: function(event, ui) {
var $this = $(event.currentTarget);
$this.tooltip('option', 'content', updateTooltipContent);
}
最后,在工具提示初始化中,将内容设置为updateTooltipContent,如下所示:
$(function () {
$(document).tooltip({
items: ".draggable",
track: true,
content: updateTooltipContent
});
});
修改:查看此fiddle。