資源描述：
《jquery提示插件qtip2用法分析(支持ajax及多種樣式)_jquery》由會員上傳分享，免費在線閱讀，更多相關(guān)內(nèi)容在工程資料-天天文庫。
1、jQuery提示插件qTip2用法分析(支持ajax及多種樣式)本文實例講述了jQuery提示插件qTip2用法。分享給大家供大家參考，具體如Qtip2插件提</p><p>2、示〈/script>/*從官方網(wǎng)站下載最新版本時，可以選擇相應(yīng)的樣式及插
3、件；可選的樣式包折幾種色彩風(fēng)格(ColourStyles)>CSS3相關(guān)樣式如圓角；以及以下各種插件，可根據(jù)自己需要選擇：Ajax,這個不用說，請求遠程內(nèi)容的Tips,氣泡對話效果,如箭頭Modal,模態(tài)對話框效果,如jQueryUIDialog/ThickBox的效果Imagemap,提供對map內(nèi)area標記的提示支持SVG,對SVG元索提供提示的支持BGIFrame,用于IE6這種古董,如遮住select控件等除了以上插件的功能外，它的主要功能冇(僅列出較常用的):設(shè)置提示的內(nèi)容、標題、關(guān)閉
4、按鈕等使用元素的屬性，來作為提示信息內(nèi)容，如鏈接的標題(〈atitle，提示信息〃)、圖片的提示?imgsre二〃提示信息〃)等等提示信息顯示的位置捉示信息的目標，即顯示到什么元素上提示信息顯示/隱藏觸發(fā)的事件，如鼠標移到元素上、點擊(mouseenter,click)提示信息顯示/隱藏的效果外觀的定義，通過相應(yīng)樣式設(shè)置跟隨可拖動目標、鼠標指針等*/$(function(){〃普通$("#demol〃)?qtip({content:"這是捉示內(nèi)容(ByHuSir)});//帶標題$(〃#demo2
5、〃).qtip({content:{text:z，＜b＞這是提示內(nèi)容〈/b＞(ByIluSir)",title:/z提示標題〃}})；〃帶關(guān)閉按鈕的提示且延吋3秒關(guān)閉$(〃#demo3〃).qtip({contcnt:{text:這是捉示內(nèi)容(ByHuSir)",title:'提示標題〃，button:關(guān)閉〃},hide:{event:false,//設(shè)置不自動關(guān)閉可配合inactive組合使用inactive:3000//設(shè)置延時關(guān)閉}})；〃使用AJAX請求遠程$("#demo4〃).qtip
6、({content:{text:加載中…〃,ajax:{url:z，lwnicAtCnblogs?aspx?n3mc二}}})；〃點擊時出現(xiàn)模態(tài)對話框$(〃#demo5〃).qtip({content:〃這是提示內(nèi)容(ByHuSir)",show:{event:'click',//Showitonclick...solo:true,//...andhideal1othertooltips...$('#divl')modal:true//???andmakeitmodal},hide:false})
7、；〃頁面加載完成時顯示，且不會自動隱藏：$(〃#demo6〃).qtip({content:〃這是提示內(nèi)容(ByHuSir)",show:{ready:truestyle:{//換樣式陰影圓角疊加classes:'qtip-1ightqtip-shadowqtip-rounded'},hide:false,position:{my:5bottomleft',at:'topcenter"}});〃鼠標跟隨$(，#demo7').qtip({content:{text:'Tampositionedin
8、relationtothemouse'},position:{target:'mouse',}})；〃使用元素的屬性作為提示信息：//$(〃a[title]")?qtip();//從鏈接的title//$(〃img[alt]〃)?qtip();//從img的alt//$(〃div[title]〃)?qtip();//從div的title//也可以顯式指定元索屬性作為提示信息：//$('img[alt]').qtip({//content:{//attr:'alt'//}//})；/
