js實例教程-qTip2 精緻的基於jQuery提示信息插件

发布时间:2018-11-23 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了js實例教程-qTip2 精緻的基於jQuery提示信息插件脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小寶典致力於為廣大程序猿(媛)提供高品質的代碼服務,請大家多多光顧小站,小寶典在此謝過。

qTip2採用了MIT/GPLv2許可,官方網站為:https://craigsworks.COM/PRojects/qtip2/,目前還沒發布一個穩定版,Nightly版本經常會更新,當然這並不影響正常使用。
簡介
若不放心可以嘗試舊版的qTip,但在一些參數上會有所不同;若是從qTip升級到qTip2,可以使用官方提供的轉換工具來升級你的代碼:https://craigsworks.com/projects/qtip2/converter/。

如果使用時出現問題,那麼直接下載以下3個文件吧,至少官方演示很正常:

代碼如下:


<link href="https://craigsworks.com/projects/qtip2/packages/latest/jquery.qtip.min.css" rel="stylesheet" />
<script src="https://ajax.GOOGLEapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://craigsworks.com/projects/qtip2/packages/latest/jquery.qtip.min.js"></script>


從官方網站下載最新版本時,可以選擇相應的樣式及插件;可選的樣式包括幾種色彩風格(Colour Styles)、CSS3相關樣式如圓角;以及以下各種插件,可根據自己需要選擇:
  1. Ajax,這個不用說,請求遠程內容的
  2. Tips,氣泡對話效果,如箭頭
  3. Modal,模態對話框效果,如jQuery UI DiaLOG / ThickBox 的效果
  4. Image map,提供對map內area標記的提示支持
  5. SVG,對SVG元素提供提示的支持
  6. BGIFrame,用於IE6這種古董,如遮住select控件等

除了以上插件的功能外,它的主要功能有(僅列出較常用的):

  1. 設置提示的內容、標題、關閉按鈕等
  2. 使用元素的屬性,來作為提示信息內容,如鏈接的標題(<a title="提示信息")、圖片的提示(<img src="提示信息")等等
  3. 提示信息顯示的位置
  4. 提示信息的目標,即顯示到什麼元素上
  5. 提示信息顯示/隱藏觸發的事件,如鼠標移到元素上、點擊(mouseenter,click)
  6. 提示信息顯示/隱藏的效果
  7. 外觀的定義,通過相應樣式設置
  8. 跟隨可拖動目標、鼠標指針等

使用方法
以下就簡單演示一些使用方法

創建一個最簡單的提示:
&nbsp;

. 代碼如下:


$("#demo2").qtip({
content: "這是提示內容(by逶攏"
});


創建一個帶標題的提示:

. 代碼如下:


$("#demo3").qtip({
content: {
text: "這是提示內容(by逶 lwme.cnblogs.com)"
, title: "提示標題"
}
});


帶關閉按鈕的提示:

. 代碼如下:


$("#demo3").qtip({
content: {
text: "這是提示內容(by逶 lwme.cnblogs.com)"
, title: {
text: "提示標題"
, button: "關閉"
}
}
});

使用元素的屬性作為提示信息:

. 代碼如下:


$("a[title]").qtip(); //從鏈接的title
$("img[alt]").qtip(); //從img的alt
$("p[title]").qtip(); //從p的title

也可以顯式指定元素屬性作為提示信息:

. 代碼如下:


$('img[alt]').qtip({
content: {
attr: 'alt'
}
});


使用AJAX請求遠程:

. 代碼如下:


$("#demo4").qtip({
content: {
text: "加載中...",
ajax: {
url: "lwmeAtCnblogs.aspx?name=逶"
}
}
});


設置位置及樣式:

. 代碼如下:


$("#demo5").qtip({
position: {
my: 'bottom left',
at: 'top center'
},
style: {
classes: 'ui-tooltip-red'
}
});

點擊時出現模態對話框:

. 代碼如下:


$('button').qtip({
content: "這是提示內容(by逶 lwme.cnblogs.com)",
show: {
event: 'click', // Show it on click...
solo: true, // ...and hide all other tooltips...
modal: true // ...and make it modal
},
hide: false
});

頁面加載完成時顯示,且不會自動隱藏:

. 代碼如下:


$('button').qtip({
content: "這是提示內容(by逶 lwme.cnblogs.com)",
show: {
ready: true
},
hide: false
});

參數設置
先看一下qTip2默認的參數設置:

. 代碼如下:


