為什么想寫此插件，想來想去，歸結(jié)為一個(gè)字：“懶”。不想為明明兩個(gè)類似的功能分別寫代碼，本應(yīng)喝茶看美女的休閑時(shí)光晃蕩在本可避免的代碼上，對(duì)于我來講，就是白白耗費(fèi)自己的青春。于是，干脆，一鼓作氣，把這些類似的功能集合到一起，一個(gè)插件搞定，一了百了了。這種感覺就好比《大話西游》里悟空一巴掌拍死唐僧這只蒼蠅一樣。那，這里提及的類似的功能是指？當(dāng)當(dāng)當(dāng)當(dāng)，就是與某元素有位置關(guān)系的浮動(dòng)層（例如tip類效果，鼠標(biāo)經(jīng)過顯示大圖，下拉列表等）。

插件名為jquery-powerFloat.js。//zxx:之前我喜歡用”.”連接，后發(fā)現(xiàn)在使用combo合并腳本的時(shí)候會(huì)出問題，于是，現(xiàn)在使用”-”連接名稱了。

支持hover, click, focus以及無事件觸發(fā)；支持多達(dá)12種位置的定位，出界自動(dòng)調(diào)整；支持頁面元素加載，Ajax加載，下拉列表，提示層效果，tip類效果等；可自定義裝載容器；內(nèi)置UI不錯(cuò)的裝載容器；支持鼠標(biāo)跟隨等。

demo
您可以狠狠地點(diǎn)擊這里：萬能浮動(dòng)插件powerFloat測(cè)試頁面

下為demo頁面中鼠標(biāo)經(jīng)過顯示大圖效果截圖：

下載
JS文件下載：jquery-powerFloat.js(未壓縮)　或　jquery-powerFloat-min.js(壓縮)
zip打包下載：jquery-powerFloat.zip

//zxx:下載均右鍵 – [目標(biāo)|鏈接]另存為

使用很簡(jiǎn)單，統(tǒng)一的模式，就是$(選擇器).powerFloat({..});具體使用如下：

<link rel="stylesheet"  type="text/css" />

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script><script type="text/javascript" src="http://www.zhangxinxu.com/study/js/jquery-powerFloat.js"></script>

假設(shè)此時(shí)頁面上有個(gè)鏈接，其HTML如下：

<a id="trigger" href="javascript:;" rel="targetBox">經(jīng)過我</a>

則：

$("#trigger").powerFloat();

如果要用幾個(gè)關(guān)鍵詞來概括此插件，無非就是觸發(fā)元素(trigger，也就是選擇器綁定對(duì)象)，觸發(fā)事件(API中的eventType)，浮動(dòng)元素(target，各種方式獲取的元素)，定位(target的定位)。下文中，trigger一詞就是指觸發(fā)元素，target指浮動(dòng)元素。

由于插件集合的功能較多，所以使用規(guī)則稍微多了點(diǎn)，具體可參見下面的API表格展示，之后的詳細(xì)解釋。這里就不多說了。

(create by zhangxinxu 2010-12-15)

插件可以實(shí)現(xiàn)的功能多了，支持的事件多了，又要有精煉的API，API的使用規(guī)則自然而然也就多了，復(fù)雜了。但是，一旦了解這些規(guī)則后，工作就將變得異常輕松，你會(huì)發(fā)現(xiàn)生活原來如此美好。

1. width
寬度值，與CSS中的width屬性的些值是一樣的。

這里的width也是可以是”auto”(默認(rèn))，”inherit”，以及具體的寬度值。但是，有所不同的是這里的”inherit”，繼承的不是父標(biāo)簽的寬度，而是繼承的觸發(fā)元素的寬度。舉個(gè)例子，我鼠標(biāo)移動(dòng)一個(gè)a標(biāo)簽的文字鏈接上，結(jié)果顯示了浮動(dòng)層，如果此時(shí)width參數(shù)設(shè)置的值是”inherit”，則浮動(dòng)層的寬度就是這個(gè)a標(biāo)簽的寬度。此屬性在等寬下拉列表下非常有用。

