jQuery EasyUI 基礎(chǔ)插件 – Tooltip 提示框

2018-09-16 23:23 更新

jQuery EasyUI 基礎(chǔ)插件 - Tooltip 提示框

jQuery EasyUI 插件 jQuery EasyUI 插件

通過 $.fn.tooltip.defaults 重寫默認(rèn)的 defaults。

當(dāng)用戶移動鼠標(biāo)指針在某個元素上時，出現(xiàn)提示信息窗口用來顯示額外信息。提示內(nèi)容可以包含任何來自頁面的或者通過 ajax 生成的 html 元素。

用法

創(chuàng)建提示框（Tooltip）

1、從標(biāo)記創(chuàng)建提示框（Tooltip），添加 'easyui-tooltip' class 到元素，不需要任何的 javascript 代碼。

<a href="#" title="This is the tooltip message." class="easyui-tooltip">Hover me</a>

2、使用 javascript 創(chuàng)建提示框（Tooltip）。

<a id="dd" href="javascript:void(0)">Click here</a>

$('#dd').tooltip({
    position: 'right',
    content: '<span style="color:#fff">This is the tooltip message.</span>',
    onShow: function(){
		$(this).tooltip('tip').css({
			backgroundColor: '#666',
			borderColor: '#666'
		});
    }
});

屬性

名稱 類型 描述 默認(rèn)值
position string 提示框（tooltip）位置?？赡艿闹担?left'、'right'、'top'、'bottom'。 bottom
content string 提示框（tooltip）內(nèi)容。 null
trackMouse boolean 如果設(shè)置為 true，提示框（tooltip）會隨著鼠標(biāo)移動。 false
deltaX number 提示框（tooltip）位置的水平距離。 0
deltaY number 提示框（tooltip）位置的垂直距離。 0
showEvent string 引發(fā)提示框（tooltip）出現(xiàn)的事件。 mouseenter
hideEvent string 引發(fā)提示框（tooltip）消失的事件。 mouseleave
showDelay number 顯示提示框（tooltip）的時間延遲。 200
hideDelay number 隱藏提示框（tooltip）的時間延遲。 100

事件

名稱 參數(shù) 描述
onShow e 當(dāng)顯示提示框（tooltip）時觸發(fā)。
onHide e 當(dāng)隱藏提示框（tooltip）時觸發(fā)。
onUpdate content 當(dāng)提示框（tooltip）內(nèi)容更新時觸發(fā)。
onPosition left,top 當(dāng)提示框（tooltip）位置改變時觸發(fā)。
onDestroy none 當(dāng)提示框（tooltip）銷毀時觸發(fā)。

方法

名稱 參數(shù) 描述
options none 返回選項（options）屬性（property）。
tip none 返回提示（tip）對象。
arrow none 返回箭頭（arrow）對象。
show e 顯示提示框（tooltip）。
hide e 隱藏提示框（tooltip）。
update content 更新提示框（tooltip）內(nèi)容。
reposition none 重置提示框（tooltip）位置。
destroy none 銷毀提示框（tooltip）。
jQuery EasyUI 插件 jQuery EasyUI 插件
以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號