JQuery的Tooltip外掛程式 qtip 總結

2022-03-20 01:53:08 字數 4456 閱讀 5615

qtip是乙個基於jquery的tooltip外掛程式。它幾乎支援所有的主流瀏覽器,例如:

internet explorer 6.0+

firefox 2.0+

opera 9.0+

safari 3.0+

google chrome 1.0+

konqueror 3.5+

使用qtip可以很輕鬆的定義tip的位置以及樣式,同時qtip還有乙個強大的api......

使用qtip前,只需引入兩個js檔案即可:

view source

print

?1

html**

view source

print

?1

2

下面舉幾個比較簡單的例子。

1、basic text

html如下所示:

html** 

view source

print

?1

2

basic text

3

js**:

js**

view source

print

?01

02

效果如圖所示:

html如下所示:

html**

view source

print

?1

2

3

title attribute

4

js**:

view source

print

?01

02

效果如圖所示:

html如下所示:

html**

view source

print

?1

2

3

image

4

js**:

js** 

view source

print

?1

效果如圖所示:

html如下所示:

html** 

view source

print

?1

2

corner values

3

js**:

view source

print

?01

02

效果如圖所示:

html如下所示:

效果如圖所示:

html如下所示:

html** 

view source

print

?1

2

click me

3

js**:

view source

print

?01

js**

02

效果如圖所示:

html如下所示:

view source

print

?1

2

"content">

3

"#"rel="modal">click here

4

js**:

view source

print

?01

02

效果如圖所示:

關注 - 0

粉絲 - 0

關注博主1

0 0(請您對文章做出評價)

jquery 如何開發自己的jQuery外掛程式

1.在jquery命名空間內宣告乙個特定的命名 fn.hilight function 我們可以這樣呼叫 mydiv hilight 2.接收引數來控制外掛程式的行為 來為我們的hilight外掛程式新增指定前景和背景色的功能,我們需要在函式中允許乙個object型別的選項設定。如下所展示的那樣 f...

ToolTip控制項的應用

tooltip控制項是乙個簡單,但非常有用的控制項。它能夠為我們的軟體提供非常漂亮的提示資訊,提高軟體的可用性,給使用者比較好的體驗。假設現在有兩個按鈕,乙個用來預覽吊線世系圖,乙個用來預覽行轉。為了保持按鈕文字的簡潔,以及為按鈕尺寸所限。我們不能可能把這個按鈕的主要功能通過text屬性表述清楚,這...

jQuery之Validate表單校驗外掛程式

目錄 validate表單校驗 步驟 1.匯入jquery外掛程式 2.匯入validate外掛程式 3.匯入validate中文提示外掛程式 3.在頁面載入成功之後,對表單進行校驗 4.在validate中編寫校驗規則 模板 校驗器規則 validate 外掛程式為表單提供了強大的驗證功能,讓客戶...