$.fn.qtip.defaults = {
// 頁面加載完成就創建提示信息的元素
prerender: false,
// 為提示信息設置id,如設置為myTooltip
// 就可以通過ui-tooltip-myTooltip訪問這個提示信息
id: false,
// 每次顯示提示都刪除上一次的提示
overwrite: true,
// 通過元素屬性創建提示
// 如a[title],把原有的title重命名為oldtitle
supPress: true,
// 內容相關的設置
content: {
// 提示信息的內容
// 如果只設置內容可以直接 content: "提示信息"
// 而不需要 content: { text: { "提示信息" } }
text: true,
// 提示信息使用的元素屬性
attr: 'title',
// ajax插件
ajax: false,
title: {
// 提示信息的標題
// 如果只設置標題可以直接 title: "標題"
text: false,
// 提示信息的關閉按鈕
// 如button:"x",button:"關閉"
// 都可以啟用關閉按鈕
button: false
}
},
// 位置相關的設置
position: {
// 提示信息的位置
// 如提示的目標元素的右下角(at屬性)
// 對應 提示信息的左上角(my屬性)
my: 'top left',
at: 'bottom right',
// 提示的目標元素,默認為選擇器
target: FALSE,
// 提示信息默認添加到的容器
container: FALSE,
// 使提示信息在指定目標內可見,不會超出邊界
viewport: FALSE,
adjust: {
// 提示信息位置偏移
x: 0, y: 0,
mouse: TRUE,
reSize: TRUE,
method: 'flip flip'
},
// 特效
effect: function(api, pos, viewport) {
$(this).aniMATE(pos, {
duration: 200,
queue: FALSE
});
}
},
// 顯示提示的相關設置
show: {
// 觸發事件的目標元素
// 默認為選擇器
target: false,
// 事件名稱,默認為鼠標移到時
// 可以改為click點擊
event: ';mouseenter',
// 特效
effect: true,
// 延遲顯示時間
delay: 90,
// 隱藏其他提示
solo: false,
// 在頁面加載完就顯示提示
ready: false,
modal: {
// 啟用模態對話框效果
on: false,
// 特效
effect: true,
blur: true,
escaPE: true
}
},
// 隱藏提示的相關設置
// 參考show
hide: {
target: false,
event: 'mouseleave',
effect: true,
delay: 0,
// 設置為true時,不會隱藏
fixed: false,
inactive: false,
leave: 'window',
distance: false
},
// 樣式相關
style: {
// 樣式名稱
classes: '',
widget: false,
width: false,
height: false,
// tip插件,箭頭相關設置
tip: {
corner: true,
mimic: false,
width: 8,
height: 8,
border: true,
offset: 0
}
},
// 相關事件綁定
events: {
render: null,
move: null,
show: null,
hide: null,
toggle: null,
visible: null,
focus: null,
blur: null
}
};


看起來是很多,但是使用頻率最高的估計也就以下這些參數:

. 代碼如下:


$.fn.qtip.defaults = {
content: {
text: true,
attr: 'title',
ajax: false,
title: {
text: false,
button: false
}
},
position: {
my: 'top left',
at: 'bottom right',
},
show: {
event: 'mouseenter',
solo: false,
ready: false,
modal: false
},
hide: {
event: 'mouseleave'
},
style: 'ui-tooltip-default'
};


對於顯示的位置,有以下參數可以設置:

. 代碼如下:


my = [
'top left', 'top right', 'top center',
'bottom left', 'bottom right', 'bottom center',
'right center', 'right top', 'right bottom',
'left center', 'left top', 'left bottom', 'center'
]
at = [
'bottom left', 'bottom right', 'bottom center',
'top left', 'top right', 'top center',
'left center', 'left top', 'left bottom',
'right center', 'right top', 'right bottom', 'center'
]


而對於顯示的色彩風格則有以下各種顏色:

. 代碼如下:


['red', 'blue', 'dark', 'light', 'green','jtools', 'plain', 'youtube', 'cluetip', 'tipsy', 'tipped']


比如red就是ui-tooltip-red,默認為default。另外還有ui-tooltip-shadow、ui-tooltip-rounded分別表示陰影、圓角效果,可以疊加,如下:

. 代碼如下:


$("#demo2").qtip({
content: "這是提示內容(by逶攏"
, style: {
classes: 'ui-tooltip-red ui-tooltip-shadow ui-tooltip-rounded'
}
});


另外對於ajax則有以下主要參數可以設置(與jQuery.ajax一致):

. 代碼如下:


$('.selector').qtip({
content: {
text: 'Loading...', // Loading text...
ajax: {
url: '/path/to/file', // URL to the JSON script
type: 'GET', // POST or GET
data: { id: 3 }, // Data to pass along with your request
dataType: 'json', // Tell it we're retrieving JSON
success: function(data, status) {
//...
}
}
}
});

需要注意的是,AJAX默認使用GET請求而且啟用了cache。

