qTip2 精緻的jQuery提示信息插件

時間  2019-11-11
標籤 qtip2 qtip 精緻 jquery 提示 信息 插件 欄目 JQuery 简体版
原文   原文鏈接

http://www.cnblogs.com/zhangliang0115/archive/2012/02/20/2359264.html css

qTip2 精緻的jQuery提示信息插件

qTip2 精緻的jQuery提示信息插件

2012-02-16 22:31 by 囧月, 1651 visits, 收藏, 編輯 html

qTip2是一個灰常強大且精緻的jQuery提示信息插件，是qTip的第2版，也是一個全新的版本，提供了豐富的功能及漂亮的外觀，很是易於使用。 jquery

qTip2採用了MIT/GPLv2許可，官方網站爲：http://craigsworks.com/projects/qtip2/，目前還沒發佈一個穩定版，Nightly版本常常會更新，固然這並不影響正常使用。 ajax

簡介

若不放心能夠嘗試舊版的qTip，但在一些參數上會有所不一樣；如果從qTip升級到qTip2，能夠使用官方提供的轉換工具來升級你的代碼：http://craigsworks.com/projects/qtip2/converter/。 json

若是使用時出現問題，那麼直接下載如下3個文件吧，至少官方演示很正常： api

從官方網站下載最新版本時，能夠選擇相應的樣式及插件；可選的樣式包括幾種色彩風格(Colour Styles)、CSS3相關樣式如圓角；以及如下各類插件，可根據本身須要選擇： ide

  1. Ajax，這個不用說，請求遠程內容的
  2. Tips，氣泡對話效果，如箭頭
  3. Modal，模態對話框效果，如jQuery UI Dialog / ThickBox 的效果
  4. Image map，提供對map內area標記的提示支持
  5. SVG，對SVG元素提供提示的支持
  6. BGIFrame，用於IE6這種古董，如遮住select控件等

除了以上插件的功能外，它的主要功能有（僅列出較經常使用的）： 工具

  1. 設置提示的內容、標題、關閉按鈕等
  2. 使用元素的屬性，來做爲提示信息內容，如連接的標題(<a title="提示信息")、圖片的提示(<img src="提示信息")等等
  3. 提示信息顯示的位置
  4. 提示信息的目標，即顯示到什麼元素上
  5. 提示信息顯示/隱藏觸發的事件，如鼠標移到元素上、點擊(mouseenter,click)
  6. 提示信息顯示/隱藏的效果
  7. 外觀的定義，經過相應樣式設置
  8. 跟隨可拖動目標、鼠標指針等

使用方法

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

建立一個最簡單的提示： 網站

?
1
2
3
$("#demo2").qtip({
  content:"這是提示內容（by囧月）"
});

建立一個帶標題的提示：

?
1
2
3
4
5
6
$("#demo3").qtip({
  content: {
    text:"這是提示內容（by囧月 lwme.cnblogs.com）"
    , title:"提示標題"
  }
});

帶關閉按鈕的提示：

?
1
2
3
4
5
6
7
8
9
$("#demo3").qtip({
  content: {
    text:"這是提示內容（by囧月 lwme.cnblogs.com）"
    , title: {
      text:"提示標題"
      , button:"關閉"
    }
  }
});

使用元素的屬性做爲提示信息：

?
1
2
3
$("a[title]").qtip();//從連接的title
$("img[alt]").qtip();//從img的alt
$("div[title]").qtip();//從div的title

也能夠顯式指定元素屬性做爲提示信息：

?
1
2
3
4
5
$('img[alt]').qtip({
   content: {
      attr:'alt'
   }
});

使用AJAX請求遠程：

?
1
2
3
4
5
6
7
8
$("#demo4").qtip({
  content: {
    text:"加載中...",
    ajax: {
      url:"lwmeAtCnblogs.aspx?name=囧月"
    }
  }
});

設置位置及樣式：

?
1
2
3
4
5
6
7
8
9
$("#demo5").qtip({
  position: {
    my:'bottom left',
    at:'top center'
  },
  style: {
    classes:'ui-tooltip-red'
  }
});

點擊時出現模態對話框：

?
1
2
3
4
5
6
7
8
9
$('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
});
頁面加載完成時顯示，且不會自動隱藏：
?
1
2
3
4
5
6
7
$('button').qtip({
  content:"這是提示內容（by囧月 lwme.cnblogs.com）",
  show: {
    ready:true
  },
  hide:false
});

參數設置

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
$.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
   }
};

看起來是不少，可是使用頻率最高的估計也就如下這些參數：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
$.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'
};

對於顯示的位置，有如下參數能夠設置：

?
1
2
3
4
5
6
7
8
9
10
11
12
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'
]

而對於顯示的色彩風格則有如下各類顏色：

?
1
['red','blue','dark','light','green','jtools','plain','youtube','cluetip','tipsy','tipped']

好比red就是ui-tooltip-red，默認爲default。另外還有ui-tooltip-shadow、ui-tooltip-rounded分別表示陰影、圓角效果，能夠疊加，以下：

?
1
2
3
4
5
6
$("#demo2").qtip({
  content:"這是提示內容（by囧月）"
  , style: {
    classes:'ui-tooltip-red ui-tooltip-shadow ui-tooltip-rounded'
  }
});

另外對於ajax則有如下主要參數能夠設置（與jQuery.ajax一致）：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
$('.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就介紹到這裏，更多信息請參閱如下連接：

官方網站：http://craigsworks.com/projects/qtip2/

在線演示：http://craigsworks.com/projects/qtip2/demos/

官方文檔：http://craigsworks.com/projects/qtip2/docs/

最後，放一個簡單的DEMO。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程