翻譯|使用教程|編輯:秦林|2022-11-25 10:02:12.453|閱讀 550 次
概述:本文給大家講解如何設(shè)置DHTMLX Gantt的甘特圖元素的工具提示,歡迎大家下載最新版試用體驗(yàn)。
# 界面/圖表報(bào)表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
相關(guān)鏈接:
本文給大家講解如何設(shè)置DHTMLX Gantt的甘特圖元素的工具提示,歡迎大家下載最新版試用體驗(yàn)。
工具提示可以讓您為用戶添加額外信息,而不會(huì)讓文本溢出屏幕。默認(rèn)情況下,工具提示會(huì)添加到甘特圖任務(wù)中。
您可以通過相應(yīng)的 API將工具提示添加到任何甘特圖元素。
要激活任務(wù)的工具提示,請(qǐng)使用gantt.plugins方法啟用工具提示插件:
<script>
gantt.plugins({
tooltip: true
});
gantt.init("gantt_here");
</script>
激活擴(kuò)展后,工具提示將自動(dòng)顯示為默認(rèn)設(shè)置。
默認(rèn)情況下,工具提示顯示任務(wù)的 3 個(gè)屬性:
要為工具提示設(shè)置自定義文本,請(qǐng)使用tooltip_text模板:
gantt.templates.tooltip_text = function(start,end,task){
return "<b>Task:</b> "+task.text+"<br/><b>Duration:</b> " + task.duration;
};
工具提示對(duì)象
您可以訪問工具提示的對(duì)象作為gantt.ext.tooltips.tooltip。該對(duì)象允許通過一組方法操作工具提示的位置、內(nèi)容和可見性:
設(shè)置方法
有幾種方法可以在將鼠標(biāo)懸停在 DOM 元素上時(shí)控制工具提示的行為。
(1)甘特圖.ext.tooltips.attach()
添加具有擴(kuò)展配置的工具提示。該方法將帶有工具提示設(shè)置的對(duì)象作為參數(shù)。可以通過該方法調(diào)整的設(shè)置如下:
selector - ( string ) 為要監(jiān)聽鼠標(biāo)事件的元素定義 CSS 選擇器
onmouseenter - (函數(shù))當(dāng)鼠標(biāo)指針進(jìn)入元素時(shí)調(diào)用的處理程序。參數(shù)是:event - ( Event ) 本地鼠標(biāo)事件和node - ( HTMLElement ) HTML 節(jié)點(diǎn)
onmousemove - (函數(shù))當(dāng)鼠標(biāo)指針在元素內(nèi)移動(dòng)時(shí)調(diào)用的處理程序。參數(shù)是:event - ( Event ) 本地鼠標(biāo)事件和node - ( HTMLElement ) HTML 節(jié)點(diǎn)
onmouseleave - (函數(shù))鼠標(biāo)指針離開元素時(shí)調(diào)用的處理程序。參數(shù)是:event - ( Event ) 本地鼠標(biāo)事件和node - ( HTMLElement ) HTML 節(jié)點(diǎn)
global - ( boolean ) 定義模塊是監(jiān)聽整個(gè)頁面上的鼠標(biāo)事件 ( true ) 還是只監(jiān)聽甘特圖元素內(nèi)的鼠標(biāo)事件 ( false )。默認(rèn)情況下,該選項(xiàng)設(shè)置為false。
(2)甘特圖.ext.tooltips.tooltipFor()
為指定的甘特圖元素添加工具提示。它是attach()方法的更簡(jiǎn)化版本。該方法將帶有工具提示詳細(xì)信息的對(duì)象作為參數(shù)。該對(duì)象具有以下屬性:
selector - ( string ) 甘特圖元素的 CSS 選擇器,用于添加工具提示
html - ( function ) 工具提示的模板。模板函數(shù)依次接受兩個(gè)參數(shù):event - ( Event ) 本地鼠標(biāo)事件和節(jié)點(diǎn)- ( HTMLElement ) HTML 節(jié)點(diǎn)并返回帶有模板的字符串。
global - ( boolean ) 可選,定義模塊是監(jiān)聽整個(gè)頁面上的鼠標(biāo)事件 ( true ) 還是只監(jiān)聽甘特圖元素內(nèi)的鼠標(biāo)事件 ( false )。默認(rèn)情況下,該選項(xiàng)設(shè)置為false。
(3)甘特圖.ext.tooltips.detach()
刪除工具提示。作為參數(shù),該方法采用:selector -(字符串)甘特圖元素的 CSS 選擇器
默認(rèn)情況下,工具提示僅添加到甘特圖任務(wù),但您也可以為任何其他甘特圖元素設(shè)置工具提示。例如,對(duì)于資源標(biāo)記:
為此, tooltip API中有兩個(gè)相應(yīng)的方法:gantt.ext.tooltips.tooltipFor ()
例如,這是為時(shí)間軸刻度的單元格添加工具提示的方法:
var domHelper = gantt.utils.dom; var pos = domHelper .getRelativeEventPosition(event, gantt.$task_scale); return gantt.templates.task_date(gantt.dateFromPos(pos.x));
注:甘特圖初始化完成后必須調(diào)用gantt.ext.tooltips.tooltipFor()方法。例如,您可以像這樣在onGanttReady事件處理程序中指定方法:
gantt.attachEvent("onGanttReady", function () {
var tooltips = gantt.ext.tooltips;
...
tooltips.tooltipFor({
selector: ".gantt_task_link",
html: function (event, node) {
...
}
});
...
gantt.init("gantt_here");
});
或者您可以使用以下方式:
gantt.init("gantt_here");
gantt.parse(tasks);
gantt.ext.tooltips.tooltipFor({
selector: ".gantt_task_cell",
html: function (event, domElement) {
var id = event.target.parentNode.attributes['task_id'].nodeValue;
var task = gantt.getTask(id);
return task.text;
}
});
該方法支持添加具有擴(kuò)展配置的工具提示,以根據(jù)鼠標(biāo)指針的移動(dòng)調(diào)整工具提示行為。
DHTMLX Gantt享有超十年聲譽(yù),支持跨瀏覽器和跨平臺(tái),性價(jià)比高,可滿足項(xiàng)目管理控件應(yīng)用的所有需求,是最完善的甘特圖圖表庫。
慧都2022年終狂歡火熱進(jìn)行中,全場(chǎng)產(chǎn)品超低價(jià),DHTMLX全系產(chǎn)品享8.8折!了解更多活動(dòng)詳情,歡迎訪問慧都網(wǎng)咨詢。
甘特圖控件交流群:764148812 歡迎進(jìn)群交流討論
慧都年終狂歡季,全場(chǎng)產(chǎn)品,限時(shí)特惠,立即了解詳情!
本站文章除注明轉(zhuǎn)載外,均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載,但請(qǐng)務(wù)必注明出處、不得修改原文相關(guān)鏈接,如果存在內(nèi)容上的異議請(qǐng)郵件反饋至chenjj@ke049m.cn