脚本宝典收集整理的这篇文章主要介绍了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>
除了以上插件的功能外,它的主要功能有(僅列出較常用的):
使用方法
以下就簡單演示一些使用方法
創建一個最簡單的提示:
. 代碼如下:
$("#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'
}
});
. 代碼如下:
$("#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
});
. 代碼如下:
$.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']
. 代碼如下:
$("#demo2").qtip({
content: "這是提示內容(by逶攏"
, style: {
classes: 'ui-tooltip-red ui-tooltip-shadow ui-tooltip-rounded'
}
});
. 代碼如下:
$('.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) {
//...
}
}
}
});
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>
除了以上插件的功能外,它的主要功能有(僅列出較常用的):
使用方法
以下就簡單演示一些使用方法
創建一個最簡單的提示:
. 代碼如下:
$("#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'
}
});
. 代碼如下:
$("#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
});
. 代碼如下:
$.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']
. 代碼如下:
$("#demo2").qtip({
content: "這是提示內容(by逶攏"
, style: {
classes: 'ui-tooltip-red ui-tooltip-shadow ui-tooltip-rounded'
}
});
. 代碼如下:
$('.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) {
//...
}
}
}
});
覺得可用,就經常來吧!Javascript技巧 腳本寶典 歡迎評論哦! js技巧,巧奪天工,精雕玉琢。小寶典獻醜了!
以上是脚本宝典为你收集整理的js實例教程-qTip2 精緻的基於jQuery提示信息插件全部内容,希望文章能够帮你解决js實例教程-qTip2 精緻的基於jQuery提示信息插件所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。