 |
| jQuery powerFloat 實際執行畫面 |
使用方法：
第一步 先載入程式所需要的檔案
//套件的CSS設計檔
<link rel="stylesheet" href="/css/powerFloat.css" type="text/css" />
//使用Google ajax API 直接連結 jQuery 1.7.2的min版本
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
//套件的主程式碼
<script type="text/javascript" src="/js/jquery-powerFloat.js"></script>
第二步 為你要作用事件的地方加上識別名稱
<a id="trigger1" href="javascript:;" rel="targetBox">更多</a>
第三步 設計你要顯示出來的內容
<div id="targetBox" class="shadow target_box dn">
<div class="target_list">
<a href="javascript:;">1</a>
<a href="javascript:;">2</a>
<a href="javascript:;">3</a>
<a href="javascript:;">4</a>
<a href="javascript:;">5</a>
<a href="javascript:;">6</a>
<a href="javascript:;">7</a>
<a href="javascript:;">8</a>
</div>
<div class="target_list">
<a href="javascript:;">9</a>
<a href="javascript:;">10</a>
<a href="javascript:;">11</a>
<a href="javascript:;">12</a>
<a href="javascript:;">13</a>
<a href="javascript:;">14</a>
<a href="javascript:;">15</a>
<a href="javascript:;">16</a>
</div>
<div class="target_list" style="border-bottom:0;">
<a href="javascript:;">17</a>
<a href="javascript:;">18</a>
<a href="javascript:;">19</a>
<a href="javascript:;">20</a>
</div>
<a href="##" class="r mr5 target_more">顯示更多 »</a>
</div>
第四步 加入啟動程式的 JavaScript
$(function(){
$("#trigger1").powerFloat();
});
附上 jQuery powerFloat 可修改參數值
參數
|
預設
|
說明 |
width
|
"auto"
|
其他可選參數："inherit"，數值(px)(百分比等)，"auto"表寬度自動，"inherit"表寬度與方法觸發元素寬度一樣 |
offsets
|
{x:0, y:0}
|
浮動層的偏移值。可正可負。如果為正值，右下方元素右下方偏移，左上方元素左上方偏移。偏移方向為擴散狀 |
zIndex
|
999
|
浮動框層級。插件自帶小三角層級為999+1，數值上總是大1 |
eventType
|
"hover"
|
其他可選參數："click", "focus"，如果參數為其他，則綁定觸發浮動層的顯示與定位 |
showDelay
|
0
|
事件類型(eventType)為"hover"時浮動層顯示的延遲時間，單位毫秒 |
hideDelay
|
0
|
滑鼠移出對象時浮動層隱藏延遲時間 |
hoverHold
|
true
|
布林，浮動層是否鼠標懸停。如果為false，只要鼠標移出觸發元素，浮動層即隱藏 |
hoverFollow
|
false
|
其他可選參數：true, "x", "y"。是否鼠標跟隨。 "x"表示僅水平方向跟隨，"y"為垂直方向，true或其他參數為任意方向跟隨 |
targetMode
|
"common"
|
字符串，關鍵字參數還有："ajax", "list", "remind"。表示浮動層的類型 |
target
|
null
|
浮動層內容來源，優先選取來源，根據targetMode的不同，這裡的參數類型也有所不同 |
targetAttr
|
"rel"
|
自定義的標籤屬性。也是浮動層內容來源，可用作元素id，或是字符串 |
container
|
null
|
jQuery對象，轉載浮動層的容器，如果targetMode自定義，可以使用"plugin"關鍵字，表示使用插件自帶容器 |
reverseSharp
|
false
|
布林。尖角顯示是否反轉。默認ajax, remind是顯示三角的，其他如list和自定義形式是不顯示的 |
position
|
"4-1"
|
浮動層顯示的位置。此規則稍微複雜，下面有詳解 |
edgeAdjust
|
true
|
布林。如果浮動層在顯示屏之外，是否調整浮動層位置 |
showCall
|
$.noop
|
浮動層顯示時候的回調函數 |
hideCall
|
$.noop
|
浮動層隱藏時候的回調函數 |
作者網站：http://www.zhangxinxu.com/wordpress/
檔案大小：17.2 KB(包含範例)
檔案下載：http://www.zhangxinxu.com/study/down/jquery-powerFloat.zip
檔案備份：下載
0 意見