对于BlackBox jQuery 的对话框插件

1.引用项目文件
2.实例化
var box = new BlackBox();
alert 功能
.add( dialog正文 [,关闭dialog时执行的函数] [,参数设置] ),除dialog正文外其他两个任意可以省略,可选参数为 title 和 value。
box.alert("这里是一个 alert 的 demo ", function () {
alert("窗口即将自己关闭")
}, {
title: '这里是标题',
value: '自定义按钮内容'	
})
confirm 功能

.confirm( dialog正文 [,关闭或者确定dialog时执行的函数] [,参数设置] ),除dialog正文外其他两个任意可以省略, 用户确定时callback的参数为true,关闭或者取消时为false,可选参数为 title 和 value。

box.confirm("这里是一个 confirm 的 demo", function (data) {
if (data) {
box.alert("你点击了确定")
} else {
box.alert("你点击了取消")
}
}, {
title: '这里是标题',
value: '自定义按钮内容'
})
prompt 功能
.prompt( dialog正文 [,关闭或者确定dialog时执行的函数] [,参数设置] ),除dialog正文外其他两个任意可以省略, 用户输入完成后确认时callback的参数为用户输入的内容,关闭或者取消时为null,可选参数为 title 、 value 和 verify,其中 verify 为用户输入简单验证函数(暂时不支持异步),参数为 data ,返回true 或者 false。

box.prompt("请输入一个大于 10 的数字", function (data) {
if (data) {
box.alert("你刚刚输入了" + data)
} else {
box.alert("你放弃了输入")
}
}, {
title: '这里是标题',
value: '自定义按钮内容',
verify: function (data) {
return data > 10;
}
})
load 和 ready 功能
.load( 此时载入内容的标签 [,ready时执行的函数] ),不同时间可以使用相同的载入内容的标签,此时 ready 时 执行的函数不会叠加,而是会按照先后顺序执行。 ready 必须在 load 之后!
.load( 此时载入完成内容的标签 ),只有所有的内容都载入完了,屏幕上的遮罩才会消失。

box.load("index", function () {
console.log("第一个index载入内容载入完毕")
});
box.load("index", function () {
console.log("第二个index载入内容载入完毕")
});
box.load("main", function () {
console.log("main载入内容载入完毕")
});
setTimeout(function () {
box.ready("main");
}, 1000);
setTimeout(function () {
box.ready("index")
}, 2000);
popUp , boxClose 和 boxShake 功能
还在完善中的功能,.popUp( html内容 ),.boxClose 关闭当前dialog ,boxShake 为使当前dialog抖动。
box.popup('
<div class="popup_demo">' +
'<button id="shake_demo">抖一抖</button><button id="close_demo">关闭</button></div>
',
function (content) {
content.find("#shake_demo").click(function () {
box.boxShake();
});
content.find("#close_demo").click(function () {
box.boxClose();
});
});
内置方法执行顺序
内置方法通过队列的方式实现了严格按照执行先后顺序来出现。后执行的代码将在之前窗口关闭后实现

box.alert("Hello word");
box.load("index", function () {
console.log("index 已经完成了");
box.alert("之前的 index 已经完成了");//这里的alert是在最后执行的!
});
setTimeout(function () {
box.ready("index");
}, 2000);
box.confirm("Bye word", {
title: "再见世界",
value: "再见"
});
tip:这里如果第一个 alert 没有很快关掉是不会出现后面的 load 效果,因为当 load 还在队列中的时候就以及 载入完成了,load 的完成函数会在载入时被完成, load 事件从队列中被消失。
var box = new BlackBox({
'clickOverlayEffect': 'shake', //点击覆盖层效果,默认为抖动 'shake',可选关闭 'close'
'overlayColor': '#000', //覆盖层颜色,默认为黑色 #000
'overlayOpacity': .6, //覆盖层透明度,默认为 .6
'allowPromptBlank': false, //允许prompt时输入内容为空,默认否,即为空时提交会抖动
'displayClose': false, //在alert,confirm和prompt模式中显示关闭按钮
'enableKeyPress': true //使用快捷键确定和取消
})






















  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值