poshy tip是一款非常友好的資訊提示工具,它基於jquery,當滑鼠滑向鏈結時,會出現乙個資訊提示條。資訊的內容直接可以在html裡設定也可以是從服務端呼叫的資料,該外掛程式還提供了很多屬性和方法。
檢視演示demo
xhtml
demo中提供了三種使用的例子,頁面**如下:
>1、id="tip1"
title="嗨。。這裡有個工具提示條!"
href="#"
>滑鼠滑上這裡看看
/>
>2、使用者名稱:
/>
id="user"
type="text"
size="30"
title="請輸入使用者名稱"
/>
/>
>3、服務端呼叫:
/>
id="remote"
href="#"
>滑鼠滑向這裡載入
當然,別忘了要載入jquery庫和poshytip外掛程式以及相關樣式。
rel="stylesheet"
href="src/tip-yellow/tip-yellow.css"
type="text/css"
/>
jquery
1、基本使用:
$("#tip1").poshytip();
$('#user').poshytip();
3、服務端呼叫:通過呼叫服務端ajax.php,獲得返回資料
$('#remote').poshytip();
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'),手動觸發啟用提示工具條
jQuery資訊提示工具Poshy Tip
poshy tip是一款非常友好的資訊提示工具,它基於jquery,當滑鼠滑向鏈結時,會出現乙個資訊提示條。資訊的內容直接可以在html裡設定也可以是從服務端呼叫的資料,該外掛程式還提供了很多屬性和方法。如下提供了三種使用的例子,如下 1.滑鼠滑上這裡看看 2.使用者名稱 3.服務端呼叫 滑鼠滑向這...
jQuery 側欄與工具提示 20130726
1 效果及功能說明 當滑鼠觸及到標題就會觸發乙個側顯示框來告訴基礎資訊 2 實現原理 主要是靠偽類來觸發效果,當提示框從左邊出來,讓後顯示出上面的資訊,獲得乙個定義好的類來修改上面的字型等資訊,當滑鼠離開後自動回去,並且刪除類,當滑鼠觸及到時多有動畫停止,確保了不會有重複的出現 主要的方法 this...
如何使用jQuery建立工具提示
這是乙個使用jquery建立工具提示訊息的簡單想法。確定需要顯示工具提示訊息的 目標 建立工具提示訊息和css樣式。三個功能 showtooltips,hidetooltips,changetooltipsposition。當滑鼠進入 目標 時,使用showtooltips顯示工具提示訊息,並使用c...