本文執行個體講述了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程式設計有所協助。