jQuery提示外掛程式qTip2用法分析(支援ajax及多種樣式)_jquery

來源:互聯網
上載者:User

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

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.