本文實例講述了jQuery提示插件qTip2用法。分享給大家供大家參考，具體如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>Qtip2 插件提示</title> <link href="jquery.qtip.css" rel="stylesheet" type="text/css" /> <script src="jquery.min.js" type="text/javascript"></script> <script src="jquery.qtip.min.js" type="text/javascript"></script> <script type="text/javascript"> /* 從官方網站下載最新版本時，可以選擇相應的樣式及插件；可選的樣式包括幾種色彩風格(Colour Styles)、CSS3相關樣式如圓角； 以及以下各種插件，可根據自己需要選擇： Ajax，這個不用說，請求遠程內容的 Tips，氣泡對話效果，如箭頭 Modal，模態對話框效果，如jQuery UI Dialog / ThickBox 的效果 Image map，提供對map內area標記的提示支持 SVG，對SVG元素提供提示的支持 BGIFrame，用于IE6這種古董，如遮住select控件等 除了以上插件的功能外，它的主要功能有（僅列出較常用的）： 設置提示的內容、標題、關閉按鈕等 使用元素的屬性，來作為提示信息內容，如鏈接的標題(<a title="提示信息")、圖片的提示(<img src="提示信息")等等 提示信息顯示的位置 提示信息的目標，即顯示到什么元素上 提示信息顯示/隱藏觸發的事件，如鼠標移到元素上、點擊(mouseenter,click) 提示信息顯示/隱藏的效果 外觀的定義，通過相應樣式設置 跟隨可拖動目標、鼠標指針等 */ $(function () { //普通 $("#demo1").qtip({ content: "這是提示內容（By Hu Sir）" }); //帶標題 $("#demo2").qtip({ content: { text: "<b>這是提示內容</b>（By Hu Sir）", title: "提示標題" } }); //帶關閉按鈕的提示 且延時3秒關閉 $("#demo3").qtip({ content: { text: "這是提示內容（By Hu Sir）", title: "提示標題", button: "關閉" }, hide: { event: false, //設置不自動關閉 可配合inactive組合使用 inactive: 3000 //設置延時關閉 } }); //使用AJAX請求遠程 $("#demo4").qtip({ content: { text: "加載中...", ajax: { url: "lwmeAtCnblogs.aspx?name=Hu" } } }); //點擊時出現模態對話框 $("#demo5").qtip({ content: "這是提示內容（By Hu Sir）", show: { event: 'click', // Show it on click... solo: true, // ...and hide all other tooltips... $('#div1') modal: true // ...and make it modal }, hide: false }); //頁面加載完成時顯示，且不會自動隱藏： $("#demo6").qtip({ content: "這是提示內容（By Hu Sir）", show: { ready: true }, style: { //換樣式 陰影 圓角疊加 classes: 'qtip-light qtip-shadow qtip-rounded' }, hide: false, position: { my: 'bottom left', at: 'top center' } }); //鼠標跟隨 $('#demo7').qtip({ content: { text: 'I am positioned in relation to the mouse' }, position: { target: 'mouse', } }); //使用元素的屬性作為提示信息： // $("a[title]").qtip(); //從鏈接的title // $("img[alt]").qtip(); //從img的alt // $("div[title]").qtip(); //從div的title //也可以顯式指定元素屬性作為提示信息： //$('img[alt]').qtip({ // content: { // attr: 'alt' // } //}); //另外對于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) { // //... // } // } // } //}); }); </script></head><body> <div id="div1"> <span id="demo1">測試一</span><br/><br/> <span id="demo2">測試二</span><br/><br/> <span id="demo3">測試三</span><br/><br/> <span id="demo4">測試四</span><br/><br/> <span id="demo5">測試五</span><br/><br/><br/><br/> <span id="demo6">測試六</span><br/><br/> <span id="demo7">測試七</span><br/><br/> </div></body></html>$.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 }};更多關于jQuery相關內容感興趣的讀者可查看本站專題：《jquery中Ajax用法總結》、《jQuery表格(table)操作技巧匯總》、《jQuery拖拽特效與技巧總結》、《jQuery擴展技巧總結》、《jQuery常見經典特效匯總》、《jQuery動畫與特效用法總結》、《jquery選擇器用法總結》及《jQuery常用插件及用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
新聞熱點
疑難解答
