我這里說的提示框，就是當用戶將鼠標移動到需要提示的圖標時，就會在這圖標的位置出現一個提示框了。
咦，那這有什么好說的呢？
如果你來實現這一效果，你會怎么做呢？
初步的做法嘛，就是利用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);
| 拓展閱讀： |