对于BlackBox jQuery 的对话框插件

最新推荐文章于 2024-06-28 22:27:14 发布

Xcollection

最新推荐文章于 2024-06-28 22:27:14 发布

阅读量987

点赞数

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 //使用快捷键确定和取消
})