jqueryuibootstrap实现自定义风格
首先看一下自定义提示框的效果图
alert普通的提示当然可以自定义样式
confrim确认框支持callback
//message提示的信息,callback(true/false)回调函数
window.shconfirm=function(message,callback)
回调函数参数为true/false
prompt邀请用户输入框
//message提示的信息,callback(msg)回调函数（用户输入的消息）,param：regex输入的正则验证，regexmsg正则验证不通过的提示
window.shprompt=function(message,callback,regex,regexmsg)
这里message为提示消息 *
callback为回调函数* 回传参数为用户输入的值(userinputmsg)
regex和regexmsg这2个参数是选填项用于验证用户输入，2个参数需要同时出现。不能单独使用。
以下是js的实现，
当前这个是整合了jqueryui和bootstrap自己封装的一个alert提示。
以下是调用代码 confirm//比可惜的是js没法模拟js脚本暂停所以只能以回调函数的方式来继续下一步操作。 shalert就直接用就行了。和js的alert效果一样。 源码我已经放在了百度网盘上，欢迎大家学习交流。 源码下载地址 http://pan.baidu.com/s/1c00Cl36 这个控件其实还有可重构的部分，比如初始化方法等等这些都没有提取出来，因为任务紧所以先这么用着。 下一次优化时会处理这些问题。 原版风格是这样的，可以通过修改引用的css上实现demo上有详细说明。 以上就是本文全部内容了，怎么样，受益匪浅吧。
(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)回调函数
window.shconfirm=function(message,callback){
$("#dialogconfirm.msgcontent").html(message);
$("#dialogconfirm").dialog("open");
_shconfirm.shconfirmCallBack=callback;
};
//message提示的信息,callback(msg)回调函数（用户输入的消息）,param：regex输入的正则验证，regexmsg正则验证不通过的提示
window.shprompt=function(message,callback,regex,regexmsg){
$("#dialogprompt.msgcontent").html(message);
$("#dialogprompt").dialog("open");
_shprompt.shpromptObj={
callback:callback,
regex:regex,
regexmsg:regexmsg
};
}
})();
functionShConfirm(){
shconfirm("确定要这么做吗！",function(result){
if(result){
alert("点击了确定");
}else{
alert("点击了取消");
}
});
}
functionShPrompt(){
shprompt("请问1+1等于几！",function(text){
alert("用户输入了："+text);
},/^\d{1,}$/,"请输入数字！");
}
<inputtype="button"name="name"value="ShAlert"onclick="shalert("保存成功！");"/>
<inputtype="button"name="name"value="ShConfirm"onclick="ShConfirm()"/>
<inputtype="button"name="name"value="ShPrompt"onclick="ShPrompt()"/>
相关文章