2. offsets
相對(duì)于目標(biāo)位置的偏移值。默認(rèn)是{x:0, y:0}，其中x表示水平方向偏移，y表示垂直方向偏移。根據(jù)浮動(dòng)層(target)與觸發(fā)元素(trigger)的位置不同，offsets的偏向也是不同的，左側(cè)位置和上部位置offsets是向左上方偏移，而要是浮動(dòng)層和觸發(fā)元素在右側(cè)和下方位置接觸，則offsets值表示右下方的偏移，大致意思如下圖所示：

其實(shí)只要意識(shí)到這里的offsets偏移是以觸發(fā)元素(trigger)為參考點(diǎn)進(jìn)行偏移就可以了。trigger位置固定，target相對(duì)偏移，以trigger為中心，輻射狀偏移。舉個(gè)例子吧，如果offsets.x = 10，那么要是浮動(dòng)層在右側(cè)，則右偏移10像素，要是浮動(dòng)層在左側(cè)則左偏移10像素。

3. zIndex
浮動(dòng)層的層級(jí)，浮動(dòng)層都是采用的絕對(duì)定位，所以有層級(jí)，默認(rèn)大小為999。插件自帶的UI中的小三角也是絕對(duì)定位，其層級(jí)比浮動(dòng)層高一級(jí)，所以，小三角默認(rèn)層級(jí)是1000.

4. eventType
事件類型，一般而言，此參數(shù)無非這幾個(gè)：”hover”(默認(rèn)), “click”, “focus”以及null，其中”hover”表示鼠標(biāo)懸停和移出事件，”click”表示點(diǎn)擊事件，”focus”表示獲得焦點(diǎn)事件，適用于表單元素，null表示無事件，也就是trigger綁定了powerFloat方法即觸發(fā)，此參數(shù)在點(diǎn)擊A元素，但是讓B元素上顯示提示上很有用。

5. showDelay
顯示延遲。只有當(dāng)eventType為”hover”時(shí)此參數(shù)才有用，”click”, “focus”都是無延遲執(zhí)行的。單位毫秒，當(dāng)為大于0的整數(shù)時(shí)生效（使用可參見demo中自定義Tip效果）。

6. hideDelay
鼠標(biāo)移出延遲。只有當(dāng)eventType為”hover”時(shí)此參數(shù)才有用。其中有兩種情況下默認(rèn)是有hideDelay的，一是當(dāng)hoverHold參數(shù)為true的時(shí)候，會(huì)有200毫秒的隱藏延遲；另外一種情況就是eventType為”focus”時(shí)，失去焦點(diǎn)隱藏，也是有200毫秒的延遲關(guān)閉（保護(hù)點(diǎn)擊事件）。

7. hoverHold
當(dāng)鼠標(biāo)經(jīng)過浮動(dòng)層時(shí)浮動(dòng)層是否依然顯示。只有當(dāng)eventType為”hover”時(shí)此參數(shù)才有用。如果為false，則表示鼠標(biāo)一旦離開trigger(觸發(fā)元素)，則target(浮動(dòng)元素)隱藏（使用可參見demo中自定義Tip效果）。

8. hoverFollow
是否鼠標(biāo)跟隨。參數(shù)可以是false，true以及關(guān)鍵字”x”, “y”，其中false為默認(rèn)值，表示不鼠標(biāo)跟隨，”x”表示僅水平方向鼠標(biāo)跟隨，”y”表示僅垂直方向，無論是”x”還是”y”，浮動(dòng)層都不會(huì)與觸發(fā)元素發(fā)生重疊的，只是單向的位置移動(dòng)。但是，如果hoverFollow為true，則是真正意義上的鼠標(biāo)跟隨，target的左上角會(huì)緊隨鼠標(biāo)，也會(huì)與trigger發(fā)生重疊，注意，此時(shí)應(yīng)該設(shè)置一定的offsets值，否則會(huì)因?yàn)榕c鼠標(biāo)位置過近的原因，反復(fù)觸發(fā)鼠標(biāo)移入移出事件，要是瀏覽器性能不夠好，小心頁面被晃蕩掉。

