jQuery資訊提示工具 Poshy Tip

2021-06-21 00:36:26 字數 1976 閱讀 1794

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...