jquery提示外掛程式qtip2使用 全面

2021-08-19 21:49:12 字數 2162 閱讀 6314

詳情參考:

基本用法:

(1)只有簡單提示

(2)帶標題的

(3)設定位置

content:

, position:,

style:

} });

my:是指三角的位置

at:是在提示在元件的相對位置

(top 上 bottom下  )( left左 right右center中)

兩組配合使用

(4)設定風格

content:

, position:,

style:

} });

classes可以有多種選擇

qtip-light淺色

qtip-dark 深色

qtip-cream

qtip-red

qtip-blue

qtip-shadow

qtip-rounded圓角

可以自定義 上面的qtip-purple就是我自己定義的

.qtip-purple.qtip-purple.qtip-titlebar 

background-color是內容的背景顏色

border-color:整個的邊框

color:文字的顏色

.qtip-purple.qtip-titlebar  設定的是標題的背景色

標題還可以設定標題文字顏色

(6)顯示 隱藏 重置等

顯示:$('#username').qtip('show');

隱藏:$('#username').qtip('hide');

$('.selector'

).qtip('reposition');

// reposition all tooltips belonging to the selected elements重置

該選擇器選中元素的提示元件

$('.selector'

).qtip('disable');

// disable all tooltips belonging to the selectedelements

該選擇器選中元素的提示元件設為不可用狀態

$('.selector'

).qtip('toggle',

true

);// 顯示該選擇器選中元素的提示元件

$('.selector'

).qtip(

'destroy'

,true

);// 直接銷毀屬於該選擇器選中元素的提示元件

(7)修改值

$(「#username」).qtip('api').set('content.text','這裡是內容');

$(「#username」).qtip('api').set('content.text','這裡是修改後的內容')..set('content.title','這裡是修改後的標題');

jQuery提示外掛程式 qTip簡單使用

簡介 qtip是jquery的一款提示外掛程式,使用比較簡單,在activiti工作流的流程追溯頁面使用到qtip外掛程式。使用步驟 3 一般情況下,將jquery.qtip.min.css和jquery.qtip.min.js放入專案中使用即可 4 在頁面引入css和js 5 需要加qtip提示的...

翻譯 jQuery之qTip外掛程式

查詢 jquery plugin,找到了qtip。所謂qtip,就是滑鼠放到上方時,顯示的訊息 英文叫做tooltip 和執行效果如下。prototype.js jquery extjs img 因為有例子程式,也有文件,所以學會了基本的用法。position是tooltip的表示位置。style的...

JQuery的Tooltip外掛程式 qtip 總結

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