9. targetMode
浮動(dòng)層類型。字符串參數(shù)。內(nèi)置關(guān)鍵字參數(shù)有：”common”, “ajax”, “l(fā)ist”, “remind”。其中”common”為默認(rèn)，表示加載頁面上的元素，元素就是浮動(dòng)層本身；”ajax”就是加載外部元素，例如圖片，HTML片段等，默認(rèn)使用內(nèi)置的容器，含loading效果；”list”專門用作下拉列表；”remind”是提示，內(nèi)容只能是文字或是含有HTML代碼的字符串。此插件強(qiáng)大之處就是您可以自定義浮動(dòng)層類型。例如，在demo中，我自己自定義的tip類型，如何定義，如何寫樣式完全取決于您的設(shè)計(jì)與頁面需求。然后，定位，裝載等全部交給插件，這個(gè)后面還會(huì)單獨(dú)講述。

10. target
非常重要與最常用的一個(gè)參數(shù)，是浮動(dòng)層的內(nèi)容來源，甚至就是浮動(dòng)層本身(targetMode為common的部分情況)。默認(rèn)是null，由于target參數(shù)是插件兩個(gè)浮動(dòng)層內(nèi)容獲取來源之一，且是優(yōu)先獲取來源，所以，當(dāng)target為null時(shí)，插件會(huì)從下一個(gè)參數(shù)targetAttr獲取內(nèi)容。根據(jù)targetMode參數(shù)不同，target的類型也是跟著變化的。

11. targetAttr
另外一個(gè)獲取浮動(dòng)層內(nèi)容的途徑，如果說是target參數(shù)是顯式獲取，那么targetAttr就是隱式獲取。此參數(shù)獲取順序在target之后，是通過觸發(fā)元素自身一些標(biāo)簽屬性自帶的參數(shù)或是值什么的作為浮動(dòng)層的內(nèi)容。默認(rèn)是rel，rel屬性是a標(biāo)簽的合法屬性，因而很常用。雖然，targetAttr的類型只能是字符串，但是標(biāo)簽上屬性對(duì)應(yīng)的值與targetMode也是有關(guān)聯(lián)的。例如，”common”模式下，值只能是元素id，”ajax”模式下只能是地址等。于是，結(jié)合上面的”target”參數(shù)，我羅列了一個(gè)表格，顯式了不同targetMode模式下target/targetAttr參數(shù)可賦值類型。

(create by zhangxinxu 2010-12-15)

12. container
jQuery對(duì)象（需當(dāng)前頁面上存在），轉(zhuǎn)載浮動(dòng)層的容器，如果targetMode自定義，可以使用"plugin"關(guān)鍵字，表示使用插件自帶容器（會(huì)顯示三角）。

13. reverseSharp
一種聰明的顯示與不顯示三角的方法。此參數(shù)含義指對(duì)當(dāng)前三角使用規(guī)則進(jìn)行反轉(zhuǎn)?，F(xiàn)在默認(rèn)三角顯示規(guī)則是：只有當(dāng)targetMode為”ajax”和”remind”時(shí)會(huì)顯示三角，任何情況都不顯示插件內(nèi)的三角指向效果。但是，如果您覺得這個(gè)三角很卡哇伊，想在自己自定義的浮動(dòng)層上使用，就可以使用reverseSharp參數(shù)，讓其顯示，三角的居中定位插件都已經(jīng)幫你完成了?；蚴鞘悄鉇jax時(shí)想使用自己新寫的box裝載浮動(dòng)內(nèi)容，而不需要這個(gè)三角，就可以使用reverseSharp參數(shù)，讓其不顯示。這里說了很多次的三角指的是（見下圖）：

14. position
看上去簡(jiǎn)單，實(shí)際上最為擾人的一個(gè)參數(shù)。是自己為了更適應(yīng)各種情況的定位而自己制定的一套規(guī)則。一開始自己嘗試使用slide-left這類字符串關(guān)鍵字表示各個(gè)位置，但是，實(shí)際發(fā)現(xiàn)，trigger與target相互組合的各個(gè)位置實(shí)在是太多了，幾個(gè)英文字符串根本表示不來，同時(shí)在實(shí)現(xiàn)上也不太容器，于是自己制定了一套比較易懂的定位規(guī)則，使用數(shù)字表示位置。其參數(shù)值格式一定是”數(shù)字-數(shù)字”這種格式的字符串，中間的分隔線”-”的作用就是分隔，其中第一個(gè)數(shù)字表示觸發(fā)元素trigger的位置，后一個(gè)數(shù)字表示浮動(dòng)元素target的位置，也就是”trigger-target”。那么，現(xiàn)在重要的就是知道元素的各個(gè)位置對(duì)應(yīng)的數(shù)字是多少就可以了。元素各個(gè)位置對(duì)應(yīng)數(shù)值如下圖：

