jBox 是一款基于 jQuery 的多功能對(duì)話框插件，有alert警告框、confirm確認(rèn)框和prompt輸入對(duì)話框等，并且兼容 IE6+、Firefox、Chrome、Safari、Opera 等主流瀏覽器。
引入jQuery和jBox相關(guān)插件
<script type="text/javascript" src="jBox/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jBox/jquery.jBox-2.3.min.js"></script>
<script type="text/javascript" src="jBox/i18n/jquery.jBox-zh-CN.js"></script>
<link type="text/css" rel="stylesheet" href="jBox/Skins/皮膚文件夾/jbox.css"/>
// 或
<link type="text/css" rel="stylesheet" href="jBox/Skins2/皮膚文件夾/jbox.css"/>
演示一：調(diào)用HTML
var info = 'jBoxHTML內(nèi)容調(diào)用';
$.jBox.info(info);
演示二：調(diào)用某個(gè)div的內(nèi)容，并且彈出層附帶底部文字
// 顯示id為id-html的div內(nèi)部html，同時(shí)設(shè)置了bottomText
$.jBox('id:id-html', { bottomText: '這是底部文字' });
演示三：調(diào)用頁面
// ajax get 頁面ajax.html的內(nèi)容并顯示，例如要提交id=1，則地址應(yīng)該為 ajax.html?id=1，post:前綴的使用與get:的一樣
$.jBox("get:ajax.html");
演示四：調(diào)用iframe
// 用iframe顯示http://www.sucaihuo.com的內(nèi)容，并設(shè)置了標(biāo)題、寬與高、按鈕
$.jBox("iframe:http://www.sucaihuo.com", {
title: "百度一下",
width: 800,
height: 350,
buttons: { '關(guān)閉': true }
});
演示五：分布式
var content = {
state1: {
content: '狀態(tài)一',
buttons: { '下一步': 1, '取消': 0 },
buttonsFocus: 0,
submit: function (v, h, f) {
if (v == 0) {
return true; // close the window
}
else {
$.jBox.nextState(); //go forward
// 或 $.jBox.goToState('state2')
}
return false;
}
},
state2: {
content: '狀態(tài)二，請(qǐng)關(guān)閉窗口哇：）',
buttons: { '上一步': 1, '取消': 0 },
buttonsFocus: 0,
submit: function (v, h, f) {
if (v == 0) {
return true; // close the window
} else {
$.jBox.prevState() //go back
// 或 $.jBox.goToState('state1');
}
return false;
}
}
};
$.jBox(content);
演示六：prompt對(duì)話提示框
var html = "<div style='padding:10px;'>輸入姓名：<input type='text' id='yourname' name='yourname' /></div>";
var submit = function (v, h, f) {
if (f.yourname == '') {
$.jBox.tip("請(qǐng)輸入您的姓名。", 'error', { focusId: "yourname" }); // 關(guān)閉設(shè)置 yourname 為焦點(diǎn)
return false;
}
$.jBox.tip("你叫：" + f.yourname);
//$.jBox.tip("你叫：" + h.find("#yourname").val());
//$.jBox.tip("你叫：" + h.find(":input[name='yourname']").val());
return true;
};
$.jBox(html, { title: "你叫什么名字？", submit: submit });