qTip2採用了MIT/GPLv2許可,官方網站為:https://craigsworks.com/projects/qtip2/,目前還沒發布一個穩定版,Nightly版本經常會更新,當然這並不影響正常使用。
簡介
若不放心可以嘗試舊版的qTip,但在一些參數上會有所不同;若是從qTip升級到qTip2,可以使用官方提供的轉換工具來升級你的代碼:https://craigsworks.com/projects/qtip2/converter/。

如果使用時出現問題,那麼直接下載以下3個文件吧,至少官方演示很正常:

代碼如下:


<link href="https://craigsworks.com/projects/qtip2/packages/latest/jquery.qtip.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://craigsworks.com/projects/qtip2/packages/latest/jquery.qtip.min.js"></script>


從官方網站下載最新版本時,可以選擇相應的樣式及插件;可選的樣式包括幾種色彩風格(Colour Styles)、CSS3相關樣式如圓角;以及以下各種插件,可根據自己需要選擇:
  1. Ajax,這個不用說,請求遠程內容的
  2. Tips,氣泡對話效果,如箭頭
  3. Modal,模態對話框效果,如jQuery UI Dialog / ThickBox 的效果
  4. Image map,提供對map內area標記的提示支持
  5. SVG,對SVG元素提供提示的支持
  6. BGIFrame,用於IE6這種古董,如遮住select控件等

除了以上插件的功能外,它的主要功能有(僅列出較常用的):

  1. 設置提示的內容、標題、關閉按鈕等
  2. 使用元素的屬性,來作為提示信息內容,如鏈接的標題(<a title="提示信息")、圖片的提示(<img src="提示信息")等等
  3. 提示信息顯示的位置
  4. 提示信息的目標,即顯示到什麼元素上
  5. 提示信息顯示/隱藏觸發的事件,如鼠標移到元素上、點擊(mouseenter,click)
  6. 提示信息顯示/隱藏的效果
  7. 外觀的定義,通過相應樣式設置
  8. 跟隨可拖動目標、鼠標指針等

使用方法
以下就簡單演示一些使用方法

創建一個最簡單的提示:
 

. 代碼如下:


$("#demo2").qtip({
content: "這是提示內容(by逶攏"
});


創建一個帶標題的提示:

. 代碼如下:


$("#demo3").qtip({
content: {
text: "這是提示內容(by逶 lwme.cnblogs.com)"
, title: "提示標題"
}
});


帶關閉按鈕的提示:

. 代碼如下:


$("#demo3").qtip({
content: {
text: "這是提示內容(by逶 lwme.cnblogs.com)"
, title: {
text: "提示標題"
, button: "關閉"
}
}
});

使用元素的屬性作為提示信息:

. 代碼如下:


$("a[title]").qtip(); //從鏈接的title
$("img[alt]").qtip(); //從img的alt
$("p[title]").qtip(); //從p的title

也可以顯式指定元素屬性作為提示信息:

. 代碼如下:


$('img[alt]').qtip({
content: {
attr: 'alt'
}
});


使用AJAX請求遠程:

. 代碼如下:


$("#demo4").qtip({
content: {
text: "加載中...",
ajax: {
url: "lwmeAtCnblogs.aspx?name=逶"
}
}
});


設置位置及樣式:

. 代碼如下:


$("#demo5").qtip({
position: {
my: 'bottom left',
at: 'top center'
},
style: {
classes: 'ui-tooltip-red'
}
});

點擊時出現模態對話框:

. 代碼如下:


$('button').qtip({
content: "這是提示內容(by逶 lwme.cnblogs.com)",
show: {
event: 'click', // Show it on click...
solo: true, // ...and hide all other tooltips...
modal: true // ...and make it modal
},
hide: false
});

頁面加載完成時顯示,且不會自動隱藏:

. 代碼如下:


$('button').qtip({
content: "這是提示內容(by逶 lwme.cnblogs.com)",
show: {
ready: true
},
hide: false
});

參數設置
先看一下qTip2默認的參數設置:

. 代碼如下:


