我這裡說的提示框，就是當用戶將滑鼠移動到需要提示的圖標時，就會在這圖標的位置出現一個提示框了。 咦，那這有什麼好說的呢？ 如果你來實現這一效果，你會怎麼做呢？ 初步的做法嘛，就是利用PS製作一張提示框內容區域的png圖片和一張指向位置的箭頭png圖片，然後利用這張圖片作為提示背景，裡面輸入指定內容唄 ...
我這裡說的提示框，就是當用戶將滑鼠移動到需要提示的圖標時，就會在這圖標的位置出現一個提示框了。
咦，那這有什麼好說的呢？
如果你來實現這一效果，你會怎麼做呢？
初步的做法嘛，就是利用PS製作一張提示框內容區域的png圖片和一張指向位置的箭頭png圖片，然後利用這張圖片作為提示背景，裡面輸入指定內容唄。
恩，想法簡單粗暴，那我們就來初步實現以下吧。
首先你得有兩張上述說的圖片，圖片製作結果如下：
圖一 圖二
好了，圖片有了，接下來，就是將這兩張圖片作為背景。
我的想法是，兩張圖片利用兩個div，將圖二（三角形圖片）嵌套在圖一（矩形方框）里，然後達到這一提示框的效果。
<!DOCTYPE html> <head> <title>tip</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style> #liuTip { background:url(img/title_back.png) 0 10px no-repeat;<!--圖一：內容區--> width:220px; height:112px; overflow:auto; position:absolute; display:block; } #liuTip div { background:url(img/title_arrow.png) 0 0 no-repeat;<!--圖二：箭頭區--> width:40px; height:11px; } </style> </head> <body> <!--提示框--> <div id="liuTip"> <div></div> </div> <!--提示框結束--> </body> </html>
運行代碼，效果如下：
圖三
這樣，一個簡單的提示框就出來了。
但是，大家發現沒，這樣子的話，內容框（圖一）是恆定不變的哦。
也就是說，你每次用一個提示框，你就得去製作一張單獨的內容框（圖一），以符合特定的內容。
哎，尼瑪，是不是煩了點，如果我想寫一個適合於所有內容的提示框呢？
那我們就一起來改善改善它。
還記得大明湖畔的薇薇麽，background有個repeat呢。
是不是知道了點撒。
想法：將提示框拆分成上、中、下三個區域，上下區域不變，中間區域拆分成一個片段，高度隨內容區域的多少，而自動變換。
尼瑪，這到底是什麼意思？
見下圖：
圖四
圖五
圖六
這樣你就可以利用repeat-y實現解決不必為單獨的內容製作單獨的body框的問題了。
但是，有木有發現，如果我將其拆分成上中下三個區域，高度隨內容變大後，會很難看滴。
所以，我將其拆分成左中右三個區域，這樣不管內容變多少，寬度隨之改變，一樣美觀的。
圖片見下：
圖七 圖八 圖九
哈哈，好了，拆分後，再組裝的思想，就是這樣了。最後利用repeat-x就可以實現寬度隨內容而變。
下麵是實現代碼：
<!DOCTYPE html> <head> <title>tip2</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style> .tip { overflow:hidden; } .tipHead { height:77px; width:16px; background:url(localizerLeft.gif) no-repeat;<!--圖七：頭--> float:left; } .tipBody { height:77px; width:200px; background:url(localizerMid.gif) repeat-x;<!--圖八：腰--> float:left; } .tipTail { height:77px; width:10px; background:url(localizerRight.gif) no-repeat;<!--圖九：尾--> float:left; } </style> </head> <body> <div class="tip"> <div class="tipHead"></div> <div class="tipBody"></div> <div class="tipTail"></div> </div> </body> </html>
運行上述代碼，結果如下：
圖十
不知道你有沒有看上述的代碼，建議你看一看，不然講不下去咯。。。
上述代碼看過後，發現有點不爽。
提示框應該會經常用吧，那幹嘛不把它封裝成一個插件呢！！這樣就不必每次用它，都去寫一遍或者copy一下，絕對影響效率，心情啊！！！
目前用的jQuery比較多，所以這裡就初步講講jQuery插件封裝咯。
思路：
1、 提供相應屬性，讓操作者可以改變；如果操作者沒有改變，使用預設屬性。
2、 利用提供的屬性，繪製出相對應的提示框。
詳情見下代碼：
(function ($){ var tip = function( p, ths ){ var _$ths = $(ths); var _$parent = _$ths.parent(); _$ths = _$ths.detach(); /* p合併自定義屬性,預設包括以下屬性設置: width 提示框內容區域的寬度,number content 提示框中的提示內容 */ p = $.extend({
width: 200, content:'sample' }, p); /* Draw:繪製提示框的函數 param: ths --> 提示框this */ var Draw = function(){ var children = '<div class="tipHead"></div>' +'<div class="tipBody">'+p.content+'</div>' +'<div class="tipTail"></div>'; //將children加入到提示框中 _$ths.append( children ); //動態設置提示框的樣式和內容區域的寬度 _$ths.addClass('tip').find('.tipBody').width( p.width ); _$parent.append(_$ths); };//End_Draw return (function(){ Draw(); _$parent = null; _$ths = null; })(); }; /* $.fn.tip:提示框插件，用於提示用戶 Param: property --> 自定義提示框的相關信息 */ $.fn.tip = function( property ) { tip( property, this ); };//End_$.fn.timeProcess
})(jQuery);
