2013-07-10 351 views
0

在這裏,我有這樣的代碼:更改內容動態

$(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 /分鐘)

如何我可以動態更改工具提示中的內容?

演示:http://jsbin.com/erofot/119

爲什麼提示內容不會動態改變,當我調整DIV?

回答

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初始化,調整大小參數設置爲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

+0

感謝,我會嘗試,然後標記你的答案 –

+0

somwhere是錯誤.resizable({ 調整大小:函數(事件,UI){ 變量$此= $(event.currentTarget); $ this.tooltip( 'option','content',updateTooltipContent); } –

+0

檢查出我添加的小提琴,它顯示代碼的功能 – drizzie