這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)?lái)有關(guān)jQuery信息提示工具是怎樣的，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。
Poshy Tip是一款非常友好的信息提示工具，它基于jQuery，當(dāng)鼠標(biāo)滑向鏈接時(shí)，會(huì)出現(xiàn)一個(gè)信息提示條。信息的內(nèi)容直接可以在HTML里設(shè)定也可以是從服務(wù)端調(diào)用的數(shù)據(jù)，該插件還提供了很多屬性和方法。
Demo中提供了三種使用的例子，頁(yè)面代碼如下：
2、用戶名： 3、服務(wù)端調(diào)用:
鼠標(biāo)滑向這里加載圖片
當(dāng)然，別忘了要加載jquery庫(kù)和poshytip插件以及相關(guān)樣式。
1、基本使用：
$("#tip1").poshytip();
2、表單提示：當(dāng)輸入框獲得焦點(diǎn)時(shí)，在右側(cè)會(huì)出現(xiàn)提示工具條
$('#user').poshytip({
className: 'tip-yellowsimple',
showOn: 'focus',
alignTo: 'target',
alignX: 'right',
alignY: 'center',
offsetX: 5
});
3、服務(wù)端調(diào)用：通過(guò)調(diào)用服務(wù)端ajax.php，獲得返回?cái)?shù)據(jù)
$('#remote').poshytip({
alignY: 'bottom',
content: function(updateCallback) {
$.get('ajax.php?id=1',function(msg){
updateCallback(msg);
});
return 'Loading...';
}
});
參數(shù)/方法 描述 content 提示工具條中的內(nèi)容，默認(rèn)是從元素的title屬性中獲取。 className 提示工具條的樣式 showTimeout 提示工具條出現(xiàn)前的過(guò)渡時(shí)間 hideTimeout 提示工具條消失的過(guò)渡時(shí)間 showOn 提示工具條觸發(fā)方式，有'hover', 'focus', 'none'三種方式 alignX 提示工具條出現(xiàn)在水平方向相對(duì)當(dāng)前元素的位置，有'right', 'center', 'left', 'inner-left', 'inner-right' alignY 提示工具條出現(xiàn)在垂直方向相對(duì)當(dāng)前元素的位置，有'bottom', 'center', 'top', 'inner-bottom', 'inner-top' offsetX 相對(duì)X方向位移，數(shù)字 offsetY 相對(duì)Y方向位移，數(shù)字 hideTimeout 工具條消失的過(guò)渡時(shí)間 hideTimeout 工具條消失的過(guò)渡時(shí)間 hideTimeout 工具條消失的過(guò)渡時(shí)間 offsetY 相對(duì)Y方向位移，數(shù)字 allowTipHover 允許鼠標(biāo)滑向工具條上方 fade 是否使用漸隱漸顯動(dòng)畫，true/false slide 是否使用滑動(dòng)動(dòng)畫，true/false 方法：show .poshytip('show')，手動(dòng)觸發(fā)顯示提示工具條 方法：hide .poshytip('hide')，手動(dòng)觸發(fā)隱藏提示工具條 方法：disable .poshytip('disable')，手動(dòng)觸發(fā)禁用提示工具條 方法：enable .poshytip('enable')，手動(dòng)觸發(fā)啟用提示工具條
上述就是小編為大家分享的jQuery信息提示工具是怎樣的了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
重慶分公司
重慶分公司
