欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

自己使用js/jquery寫(xiě)的一個(gè)定制對(duì)話框控件

 更新時(shí)間：2014年05月02日 14:19:32   作者：  
自己做一個(gè)通用的控件，雖然不是絕對(duì)通用啦，但在我這個(gè)項(xiàng)目里還是可以隨意調(diào)用的，思想的話也可以借鑒到別的項(xiàng)目中
最近在做一個(gè)游戲項(xiàng)目，項(xiàng)目里面很多需要用到對(duì)話框，而且得用上美工做的圖片，這樣的話好像就不好去找一些現(xiàn)成的對(duì)話框控件了，于是便琢磨著自己做一個(gè)通用的控件，雖然不是絕對(duì)通用啦，但在我這個(gè)項(xiàng)目里還是可以隨意調(diào)用的，思想的話也可以借鑒到別的項(xiàng)目中。

先貼出主要代碼：
復(fù)制代碼 代碼如下:

//對(duì)話框的基本html內(nèi)容，絕對(duì)定位，高寬設(shè)置，背景圖片，標(biāo)題，兩個(gè)按鈕圖
var tdlz_dialog_content = "<div id='tdlz_dialog"
+ "' style='position:absolute;text-align:center;width:540px;height:331px;background:url(assets/images/add_fbc.png);'><ul><li id='dialog_lb_text' style='margin-top:100px;color:#fff;font-size:25px'>"
+ "</li><li style='margin-top:100px;cursor:pointer'><img id='tdlz_dialog_ok' src='assets/images/queren.png'></img><img id='tdlz_dialog_cancel' src='assets/images/quxiao.png'></img></li></ul></div>";
//text：標(biāo)題，type：對(duì)話框類(lèi)型，funcOK：確定的執(zhí)行函數(shù)，time：倒計(jì)時(shí)或alert顯示的時(shí)間
function showTdDialog(text, type, funcOK, time) {
var dialogid = "#tdlz_dialog";
$(dialogid).show(500);
$("#dialog_lb_text").html(text);
switch (type) {
case "show"://展示信息的對(duì)話框，帶一個(gè)確定鍵，點(diǎn)擊后消失
$("#tdlz_dialog_cancel").hide();
$("#tdlz_dialog_ok").unbind();
$("#tdlz_dialog_ok").click(function () {
$(dialogid).hide(500);
$("#tdlz_dialog_ok").css("margin-right", "0");
$("#tdlz_dialog_cancel").css("margin-left", "0");
});
break;
case "alert"://警告對(duì)話框，time時(shí)間后消失
$("#tdlz_dialog_cancel").hide();
$("#tdlz_dialog_ok").unbind();
setTimeout(function () {
$(dialogid).hide(500);
$("#tdlz_dialog_ok").css("margin-right", "0");
$("#tdlz_dialog_cancel").css("margin-left", "0");
}, time);
$("#tdlz_dialog_ok").click(function () {
$(dialogid).hide(500);
$("#tdlz_dialog_ok").css("margin-right", "0");
$("#tdlz_dialog_cancel").css("margin-left", "0");
});
break;
case "confirm"://確認(rèn)對(duì)話框，帶確認(rèn)取消鍵，確認(rèn)則執(zhí)行函數(shù)，否則不執(zhí)行并消失
$("#tdlz_dialog_cancel").show();
$("#tdlz_dialog_ok").css("margin-right", "5%");
$("#tdlz_dialog_cancel").css("margin-left", "5%");
$("#tdlz_dialog_ok").unbind();
$("#tdlz_dialog_ok").click(function () {
funcOK();
setTimeout(function () {
$(dialogid).hide(500)
}, 1000);

});
$("#tdlz_dialog_cancel").click(function () {
$(dialogid).hide(500);
});
break;
case "time"://倒計(jì)時(shí)對(duì)話框，顯示time時(shí)間倒計(jì)時(shí)，結(jié)束后消失
$("#tdlz_dialog_cancel").hide();
$("#dialog_lb_text").html(text + "" + time);
var a = setInterval(function () {
time = parseInt(time) - 1;
if (time < 0) {
clearInterval(a);
$(dialogid).hide(500);
}
$("#dialog_lb_text").html(text + "" + time);
}, 1000);
$("#tdlz_dialog_ok").unbind();
$("#tdlz_dialog_ok").click(function () {
$(dialogid).hide(500);
$("#tdlz_dialog_ok").css("margin-right", "0");
$("#tdlz_dialog_cancel").css("margin-left", "0");
});
break;
}
}

除了上面的使用函數(shù)，還需要對(duì)對(duì)話框進(jìn)行初始化，為了插入文檔中并且居中顯示
復(fù)制代碼 代碼如下:

function initDialog() {
$("body").before(tdlz_dialog_content);
//計(jì)算恰當(dāng)?shù)闹虚g位置
var top_percent = (window.innerHeight / 4) / window.innerHeight
var left_percent = (window.innerWidth / 2 - $("#tdlz_dialog").width() / 2) / window.innerWidth;
$("#tdlz_dialog").css("top", top_percent * 100 + "%");
$("#tdlz_dialog").css("left", left_percent * 100 + "%");
$("#tdlz_dialog").css("z-index", "100");
$("#tdlz_dialog").hide();
}

使用的時(shí)候如下（以confirm對(duì)話框?yàn)槔?
復(fù)制代碼 代碼如下:

initDialog();
showTdDialog("I'm a Dialog","confirm",function(){

console.log("Button OK Clicked!");

});

效果圖如下:

相關(guān)文章

最新評(píng)論