Jquery中文網 www.4271936.live
Jquery中文網 >  jQuery  >  jquery 教程  >  正文 qTip2 精致的jQuery提示信息插件

qTip2 精致的jQuery提示信息插件

發布時間:2016-09-16   編輯:www.4271936.live
jquery中文網為您提供qTip2 精致的jQuery提示信息插件等資源,歡迎您收藏本站,我們將為您提供最新的qTip2 精致的jQuery提示信息插件資源

(轉)

三個文件:

<link href=”http://craigsworks.com/projects/qtip2/packages/latest/jquery.qtip.min.css” rel=”stylesheet” />

<script src=”http://ajax.useso.com/ajax/libs/jquery/1/jquery.min.js”></script>

<script src=”http://craigsworks.com/projects/qtip2/packages/latest/jquery.qtip.min.js”></script>

從官方網站下載最新版本時,可以選擇相應的樣式及插件;可選的樣式包括幾種色彩風格(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)

提示信息顯示/隱藏的效果

外觀的定義,通過相應樣式設置

跟隨可拖動目標、鼠標指針等

使用頻率最高的估計也就以下這些參數

$.fn.qtip.defaults = {
   content: {
      text: true, 
      attr: 'title', 
      ajax: false,
      title: {
         text: false, 
         button: false
      }
   },
   position: {
      my: 'top left', 
      at: 'bottom right',
   },
   show: {
      event: 'mouseenter',
      solo: false,
      ready: false,
      modal: false
   },
   hide: {
      event: 'mouseleave'
   },
   style: 'ui-tooltip-default'
};

對于顯示的位置,有以下參數可以設置:

my = [

‘top left’, ‘top right’, ‘top center’,

‘bottom left’, ‘bottom right’, ‘bottom center’,

‘right center’, ‘right top’, ‘right bottom’,

‘left center’, ‘left top’, ‘left bottom’, ‘center’

]

at = [

‘bottom left’, ‘bottom right’, ‘bottom center’,

‘top left’, ‘top right’, ‘top center’,

‘left center’, ‘left top’, ‘left bottom’,

‘right center’, ‘right top’, ‘right bottom’, ‘center’

]

而對于顯示的色彩風格則有以下各種顏色:

[‘red’, ‘blue’, ‘dark’, ‘light’, ‘green’,’jtools’, ‘plain’, ‘youtube’, ‘cluetip’, ‘tipsy’, ‘tipped’]

比如red就是ui-tooltip-red,默認為default。另外還有ui-tooltip-shadow、ui-tooltip-rounded分別表示陰影、圓角效果,可以疊加,如下:

$(“#demo2″).qtip({

  content: “這是提示內容(by囧月)”,

  style: {

    classes: ‘ui-tooltip-red ui-tooltip-shadow ui-tooltip-rounded’

  }

});

另外對于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) {

          //…

         }

      }

   }

});

需要注意的是,AJAX默認使用GET請求而且啟用了cache。

參數設置

先看一下qTip2默認的參數設置:

$.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
   }
};

使用方法

以下就簡單演示一些使用方法

$(“#demo2″).qtip({

  content: “這是提示內容(by囧月)”

});

創建一個帶標題的提示:

$(“#demo3″).qtip({

  content: {

    text: “這是提示內容(by囧月 lwme.cnblogs.com)”

    , title: “提示標題”

  }

});

帶關閉按鈕的提示:

$(“#demo3″).qtip({

  content: {

    text: “這是提示內容(by囧月 lwme.cnblogs.com)”,

    title: {

      text: “提示標題”,

      button: “關閉”

    }

  }

});

使用元素的屬性作為提示信息:

$(“a[title]”).qtip(); //從鏈接的title

$(“img[alt]”).qtip(); //從img的alt

$(“div[title]”).qtip(); //從div的title

也可以顯式指定元素屬性作為提示信息:

$(‘img[alt]’).qtip({

   content: {

      attr: ‘alt’

   }

});

使用AJAX請求遠程:

$(“#demo4″).qtip({

  content: {

    text: “加載中…”,

    ajax: {

      url: “lwmeAtCnblogs.aspx?name=囧月”

    }

  }

});

設置位置及樣式:

$(“#demo5″).qtip({

  position: {

    my: ‘bottom left’,

    at: ‘top center’

  },

  style: {

    classes: ‘ui-tooltip-red’

  }

});

點擊時出現模態對話框:

$(‘button’).qtip({

  content: “這是提示內容(by囧月 lwme.cnblogs.com)”,

  show: {

    event: ‘click’, // Show it on click…

    solo: true, // …and hide all other tooltips…

    modal: true // …and make it modal

  },

  hide: false

});

頁面加載完成時顯示,且不會自動隱藏:

$(‘button’).qtip({

  content: “這是提示內容(by囧月 lwme.cnblogs.com)”,

  show: {

    ready: true

  },

  hide: false

});

您可能感興趣的文章:
jQuery工具提示插件 qTip2
qTip2 精致的基于jQuery提示信息插件
jquery validate poshytip 自定義樣式
推薦17個優美新鮮的jQuery的工具提示插件
表單驗證插件 jQuery formValidator
jQuery信息提示插件 Dynamic tooltip
jQuery消息提醒插件 jQuery Notty
jQuery工具提示插件 Coda Bubble
jQuery Inline Form Validation Engine
Dreamweaver jQuery智能提示插件,支持版本提示,支持1.6api

[關閉]
微信下载APP完成任务如何赚钱 涨停股票的操作 山东体彩十一选五手机版 今日涨停板股票 排列3开机号 如何分析股票涨跌 pk10冠军无马二期必中计划 什么叫胆码 江苏快三人工计划精准 2018排列五历史开奖表 易算pk10手机版