首先看一下自定义提示框的效果图
警报普通的提示当然可以自定义样式
会议确认框支持回收
复制代码代码如下://消息提示的信息,回调(真/假)回调函数window.shconfirm=函数(消息、回调)回调函数参数为真/假
提示邀请用户输入框
复制代码代码如下://消息提示的信息,回调(消息)回调函数(用户输入的消息),参数:正则表达式输入的正则验证,regexmsg正则验证不通过的提示window.shprompt=函数(消息、回调regex、regexmsg)这里消息为提示消息*回调为回调函数* 回传参数为用户输入的值(userinputmsg) regex和regexmsg这2个参数是选填项用于验证用户输入,2个参数需要同时出现。不能单独使用。
以下是射流研究…的实现,
当前这个是整合了jquery用户界面和引导程序自己封装的一个警报提示。
复制代码代码如下:(function(){ var _ sh confirm={ };var _ sh提示={ };//闭包初始化;$(function () { $('#dialogalert ')).对话框({ modal: true,autoOpen: false,show: { effect: 'blind ',duration: 500 },hide: { effect: 'explode ',duration: 500 },buttons: {确定:函数(){ $(这个).对话框("关闭");} } });$('#dialogconfirm ').对话框({ modal: true,autoOpen: false,show: { effect: 'slide ',duration: 500 },hide: { effect: 'drop ',duration: 500 },buttons: {确定:函数(){ _ shconfirm。shconfirm回调(真);$(这个)。对话框("关闭");}, 取消:函数(){ _ shconfirm。shconfirm回调(false);$(这个)。对话框("关闭");} } });$('#dialogprompt ').对话框({ modal: true,autoOpen: false,show: { effect: 'blind '、duration: 500 }、hide: { effect: 'puff '、duration: 500 }、button : }确定:函数(){ if(_ shprompt。shpromptbj。regex){ if(!_ shprompt。shpromptbj。regex。测试($(' #对话框提示.文本')。val())) { $('#dialogprompt .警惕. promptmsg ').html(_ shprompt。shpromptbj。regex味精);$('#dialogprompt .警报').向下滑动();返回;} else { $('#dialogprompt .警报').hide();} } _ shprompt。shpromptbj。回调($(' #对话框提示.文本')。val());$(这个)。对话框("关闭");}, 取消:函数(){ _ shprompt。shpromptbj。回调($(' #对话框提示.文本')。val());$(这个)。对话框("关闭");} } });});窗户。shalert=function(message){ $(' # dialogalert .消息内容').html(消息);$('#dialogalert ').对话框("打开");};//消息提示的信息,回调(真/假)回调函数窗户。sh confirm=function(消息,回调){ $('#dialogconfirm .消息内容').html(消息);$('#dialogconfirm ').对话框("打开");_ shconfirm。shconfirm回调=回调;};//消息提示的信息,回调(消息)回调函数(用户输入的消息),参数:正则表达式输入的正则验证,regexmsg正则验证不通过的提示窗户。sh prompt=function(message、callback、regex、regexmsg) { $('#dialogprompt ).消息内容').html(消息);$('#dialogprompt ').对话框("打开");_ shprompt。shpromptbj={回调:回调,regex: regex,regex msg : regex msg };}})();
以下是调用代码
确认/比可惜的是射流研究…没法模拟射流研究…脚本暂停所以只能以回调函数的方式来继续下一步操作。
复制代码代码如下:函数ShConfirm(){ ShConfirm('确定要这么做吗!',函数(结果){ if(结果){ alert('点击了确定');} else { alert('点击了取消');} });}函数ShPrompt() { shprompt('请问1 1等于几!',函数(文本){ alert('用户输入了:' text);},/^d{1,}$/,”请输入数字!');}
沙勒特就直接用就行了。和射流研究…的警报效果一样。
复制的代码如下:输入类型='按钮'名称='名称'值='沙勒特' onclick='沙勒特('保存成功!');'/input type=' button ' name=' name ' value=' ShConfirm ' onclick=' ShConfirm()'/input type=' button ' name=' name ' value=' ShPrompt ' onclick=' ShPrompt()'/
我已经把源代码放在百度网盘上了。欢迎学习交流。
源代码下载地址
http://pan.baidu.com/s/1c00Cl36
事实上,这个控件有可重新配置的部分,比如初始化方法,这些部分还没有被提取出来。因为任务紧,应该先用。
这些问题将在下一次优化中处理。
最初的样式是这样的,可以通过修改引用的css在演示中详细解释。
以上就是本文的全部内容。怎么样,可以受益匪浅。