jQuery信息提示工具是怎樣的

這期內(nèi)容當中小編將會給大家?guī)碛嘘P(guān)jQuery信息提示工具是怎樣的，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

Poshy Tip是一款非常友好的信息提示工具，它基于jQuery，當鼠標滑向鏈接時，會出現(xiàn)一個信息提示條。信息的內(nèi)容直接可以在HTML里設(shè)定也可以是從服務(wù)端調(diào)用的數(shù)據(jù)，該插件還提供了很多屬性和方法。

HTML

Demo中提供了三種使用的例子，頁面代碼如下：

<p>1、<a id="tip1" title="嗨。。這里有個工具提示條！" href="#">鼠標滑上這里看看</a></p> <br/> <p>2、用戶名：<br/><input id="user" type="text" size="30" title="請輸入用戶名" /></p> <br/> <p>3、服務(wù)端調(diào)用:<br/>  <a id="remote" href="#">鼠標滑向這里加載圖片</a> </p>

當然，別忘了要加載jquery庫和poshytip插件以及相關(guān)樣式。

<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="src/jquery.poshytip.js"></script> <link rel="stylesheet" href="src/tip-yellow/tip-yellow.css" type="text/css" />

jQuery

1、基本使用：

$("#tip1").poshytip();

2、表單提示：當輸入框獲得焦點時，在右側(cè)會出現(xiàn)提示工具條

$('#user').poshytip({ className: 'tip-yellowsimple', showOn: 'focus', alignTo: 'target', alignX: 'right', alignY: 'center', offsetX: 5 });

3、服務(wù)端調(diào)用：通過調(diào)用服務(wù)端ajax.php，獲得返回數(shù)據(jù)

$('#remote').poshytip({ alignY: 'bottom', content: function(updateCallback) { $.get('ajax.php?id=1',function(msg){ updateCallback(msg); }); return 'Loading...'; } });

參數(shù)和方法一覽表

參數(shù)/方法            描述        content            提示工具條中的內(nèi)容，默認是從元素的title屬性中獲取。        className            提示工具條的樣式        showTimeout            提示工具條出現(xiàn)前的過渡時間        hideTimeout            提示工具條消失的過渡時間        showOn            提示工具條觸發(fā)方式，有'hover', 'focus', 'none'三種方式        alignX            提示工具條出現(xiàn)在水平方向相對當前元素的位置，有'right', 'center', 'left', 'inner-left', 'inner-right'        alignY            提示工具條出現(xiàn)在垂直方向相對當前元素的位置，有'bottom', 'center', 'top', 'inner-bottom', 'inner-top'        offsetX            相對X方向位移，數(shù)字        offsetY            相對Y方向位移，數(shù)字        hideTimeout            工具條消失的過渡時間        hideTimeout            工具條消失的過渡時間        hideTimeout            工具條消失的過渡時間        offsetY            相對Y方向位移，數(shù)字        allowTipHover            允許鼠標滑向工具條上方        fade            是否使用漸隱漸顯動畫，true/false        slide            是否使用滑動動畫，true/false        方法：show            .poshytip('show')，手動觸發(fā)顯示提示工具條        方法：hide            .poshytip('hide')，手動觸發(fā)隱藏提示工具條        方法：disable            .poshytip('disable')，手動觸發(fā)禁用提示工具條        方法：enable            .poshytip('enable')，手動觸發(fā)啟用提示工具條

上述就是小編為大家分享的jQuery信息提示工具是怎樣的了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道。