好用的 jQuery 提示對話框 plugin- qTip2

qtip

plugin 網址
qTip2

雖然html只要加了title,滑鼠移過去後就會有提示功能,可是因為長相太普通了,所以如果可以自訂對話框就會漂亮很多,這個plugin就是為了滿足這個需求而出現的,而且還滿強大的。

基本用法很簡單,引入plugin跟css後。
  1. $('.selecter').qtip({   
  2.         content: 'I\'m positioned using corner values!',   
  3.         position: {   
  4.             my: 'top left',  // Position my top left...   
  5.             at: 'bottom right'// at the bottom right of...   
  6.         }   
  7.     });  

qTip2
my指的是對話框尖角的位置,at則是出現在selector的相對位置,各個角落都可以,可以參考下面這張圖指定位置。

Demo

可以參考 Plugin 的 Demo 頁,更神奇的是他還可以跟其他的 plugin 整合。

像試著跟Validation這個plugin整合。

基本的綁法都一樣,綁完原本的validation的事件,再加一些東西就可以把提示的訊息變成對話框內呈現了。

  1. errorPlacement: function(error, element)   
  2.             {   
  3.                 // Set positioning based on the elements position in the form   
  4.                 var elem = $(element);   
  5.   
  6.                 // Check we have a valid error message   
  7.                 if(!error.is(':empty')) {   
  8.                     // Apply the tooltip only if it isn't valid   
  9.                     elem.filter(':not(.valid)').qtip({   
  10.                         overwrite: false,   
  11.                         content: error,   
  12.                         position: {   
  13.                             my: "left center",   
  14.                             at: "center right"  
  15.                         },   
  16.                         show: {   
  17.                             event: false,   
  18.                             ready: true  
  19.                         },   
  20.                         hide: false,   
  21.                         style: {   
  22.                             classes: 'qtip-red' // Make it red... the classic error colour!   
  23.                         }   
  24.                     })   
  25.   
  26.                     // If we have a tooltip on this element already, just update its content   
  27.                     .qtip('option''content.text', error);   
  28.                 }   
  29.   
  30.                 // If the error is empty, remove the qTip   
  31.                 else { elem.qtip('destroy'); }   
  32.             },   
  33.             success: $.noop, // Odd workaround for errorPlacement not firing!  

Demo

留言