jQuery信息提示工具

?

官方地址：http://www.sharejs.com/code/jquery/plugin/poshytip-1.0/demo/index.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、服務端調用:<br/>?
??<a?id="remote"?href="#">鼠標滑向這里加載圖片</a>?
</p>?

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

?
<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、表單提示：當輸入框獲得焦點時，在右側會出現提示工具條

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

3、服務端調用：通過調用服務端ajax.php，獲得返回數據

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

參數和方法一覽表

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

更多信息請訪問Poshy Tip官方網站：http://vadikom.com/tools/poshy-tip-jquery-plugin-for-stylish-tooltips/

轉載于:https://www.cnblogs.com/cschenk/p/3829809.html

總結

以上是生活随笔為你收集整理的Jquery 提示插件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。