四個(gè)邊角，按照CSS margin/padding屬性的順序，依次是1, 2, 3, 4，而四邊的中心按照順時(shí)針方向依次是5, 6, 7, 8。無論是trigger元素還是target元素都遵循這個(gè)位置規(guī)則。于是，插件默認(rèn)的position參數(shù)”4-1″之的就是下圖所示的位置：

trigger的4位置與target的1位置重合。哇哦，聰明的你可能意識(shí)到，每個(gè)元素8個(gè)位置，合起來豈不是有64種（數(shù)學(xué)退化了，不正確歡迎指正）不同的布局方式。確實(shí)，64種情況，是要搞死人的，因此，考慮到實(shí)際使用情況以及簡(jiǎn)化布局的類型，自己又制定了一個(gè)布局規(guī)則以減少可能的布局情況，就是：區(qū)域無重疊，邊框重疊，居中對(duì)居中規(guī)則。

區(qū)域無重疊指布局元素主體垂直方向上無重疊（無考慮offsets偏移），例如下圖這種(“1-1″)情況就是不在規(guī)則內(nèi)的：

所謂“邊框重疊”，就是要有邊框線重疊，于是下面這種情況(“3-1″)就不在規(guī)則內(nèi)：

居中對(duì)居中就是指邊框中心點(diǎn)只能對(duì)于邊框的中心點(diǎn)，所以下面這種情況就不在規(guī)則內(nèi)：

因此，實(shí)際上合法的布局為下面的這12種，”4-1″, “1-4″, “5-7″, “2-3″, “2-1″, “6-8″, “3-4″, “4-3″, “8-6″, “1-2″, “7-5″, “3-2″，其他所有的布局類型都會(huì)被重置為默認(rèn)的”4-1″

15. edgeAdjust
布爾值，按照設(shè)定的position參數(shù)，如果浮動(dòng)層的位置出了屏幕，是否重新定位。默認(rèn)為true，表示進(jìn)行重定位。這里的重定位規(guī)則也比較復(fù)雜，但是，對(duì)于使用者而言，了解這里的規(guī)則沒有任何意義，所以這里不展開敘述。此參數(shù)當(dāng)hoverFollow為true時(shí)，或是位置關(guān)鍵字時(shí)，重定位功能被大大削弱了。

