jQuery萬能浮動框插件測試
http://www.zhangxinxu.com/study/201012/jquery-power-float-demo.html
一、加載頁面上元素
HTML代碼：
<a id="trigger1" href="javascript:;" rel="targetBox">默認rel加載</a>
JS代碼：
$("#trigger1").powerFloat();
HTML代碼：
<a id="trigger2" href="###">target參數加載</a>
JS代碼：
$("#trigger2").powerFloat({ target: $("#targetBox") });
HTML代碼：
<a id="trigger3" href="###">target參數為選擇器</a>
JS代碼：
$("#trigger3").powerFloat({ target: ".target_box" });
二、Ajax加載外部元素
HTML代碼：
<a id="trigger4" href="javascript:;" rel="http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg">rel屬性顯示圖片</a>
JS代碼：
$("#trigger4").powerFloat({ targetMode: "ajax" });
HTML代碼：
<a id="trigger5" href="javascript:;">target參數為圖片地址</a>
JS代碼：
$("#trigger5").powerFloat({ target: "http://tp3.sinaimg.cn/2305056670/180/5608200132/0", targetMode: "ajax" });
加載外部HTML片段：點擊切換顯示
HTML代碼：
<button id="trigger6">點擊切換顯示</button>
JS代碼：
$("#trigger6").powerFloat({ eventType: "click", target: "/study/201009/html-load.html", targetMode: "ajax" });
加載外部頁面數據失敗：點擊測試
HTML代碼：
<button id="trigger7">點擊測試</button>
JS代碼：
$("#trigger7").powerFloat({ eventType: "click", target: "http://www.baidu.com/", targetMode: "ajax" });
三、下拉列表的顯示
純文字列表下拉：點擊顯示姓名列表▼
HTML代碼：
<button id="trigger8">點擊顯示姓名列表▼</button>
JS代碼：
$("#trigger8").powerFloat({ width: "inherit", eventType: "click", target: ["唐麗霞", "徐棟梁", "成霞", "王慶花", "王臘梅", "朱小麗", "束方娟", "吉回秀", "陳陽", "<a href='##'>更多 >></a>"], targetMode: "list" });
帶鏈接的文字下拉： 更多文章▼
HTML代碼：
<a id="trigger9" href="/wordpress/">更多文章▼</a>
JS代碼：
$("#trigger9").powerFloat({ width: 250, target: [ { href: "##", text: "這是文章1的說" }, { href: "##", text: "啊，看，文章2" }, { href: "##", text: "啊啦，不好，我把文章3忘家里了！" }, { href: "##", text: "馬薩噶，這就是傳說中的...文章4..." }, { href: "##", text: "什么嘛，就是文章5，害我白期待一場" } ], targetMode: "list" });
HTML代碼：
<a id="trigger10" href="#">無列表數據顯示</a>
JS代碼：
$("#trigger10").powerFloat({ targetMode: "list" });
四、簡單提示的顯示
輸入密碼：
再次輸入：
HTML代碼：
輸入密碼：<input class="pwdTrigger" type="password" placeholder="6~20個字符" /> 再次輸入：<input class="pwdTrigger" type="password" placeholder="輸入與上面一樣的密碼" />
JS代碼：
$(".pwdTrigger").powerFloat({ eventType: "focus", targetMode: "remind", targetAttr: "placeholder", position: "1-4" });
點擊確定按鈕或失去焦點后顯示提示(文本框數據留空/輸入奇怪字符等)：
?確定
HTML代碼：
<input id="posTrigger1" type="text" /> <button id="trigger11">確定</button>
JS代碼：
var fnPosTri = function() { var oPosTri = $("#posTrigger1"), vPosTri = $.trim(oPosTri.val()); if (vPosTri === "") { oPosTri.powerFloat({ eventType: null, targetMode: "remind", target: "輸入內容不能為空！", position: "1-4" }).focus(); } else if (/\W/g.test(vPosTri)) { oPosTri.powerFloat({ eventType: null, targetMode: "remind", target: "只能輸入英文字符、數字和下劃線", position: "1-4" }).focus(); } else { $.powerFloat.hide(); } }; $("#trigger11").bind("click", fnPosTri); $("#posTrigger1").bind("blur", fnPosTri);
四、自定義浮動提示
模擬title的tip提示顯示：? 摸我 ? 我也要 ? 還有我
HTML代碼：
<a class="tipTrigger" href="###" tip="摸我">摸我</a> <a class="tipTrigger" href="###" tip="我也要">我也要</a> <a class="tipTrigger" href="###" tip="還有我">還有我</a>
JS代碼：
$(".tipTrigger").powerFloat({ offsets: { x: -10, y: 22 }, showDelay: 200, hoverHold: false, targetMode: "tip", targetAttr: "tip", position: "3-4" });
右上角固定位置的操作提示層(ajax請求中提示，頁面跳轉中提示等)：
登錄?提交?刷新
HTML代碼：
<span id="targetFixed" class="target_fixed"></span> <button class="operateTrigger">登錄</button> <button class="operateTrigger">提交</button> <button class="operateTrigger">刷新</button>
CSS代碼：
.target_fixed { height:25px; padding:1px; position:fixed; _position:absolute; top:0; right:0; }
JS代碼：
$(".operateTrigger").click(function() {
var txt = $(this).text();
//IE6位置
if (!window.XMLHttpRequest) {
$("#targetFixed").css("top", $(document).scrollTop() + 2);
}
//創建半透明遮罩層
if (!$("#overLay").size()) {
$('<div id="overLay"></div>').prependTo($("body"));
$("#overLay").css({
width: "100%",
backgroundColor: "#000",
opacity: 0.2,
position: "absolute",
left: 0,
top: 0,
zIndex: 99
}).height($(document).height());
}
//顯示操作提示，最關鍵核心代碼
$("#targetFixed").powerFloat({
eventType: null,
targetMode: "doing",
target: "正在" + txt + "中...",
position: "1-2"
});
//定時關閉，測試用
setTimeout(function() {
$("#overLay").remove();
$.powerFloat.hide();
}, 2000);
});
五、自定義裝載容器
自定義容器裝載外部圖片(無柔化投影)：
CSS代碼：
.custom_container{position:absolute; background-color:rgba(0, 0, 0, .5); background-color:#999\9;}
.custom_container img{padding:0; position:relative; top:-5px; left:-5px;}
HTML代碼：
<div id="customContainer" class="custom_container"></div> <input id="trigger12" type="button" src="http://image.zhangxinxu.com/image/study/s/s256/mm10.jpg" value="點擊我" />
JS代碼：
$("#trigger12").powerFloat({ eventType: "click", targetMode: "ajax", targetAttr: "src", container: $("#customContainer"), reverseSharp: true });
自定義容器裝載頁面元素：
HTML代碼：
<input id="trigger13" type="button" src="targetBox" value="點擊我" />
JS代碼：
$("#trigger13").powerFloat({ eventType: "click", targetMode: null, targetAttr: "src", container: $("#customContainer") });
六、鼠標跟隨效果
縮略圖顯示大圖，同時鼠標跟隨(垂直方向)：
CSS代碼：
.dib { display: inline-block; }
HTML代碼：
<a class="dib" id="trigger14" > <img src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" /> </a>
JS代碼：
$("#trigger14").powerFloat({ targetMode: "ajax", targetAttr: "href", hoverFollow: "y", position: "6-8" });
縮略圖顯示大圖，同時鼠標跟隨(水平方向)：
CSS代碼：
.dib { display: inline-block; }
HTML代碼：
<a class="dib" id="trigger15" > <img src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" /> </a>
JS代碼：
$("#trigger15").powerFloat({ targetMode: "ajax", targetAttr: "href", hoverFollow: "x", hoverHold: false, position: "5-7" });
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
