欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery提示插件qTip2用法分析(支持ajax及多種樣式)

 更新時(shí)間：2016年06月08日 10:06:49   作者：smartsmile2012  
這篇文章主要介紹了jQuery提示插件qTip2用法,結(jié)合實(shí)例形式分析了qTip2的使用技巧,可支持ajax及多種樣式的設(shè)置,需要的朋友可以參考下

本文實(shí)例講述了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">
    /*
    從官方網(wǎng)站下載最新版本時(shí)，可以選擇相應(yīng)的樣式及插件；可選的樣式包括幾種色彩風(fēng)格(Colour Styles)、CSS3相關(guān)樣式如圓角；
    以及以下各種插件，可根據(jù)自己需要選擇：
    Ajax，這個(gè)不用說(shuō)，請(qǐng)求遠(yuǎn)程內(nèi)容的
    Tips，氣泡對(duì)話效果，如箭頭
    Modal，模態(tài)對(duì)話框效果，如jQuery UI Dialog / ThickBox 的效果
    Image map，提供對(duì)map內(nèi)area標(biāo)記的提示支持
    SVG，對(duì)SVG元素提供提示的支持
    BGIFrame，用于IE6這種古董，如遮住select控件等
    除了以上插件的功能外，它的主要功能有（僅列出較常用的）：
    設(shè)置提示的內(nèi)容、標(biāo)題、關(guān)閉按鈕等
    使用元素的屬性，來(lái)作為提示信息內(nèi)容，如鏈接的標(biāo)題(<a title="提示信息")、圖片的提示(<img src="提示信息")等等
    提示信息顯示的位置
    提示信息的目標(biāo)，即顯示到什么元素上
    提示信息顯示/隱藏觸發(fā)的事件，如鼠標(biāo)移到元素上、點(diǎn)擊(mouseenter,click)
    提示信息顯示/隱藏的效果
    外觀的定義，通過(guò)相應(yīng)樣式設(shè)置
    跟隨可拖動(dòng)目標(biāo)、鼠標(biāo)指針等
    */
    $(function () {
      //普通
      $("#demo1").qtip({
        content: "這是提示內(nèi)容（By Hu Sir）"
      });
      //帶標(biāo)題
      $("#demo2").qtip({
        content: {
          text: "<b>這是提示內(nèi)容</b>（By Hu Sir）",
          title: "提示標(biāo)題"
        }
      });
      //帶關(guān)閉按鈕的提示 且延時(shí)3秒關(guān)閉
      $("#demo3").qtip({
        content: {
          text: "這是提示內(nèi)容（By Hu Sir）",
          title: "提示標(biāo)題",
          button: "關(guān)閉"
        },
        hide: {
          event: false,  //設(shè)置不自動(dòng)關(guān)閉 可配合inactive組合使用
          inactive: 3000  //設(shè)置延時(shí)關(guān)閉
        }
      });
      //使用AJAX請(qǐng)求遠(yuǎn)程
      $("#demo4").qtip({
        content: {
          text: "加載中...",
          ajax: {
            url: "lwmeAtCnblogs.aspx?name=Hu"
          }
        }
      });
      //點(diǎn)擊時(shí)出現(xiàn)模態(tài)對(duì)話框
      $("#demo5").qtip({
        content: "這是提示內(nèi)容（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
      });
      //頁(yè)面加載完成時(shí)顯示，且不會(huì)自動(dòng)隱藏：
      $("#demo6").qtip({
        content: "這是提示內(nèi)容（By Hu Sir）",
        show: {
          ready: true
        },
        style: {
          //換樣式 陰影 圓角疊加
          classes: 'qtip-light qtip-shadow qtip-rounded'
        },
        hide: false,
        position: {
          my: 'bottom left',
          at: 'top center'
        }
      });
      //鼠標(biāo)跟隨
      $('#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'
      //  }
      //});
      //另外對(duì)于ajax則有以下主要參數(shù)可以設(shè)置（與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">測(cè)試一</span><br/><br/>
  <span id="demo2">測(cè)試二</span><br/><br/>
  <span id="demo3">測(cè)試三</span><br/><br/>
  <span id="demo4">測(cè)試四</span><br/><br/>
  <span id="demo5">測(cè)試五</span><br/><br/><br/><br/>
  <span id="demo6">測(cè)試六</span><br/><br/>
  <span id="demo7">測(cè)試七</span><br/><br/>
  </div>
</body>
</html>


$.fn.qtip.defaults = {
  // 頁(yè)面加載完成就創(chuàng)建提示信息的元素
  prerender: false,
  // 為提示信息設(shè)置id，如設(shè)置為myTooltip
  // 就可以通過(guò)ui-tooltip-myTooltip訪問(wèn)這個(gè)提示信息
  id: false,
  // 每次顯示提示都刪除上一次的提示
  overwrite: true,
  // 通過(guò)元素屬性創(chuàng)建提示
  // 如a[title]，把原有的title重命名為oldtitle
  suppress: true,
  // 內(nèi)容相關(guān)的設(shè)置
  content: {
   // 提示信息的內(nèi)容
   // 如果只設(shè)置內(nèi)容可以直接 content: "提示信息"
   // 而不需要 content: { text: { "提示信息" } }
   text: true,
   // 提示信息使用的元素屬性
   attr: 'title',
   // ajax插件
   ajax: false,
   title: {
     // 提示信息的標(biāo)題
     // 如果只設(shè)置標(biāo)題可以直接 title: "標(biāo)題"
     text: false,
     // 提示信息的關(guān)閉按鈕
     // 如button:"x",button:"關(guān)閉"
     // 都可以啟用關(guān)閉按鈕
     button: false
   }
  },
  // 位置相關(guān)的設(shè)置
  position: {
   // 提示信息的位置
   // 如提示的目標(biāo)元素的右下角(at屬性)
   // 對(duì)應(yīng) 提示信息的左上角(my屬性)
   my: 'top left',
   at: 'bottom right',
   // 提示的目標(biāo)元素，默認(rèn)為選擇器
   target: FALSE,
   // 提示信息默認(rèn)添加到的容器
   container: FALSE,
   // 使提示信息在指定目標(biāo)內(nèi)可見，不會(huì)超出邊界
   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
     });
   }
  },
  // 顯示提示的相關(guān)設(shè)置
  show: {
   // 觸發(fā)事件的目標(biāo)元素
   // 默認(rèn)為選擇器
   target: false,
   // 事件名稱，默認(rèn)為鼠標(biāo)移到時(shí)
   // 可以改為click點(diǎn)擊
   event: 'mouseenter',
   // 特效
   effect: true,
   // 延遲顯示時(shí)間
   delay: 90,
   // 隱藏其他提示
   solo: false,
   // 在頁(yè)面加載完就顯示提示
   ready: false,
   modal: {
     // 啟用模態(tài)對(duì)話框效果
     on: false,
     // 特效
     effect: true,
     blur: true,
     escape: true
   }
  },
  // 隱藏提示的相關(guān)設(shè)置
  // 參考show
  hide: {
   target: false,
   event: 'mouseleave',
   effect: true,
   delay: 0,
   // 設(shè)置為true時(shí)，不會(huì)隱藏
   fixed: false,
   inactive: false,
   leave: 'window',
   distance: false
  },
  // 樣式相關(guān)
  style: {
   // 樣式名稱
   classes: '',
   widget: false,
   width: false,
   height: false,
   // tip插件，箭頭相關(guān)設(shè)置
   tip: {
     corner: true,
     mimic: false,
     width: 8,
     height: 8,
     border: true,
     offset: 0
   }
  },
  // 相關(guān)事件綁定
  events: {
   render: null,
   move: null,
   show: null,
   hide: null,
   toggle: null,
   visible: null,
   focus: null,
   blur: null
  }
};

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jquery中Ajax用法總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動(dòng)畫與特效用法總結(jié)》、《jquery選擇器用法總結(jié)》及《jQuery常用插件及用法總結(jié)》

希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。

相關(guān)文章

最新評(píng)論