16. showCall
浮動(dòng)層顯示的回調(diào)函數(shù)?；卣{(diào)函數(shù)內(nèi)部$(this)表示當(dāng)前的trigger，還支持一個(gè)參數(shù)，表示當(dāng)前的target。

17. hideCall
浮動(dòng)層隱藏時(shí)執(zhí)行的回調(diào)函數(shù)。回調(diào)函數(shù)內(nèi)部$(this)表示當(dāng)前的trigger。

1. 三角的顏色
插件為了與容器的邊框色和背景色一致，三角的顏色是自動(dòng)在容器上尋找相一致的顏色的。并且，三角顏色的選擇也是有方向性的，例如上面顯示的三角，只會(huì)檢測(cè)是否有下邊框顏色，而不會(huì)錯(cuò)誤的選取上邊框的顏色值。所以，您在使用自定義容器的時(shí)候不用擔(dān)心容器的顏色會(huì)與插件的三角的顏色不一致，即使設(shè)置上下左右四個(gè)邊框顏色不一樣都沒有關(guān)系。如找不到邊框色或是背景色，相對(duì)應(yīng)三角是不顯示的。

① class的命名規(guī)則
此插件有點(diǎn)不好的，就是class類名都嵌入在了js代碼中，但是，自己覺得還好，想全部提出來很難的。所有插件功能相關(guān)的class命名都是以下劃線(“_”)連接，所有命名都是以”float”為前綴。例如：”float_ajax_image”, “float_remind_box”等。

<div id="floatBox_list" class="float_list_box"></div>

您可以在插件附帶的powerFloat.css中找到諸如，”float_ajax_box”, “float_remind_box”等樣式，就是針對(duì)targetMode為”ajax”和”remind”類型的浮動(dòng)層。當(dāng)然，容器的class是支持自定義的。例如，您設(shè)置targetMode的值為”tip”，那么您就可以為類名float_tip_box書寫您自定義的容器樣式了。例如下面：

.float_tip_box { line-height: 18px; padding: 0 3px; background-color: #ffffe0; -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, .4); -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, .4); box-shadow: 1px 1px 2px rgba(0, 0, 0, .4); border: 1px solid #333; position:absolute;}

這就是demo頁面中自定義的tip效果，外部框框的樣式。這個(gè)效果僅僅是示例，發(fā)動(dòng)你無限的創(chuàng)意，在powerFloat插件的幫助下，要想有什么樣的浮動(dòng)UI效果基本上都可以實(shí)現(xiàn)。

③ 插件隱藏的class
此插件還隱藏了很多可供使用的類名，具體可參見下表：

3. “l(fā)ist”模式下target參數(shù)的數(shù)據(jù)
當(dāng)targetMode為”list”的時(shí)候，數(shù)據(jù)來源僅來自target，此target參數(shù)必須是數(shù)組，否則沒有任何浮動(dòng)層出現(xiàn)。數(shù)組內(nèi)容可以是字符串或是對(duì)象字面量。如果是字符串，內(nèi)容會(huì)被直接依次裝到li標(biāo)簽內(nèi)，例如：

target: ["唐麗霞", "徐棟梁", "成霞", "王慶花", "王臘梅", "朱小麗", "束方娟", "吉回秀", "陳陽", "更多 >>"]

可以看到，最后的“更多”鏈接也被直接裝到列表中了。如果是使用對(duì)象字面量，則字面量的屬性名是定死的。固定格式如下：

{ href: "http://www.zhangxinxu.com/", text: "腳本之家"}

插件會(huì)自動(dòng)尋找文字內(nèi)容和鏈接，而拼成一段a標(biāo)簽HTML片段放置到li標(biāo)簽中，上面這個(gè)對(duì)象字面量顯示的HTML就會(huì)是：

<li><a  class="float_list_a">腳本之家</a></li>

于是，一個(gè)對(duì)象數(shù)組就組成了鏈接列表，于是就形成了下拉菜單了。

4. 開放的API方法
與之前的zxxbox彈框插件不同，此處的插件基本上所有的方法都被我私有了，外部是訪問不了的。除了：包裝器.poaerFloat();外，只預(yù)留了唯一的一個(gè)開發(fā)的API方法，就是$.powerFloat.hide();，就是隱藏目前顯示的浮動(dòng)層。這個(gè)方法的使用在demo頁面中是有所體現(xiàn)的。

demo中雖然展現(xiàn)了一些實(shí)例，但是畢竟是為了測(cè)試插件功能而作的測(cè)試，是否在實(shí)際應(yīng)用中可以大放異彩還讓人懷疑的，因此，我在國內(nèi)一些大的知名的網(wǎng)站上隨便找了幾個(gè)有關(guān)浮動(dòng)層的交互，看看此powerFloat插件如何很方便的實(shí)現(xiàn)的。

1. 淘寶的頂部下拉
下圖為淘寶網(wǎng)站的下拉效果截圖：

而我使用自己寫的powerFloat插件可以更方便的實(shí)現(xiàn)上面的效果，效果如下截圖：

您可以狠狠地點(diǎn)擊這里：powerFloat實(shí)現(xiàn)淘寶的列表下拉demo

這里就是使用默認(rèn)的”hover”事件，使用的插件自帶的list下拉列表功能。淘寶網(wǎng)的實(shí)現(xiàn)借助了標(biāo)簽的嵌套（下拉內(nèi)容div寫好藏在了relative屬性的標(biāo)簽下），以及手動(dòng)的位置計(jì)算（基本上每個(gè)下拉都有一定position定位），增加了HTML的代碼量，CSS代碼量，以及工作量等。如果所有的浮動(dòng)效果同一，自然輕松不少。

2. QQ郵箱的自定義下拉
下圖為我QQ郵箱中的自定義下拉截圖：

而我使用自己寫的powerFloat插件可以很方便的實(shí)現(xiàn)上面的效果，效果如下截圖：

您可以狠狠地點(diǎn)擊這里：powerFloat實(shí)現(xiàn)QQ郵箱自定義下拉demo

這里使用的是”click”事件，使用common模式裝載元素內(nèi)容（也可以改用list模式實(shí)現(xiàn)）。與效果相比沒有下拉動(dòng)畫與收起動(dòng)畫，主要是自己對(duì)下拉動(dòng)畫收起動(dòng)畫沒有什么好感，有些啰嗦；而且位置是會(huì)上下計(jì)算重定位的，要是列表在頁面的上面顯示，出現(xiàn)下拉就會(huì)奇怪，所有沒有添加下拉動(dòng)畫。

3. 人人網(wǎng)好友搜索框的半透明提示
下圖為人人網(wǎng)原來的好友搜索半透明框截圖：

而我使用自己寫的powerFloat插件可以非常非常方便地實(shí)現(xiàn)與之一樣的效果。

調(diào)用代碼如下：

$("#navSearchInput").powerFloat({ eventType: "focus", targetMode: "search", target: "多個(gè)關(guān)鍵字用空格隔開<br />（例：汪洋 北京大學(xué)）"});

最后的效果如下截圖：

您可以狠狠地點(diǎn)擊這里：powerFloat實(shí)現(xiàn)人人網(wǎng)搜索半透明提示demo

這里使用的是”focus”事件，使用的是自定義浮動(dòng)模式(“search”)。

前段時(shí)間，還在暖陽下悠閑地釣魚，今天就大雪紛飛，時(shí)間久這樣子，一晃蕩就不見了。此插件從開始著手寫到現(xiàn)在即將發(fā)布差不多耗了10天的時(shí)間，平時(shí)手頭上還有不少工作，所以最近一段時(shí)間是比較忙的。CSS 相對(duì)/絕對(duì)(relative/absolute)定位系列還有至少三篇文章積壓著沒有寫，個(gè)人網(wǎng)站還要做WAP版。所以，年前是非常忙碌的了。

不好意思，每次文章要結(jié)束的時(shí)候都忍不住發(fā)些小牢騷，舒緩舒緩自己小小的情緒。我對(duì)自己的寫的這個(gè)powerFloat插件做個(gè)簡(jiǎn)單的評(píng)價(jià)吧：當(dāng)初設(shè)想的時(shí)候會(huì)興奮，覺得很牛叉，什么浮動(dòng)層都可以一個(gè)插件實(shí)現(xiàn)；但是，現(xiàn)在實(shí)現(xiàn)了，卻沒有了當(dāng)初的興奮，因?yàn)殡m然看上去插件功能強(qiáng)大了，但是，同時(shí)規(guī)則也變得復(fù)雜了，學(xué)習(xí)成本變高了，同時(shí)插件本身被限制的地方也多了，例如由于考慮到各種布局情況，不能隨便添加下拉動(dòng)畫效果等。事物均有兩面性，有利也有弊。有時(shí)候自我感覺良好的東西別人不一定良好，好比看日式愛情動(dòng)作片的人爽，做的人卻不一定爽。

代碼質(zhì)量方面，還是有不少地方值得改進(jìn)的，例如對(duì)this保護(hù)上的處理。就學(xué)習(xí)而言，收獲還是不小的，首先對(duì)對(duì)象字面量中this的使用有了進(jìn)一步的認(rèn)識(shí)，對(duì)jQuery的data屬性(結(jié)合HTML5中的data-)有了更感性的認(rèn)識(shí)等。

雖然這兩天的不斷的測(cè)試發(fā)現(xiàn)了不少bug且已經(jīng)修復(fù)，但是畢竟是一個(gè)人，時(shí)間精力有限，且不是專業(yè)的測(cè)試工程師，關(guān)鍵是自己js的功力仍然很稚嫩，所以插件肯定還會(huì)有不少的bug的。要是您不嫌棄試用了該插件并發(fā)現(xiàn)一些bug或是有什么改進(jìn)的意見，非常歡迎提出來。您可以通過評(píng)論的形式，或是到這里進(jìn)行交流，不甚感謝。
腳本之家打包下載地址 基于jQuery的萬能浮動(dòng)框插件測(cè)試

最新評(píng)論