$.fn.qtip.defaults = {
// 頁面加載完成就創建提示信息的元素
prerender: false,
// 為提示信息設置id,如設置為myTooltip
// 就可以通過ui-tooltip-myTooltip訪問這個提示信息
id: false,
// 每次顯示提示都刪除上一次的提示
overwrite: true,
// 通過元素屬性創建提示
// 如a[title],把原有的title重命名為oldtitle
suppress: true,
// 內容相關的設置
content: {
// 提示信息的內容
// 如果只設置內容可以直接 content: "提示信息"
// 而不需要 content: { text: { "提示信息" } }
text: true,
// 提示信息使用的元素屬性
attr: 'title',
// ajax插件
ajax: false,
title: {
// 提示信息的標題
// 如果只設置標題可以直接 title: "標題"
text: false,
// 提示信息的關閉按鈕
// 如button:"x",button:"關閉"
// 都可以啟用關閉按鈕
button: false
}
},
// 位置相關的設置
position: {
// 提示信息的位置
// 如提示的目標元素的右下角(at屬性)
// 對應 提示信息的左上角(my屬性)
my: 'top left',
at: 'bottom right',
// 提示的目標元素,默認為選擇器
target: FALSE,
// 提示信息默認添加到的容器
container: FALSE,
// 使提示信息在指定目標內可見,不會超出邊界
viewport: FALSE,
adjust: {
// 提示信息位置偏移
x: 0, y: 0,
mouse: TRUE,
resize: TRUE,
method: 'flip flip'
},
// 特效
effect: function(api, pos, viewport) {
$(this).animate(pos, {
duration: 200,
queue: FALSE
});
}
},
// 顯示提示的相關設置
show: {
// 觸發事件的目標元素
// 默認為選擇器
target: false,
// 事件名稱,默認為鼠標移到時
// 可以改為click點擊
event: 'mouseenter',
// 特效
effect: true,
// 延遲顯示時間
delay: 90,
// 隱藏其他提示
solo: false,
// 在頁面加載完就顯示提示
ready: false,
modal: {
// 啟用模態對話框效果
on: false,
// 特效
effect: true,
blur: true,
escape: true
}
},
// 隱藏提示的相關設置
// 參考show
hide: {
target: false,
event: 'mouseleave',
effect: true,
delay: 0,
// 設置為true時,不會隱藏
fixed: false,
inactive: false,
leave: 'window',
distance: false
},
// 樣式相關
style: {
// 樣式名稱
classes: '',
widget: false,
width: false,
height: false,
// tip插件,箭頭相關設置
tip: {
corner: true,
mimic: false,
width: 8,
height: 8,
border: true,
offset: 0
}
},
// 相關事件綁定
events: {
render: null,
move: null,
show: null,
hide: null,
toggle: null,
visible: null,
focus: null,
blur: null
}
};


看起來是很多,但是使用頻率最高的估計也就以下這些參數:

. 代碼如下:


$.fn.qtip.defaults = {
content: {
text: true,
attr: 'title',
ajax: false,
title: {
text: false,
button: false
}
},
position: {
my: 'top left',
at: 'bottom right',
},
show: {
event: 'mouseenter',
solo: false,
ready: false,
modal: false
},
hide: {
event: 'mouseleave'
},
style: 'ui-tooltip-default'
};


對於顯示的位置,有以下參數可以設置:

. 代碼如下:


my = [
'top left', 'top right', 'top center',
'bottom left', 'bottom right', 'bottom center',
'right center', 'right top', 'right bottom',
'left center', 'left top', 'left bottom', 'center'
]
at = [
'bottom left', 'bottom right', 'bottom center',
'top left', 'top right', 'top center',
'left center', 'left top', 'left bottom',
'right center', 'right top', 'right bottom', 'center'
]


而對於顯示的色彩風格則有以下各種顏色:

. 代碼如下:


['red', 'blue', 'dark', 'light', 'green','jtools', 'plain', 'youtube', 'cluetip', 'tipsy', 'tipped']


比如red就是ui-tooltip-red,默認為default。另外還有ui-tooltip-shadow、ui-tooltip-rounded分別表示陰影、圓角效果,可以疊加,如下:

. 代碼如下:


$("#demo2").qtip({
content: "這是提示內容(by逶攏"
, style: {
classes: 'ui-tooltip-red ui-tooltip-shadow ui-tooltip-rounded'
}
});


另外對於ajax則有以下主要參數可以設置(與jQuery.ajax一致):

. 代碼如下:


$('.selector').qtip({
content: {
text: 'Loading...', // Loading text...
ajax: {
url: '/path/to/file', // URL to the JSON script
type: 'GET', // POST or GET
data: { id: 3 }, // Data to pass along with your request
dataType: 'json', // Tell it we're retrieving JSON
success: function(data, status) {
//...
}
}
}
});

需要注意的是,AJAX默認使用GET請求而且啟用了cache。

覺得可用,就經常來吧!Javascript技巧 腳本寶典 歡迎評論哦! js技巧,巧奪天工,精雕玉琢。小寶典獻醜了!

脚本宝典总结

以上是脚本宝典为你收集整理的js實例教程-qTip2 精緻的基於jQuery提示信息插件全部内容,希望文章能够帮你解决js實例教程-qTip2 精緻的基於jQuery提示信息插件所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。