首先看一下自定義提示框的效果圖
alert 普通的提示當(dāng)然可以自定義樣式
confrim 確認(rèn)框 支持callback
//message 提示的信息 ,callback(true/false)回調(diào)函數(shù)
window.shconfirm = function (message, callback)
回調(diào)函數(shù)參數(shù)為 true/false
prompt 邀請(qǐng)用戶輸入框
//message 提示的信息 ,callback(msg)回調(diào)函數(shù)（用戶輸入的消息）, param：regex 輸入的 正則驗(yàn)證，regexmsg 正則驗(yàn)證不通過(guò)的提示
window.shprompt = function (message, callback, regex, regexmsg)
這里 message 為提示消息 *
callback 為回調(diào)函數(shù) * 回傳參數(shù)為 用戶輸入的值(userinputmsg)
regex 和 regexmsg 這2個(gè)參數(shù)是 選填項(xiàng) 用于驗(yàn)證用戶輸入，2個(gè)參數(shù)需要同時(shí)出現(xiàn)。不能單獨(dú)使用。
以下是js的實(shí)現(xiàn)，
當(dāng)前這個(gè)是整合了 jquery ui 和 bootstrap 自己封裝的一個(gè) alert 提示。
(function () {
var _shconfirm = {};
var _shprompt = {};
//閉包初始化；
$(function () {
$("#dialogalert").dialog({
modal: true,
autoOpen: false,
show: {
effect: "blind",
duration: 500
},
hide: {
effect: "explode",
duration: 500
},
buttons: {
確定: function () {
$(this).dialog("close");
}
}
});
$("#dialogconfirm").dialog({
modal: true,
autoOpen: false,
show: {
effect: "slide",
duration: 500
},
hide: {
effect: "drop",
duration: 500
},
buttons: {
確定: function () {
_shconfirm.shconfirmCallBack(true);
$(this).dialog("close");
},
取消: function () {
_shconfirm.shconfirmCallBack(false);
$(this).dialog("close");
}
}
});
$("#dialogprompt").dialog({
modal: true,
autoOpen: false,
show: {
effect: "blind",
duration: 500
},
hide: {
effect: "puff",
duration: 500
},
buttons: {
確定: function () {
if (_shprompt.shpromptObj.regex) {
if (!_shprompt.shpromptObj.regex.test($("#dialogprompt .text").val())) {
$("#dialogprompt .alert .promptmsg").html(_shprompt.shpromptObj.regexmsg);
$("#dialogprompt .alert").slideDown();
return;
} else {
$("#dialogprompt .alert").hide();
}
}
_shprompt.shpromptObj.callback($("#dialogprompt .text").val());
$(this).dialog("close");
},
取消: function () {
_shprompt.shpromptObj.callback($("#dialogprompt .text").val());
$(this).dialog("close");
}
}
});
});
window.shalert = function (message) {
$("#dialogalert .msgcontent").html(message);
$("#dialogalert").dialog("open");
};
//message 提示的信息 ,callback(true/false)回調(diào)函數(shù)
window.shconfirm = function (message, callback) {
$("#dialogconfirm .msgcontent").html(message);
$("#dialogconfirm").dialog("open");
_shconfirm.shconfirmCallBack = callback;
};
//message 提示的信息 ,callback(msg)回調(diào)函數(shù)（用戶輸入的消息）, param：regex 輸入的 正則驗(yàn)證，regexmsg 正則驗(yàn)證不通過(guò)的提示
window.shprompt = function (message, callback, regex, regexmsg) {
$("#dialogprompt .msgcontent").html(message);
$("#dialogprompt").dialog("open");
_shprompt.shpromptObj = {
callback: callback,
regex: regex,
regexmsg: regexmsg
};
}
})();
以下是調(diào)用代碼
confirm //比可惜的是 js沒(méi)法模擬 js腳本暫停 所以只能以回調(diào)函數(shù)的方式 來(lái)繼續(xù)下一步操作。
function ShConfirm() {
shconfirm("確定要這么做嗎！", function (result) {
if (result) {
alert("點(diǎn)擊了確定");
} else {
alert("點(diǎn)擊了取消");
}
});
}
function ShPrompt() {
shprompt("請(qǐng)問(wèn)1+1等于幾！", function (text) {
alert("用戶輸入了：" + text);
}, /^/d{1,}$/, "請(qǐng)輸入數(shù)字！");
}
shalert 就直接用就行了。和 js的alert 效果一樣。
<input type="button" name="name" value="ShAlert" onclick="shalert('保存成功！');" />
<input type="button" name="name" value="ShConfirm" onclick="ShConfirm()" />
<input type="button" name="name" value="ShPrompt" onclick="ShPrompt()" />
源碼我已經(jīng)放在了 百度網(wǎng)盤(pán)上，歡迎大家學(xué)習(xí)交流。
源碼下載地址
http://pan.baidu.com/s/1c00Cl36
這個(gè)控件其實(shí)還有可重構(gòu)的部分，比如初始化方法等等這些都沒(méi)有提取出來(lái)，因?yàn)槿蝿?wù)緊所以先這么用著。
下一次優(yōu)化時(shí)會(huì)處理這些問(wèn)題。
原版風(fēng)格是這樣的，可以通過(guò)修改引用的css上實(shí)現(xiàn) demo上有詳細(xì)說(shuō)明。
以上就是本文全部?jī)?nèi)容了，怎么樣，受益匪淺吧。
