jQuery zxxbox彈出框插件(v3.0)測試頁面

源文件下載.zip 16.6k

1、內置彈框

顯示最簡單的內置的信息肯定提示框：點擊我

JS代碼：

$("#test1").click(function(){ $.zxxbox.remind("你已成功受邀參加威尼斯電影節。"); });

帶回調函數的信息確認提示框：點擊我

JS代碼：

$("#test2").click(function(){ $.zxxbox.remind('美國駐滬領事館權威發佈：上半年<a href="#nogo" title="上海">上海</a>赴美留學3.2萬人。', function(){ alert("哇哈哈，這是回調函數顯示的內容：今年上海的學生簽證經過率達到了95%。去年這一數字爲90%。"); }, { title: "參考消息" }); });

顯示內置的詢問提示框：點擊我

JS代碼：

$("#test3").click(function(){ $.zxxbox.ask("確認改變頁面的背景色爲天藍色", function(){ $("body").css("background-color", "azure"); $.zxxbox.hide(); }, null, { title: "友情提示" }); });

2、裝載頁面上的元素

加載頁面上一段登陸的HTML：登陸

HTML代碼：

<div id="login" style="padding:40px; display:none;"> <p>用戶名：<input id="unseName" type="text" size="20" /></p> <p class="mt10 mb10">密&nbsp;&nbsp;碼：<input type="text" size="20" /></p> <p><button id="loginBtn">登陸</button><button id="cancelBtn">取消</button></p> </div>

JS代碼：

$("#test4").click(function(){ $("#login").zxxbox(); //或者是$.zxxbox($("#login")); });
$("#loginBtn").click(function(){ /* * 一些登陸操做 * */ alert("登陸成功！");
    $.zxxbox.hide();
});
$("#cancelBtn").click(function(){
    $.zxxbox.hide();						   
});

使用a標籤的錨點加載頁面元素：點擊我-登陸

HTML代碼：

<a id="test5" href="#login">點擊我-登陸</a>

JS代碼：

$("#test5").zxxbox();

a標籤自己做爲元素被加載：點擊我-被裝載到彈框

HTML代碼：

<a href="#" class="ml10 mr10" id="test6">點擊我-被裝載到彈框</a>

JS代碼：

$("#test6").click(function(){
    $(this).zxxbox({
        ajaxTagA: false,
        height: 80   
    });
    return false;
});

3、Ajax裝載頁面外的元素

a標籤連接地址加載之圖片：點擊我-顯示美女圖片

HTML代碼：

<a id="test7" target="_blank" href="http://image.zhangxinxu.com/image/study/s/s512/mm19.jpg">點擊我-顯示美女圖片</a>

JS代碼：

$("#test7").zxxbox({
    bar: false,
    bgclose: true
});

a標籤之加載靜態頁面：點擊我-加載HTML靜態頁

HTML代碼：

<a id="test8" href="html-load.html">點擊我-加載HTML靜態頁</a>

JS代碼：

$("#test8").zxxbox();

直接使用zxxbox的ajax方法加載外部數據：加載

JS代碼：

$("#test9").click(function(){
    $.zxxbox.ajax("php-load.php");						   
});

4、zxxbox一些參數使用舉例

不顯示半透明背景層：點擊我

JS代碼：

$("#test10").click(function(){ $.zxxbox('<div class="wrap_remind">最近貌似《盜夢空間》很熱啊！</div>', { bg: false }); });

不顯示標題欄的關閉按鈕：點擊我

JS代碼：

$("#test11").click(function(){
    $.zxxbox.remind("外灘，一對戀人，女撒嬌道:親愛的，據說過一陣要上映一個特別浪漫的電影，狄仁傑與山楂樹之戀...",
        function(){ //$(this)指代當前彈框的肯定按鈕jQuery對象 //禁用肯定按鈕 $(this).attr("disabled", "disabled");
        }, {
            btnclose: false				
    });					
});

彈框可拖拽：點擊我

JS代碼：

$("#test12").click(function(){
    $.zxxbox.remind("點擊按住標題欄能夠進行拖拽~~", null, { drag: true });					
});

彈框位置不隨滾動條滾動（IE6有晃動）：點擊我

JS代碼：

$("#test13").click(function(){
    $.zxxbox.remind("彈框的位置遊離於滾動條以外~~", null, { fix: true });					
});

彈窗打開後定時關閉：點擊我

JS代碼：

$("#test14").click(function(){
    $.zxxbox.remind("此彈框將在3秒鐘後關閉，如今倒計時3,2,1...", null, { delay: 3000 });					
});

彈窗關閉後觸發回調方法：點擊我

JS代碼：

$("#test15").click(function(){
    $.zxxbox.remind(
        "此彈窗關閉後，頁面會刷新~~",
        null,
        {
            onclose: function(){ 
                window.location.href=window.location.href;
            }
    });					
});

5、一些複雜狀況使用舉例

彈框高度會動態增長：點擊我

$("#test16").click(function(){ var elements = $('<div style="width:400px; padding:20px; display:none;">與70後相比，即將步入30歲的80後大多工做還不夠穩定，房子、車子彷佛也是很遙遠的事情，並且，這其中還有爲數可觀的大齡青年。在變革的社會中成長起來的80後承擔着更多來自現實和心理上的雙重壓力。邁入而立之年的80後，本身的前方在哪裏？本身又能因何而立？<br /><a id="showRelElement" href="javascript:void(0);" rel="beRelElement">顯示更多>></a><div id="beRelElement" class="mt10 dn">恐怕，就連孔子也不會想到，2000多年前組合出的4個字——「三十而立」，現在會由於一個叫「80後」的羣體，再度引起國人的集體思考。<br /><br />三十而立，那麼，何爲「立」？最通俗慣常的說法，30歲應該成家立業，有所做爲。而最低的要求則是30歲的人應該能依靠本身的本領，獨立承擔責任，並已肯定本身的人生目標與發展方向。</div></div>'); $.zxxbox(elements, { onshow: function() { protect: false, $("#showRelElement").click(function() { var rel = $(this).attr("rel"); if (rel) { $("#"+rel).slideDown(function() { $.zxxbox.setPosition(true); }); $(this).hide(); } return false; }); } }); });

多a標籤加載外部元素（如圖片）： 加載圖片1 加載圖片2 加載圖片3

HTML代碼：

<a class="loadImage" href="http://image.zhangxinxu.com/image/study/s/s512/mm1.jpg">加載圖片1</a> <a class="loadImage ml10" href="http://image.zhangxinxu.com/image/study/s/s512/mm2.jpg">加載圖片2</a> <a class="loadImage ml10" href="http://image.zhangxinxu.com/image/study/s/s512/mm3.jpg">加載圖片3</a>

JS代碼：

$(".loadImage").zxxbox({
    bar: false,
    bgclose:true
});

加載iframe並經過iframe內元素關閉彈框：點擊我

父頁面HTML代碼(隱藏的按鈕)：

<input id="forTriggerHide" type="button" class="dn" />

JS代碼：

$("#test17").click(function(){
    $.zxxbox($('<iframe frameborder="0" width="400" height="200" src="iframe-load.html"></iframe>'));					
});
$("#forTriggerHide").click(function(){
    $.zxxbox.hide();									
});

iframe框架頁面相關HTML代碼：

<input id="forTriggerHide" type="button" class="dn" />

JS代碼：

document.getElementById("iframeBtn").onclick = function(){
    parent.document.getElementById("forTriggerHide").click();
};