插件说明
- jBox 是一款基于 jQuery 的多功能对话框插件，能够实现网站的整体风格效果，给用户一个新的视觉享受。
运行环境
- 兼容 IE6+、Firefox、Chrome、Safari、Opera 等主流浏览器。备注：IE不支持边框的圆角样式，不推荐大家使用蛋痛的IE浏览器。
使用授权
- jBox 永久免费使用，但是必须保留相关的版权信息。如果有好的建议，请Email: kudychen@gmail.com，jBox的完善需要大家的好建议。
使用方法
Java代码
<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"/>
<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"/>
Java代码
函数原型： $.jBox(content, options); └ 或者 jBox(content, options); 参数说明： - content (string,json) └ 可以是string或json。当是string时，需要加上前缀标识（html:、id:、get:、post:、iframe:），如果没有加标识，系统会自动加上html:，具体请看应用例子。当是json时，表示一个或多个状态，每个状态的默认值为 $.jBox.stateDefaults。 - options [可选] (json) └ 其它参数选项，默认值为 $.jBox.defaults。 备注：如果想手动关闭jBox（不包括下面的tip与messager，它们另有方法），请调用 $.jBox.close(token) 方法。 示例（一）: var info =
'jQuery jBox<br /><br />版本：v2.0<br />日期：2011-7-24<br />'; info +=
'官网：<a target="_blank" href="http://kudystudio.com/jbox">http://kudystudio.com/jbox</a>'; $.jBox.info(info); 示例（二）: $.jBox(
'id:id-html', { bottomText:
'这是底部文字' }); 这里是id为id-html的div内部html，同时设置了bottomText 示例（三）: $.jBox(
"get:ajax.html"); 示例（四）: $.jBox(
"iframe:http://www.baidu.com", { title:
"百度一下", width:
800, height:
350, buttons: {
'关闭':
true } }); 示例（五）: var content = { state1: { content:
'状态一', buttons: {
'下一步':
1,
'取消':
0 }, buttonsFocus:
0, submit: function (v, h, f) {
if (v ==
0) {
return true; }
else { $.jBox.nextState(); }
return false; } }, state2: { content:
'状态二，请关闭窗口哇：）', buttons: {
'上一步':
1,
'取消':
0 }, buttonsFocus:
0, submit: function (v, h, f) {
if (v ==
0) {
return true; }
else { $.jBox.prevState() }
return false; } } }; $.jBox(content); 示例（六）: 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(
"请输入您的姓名。",
'error', { focusId:
"yourname" });
return false; } $.jBox.tip(
"你叫：" + f.yourname);
return true; }; $.jBox(html, { title:
"你叫什么名字？", submit: submit }); $.jBox.open() 函数原型： $.jBox.open(content, title, width, height, options); └ 或者 jBox.open(content, title, width, height, options); 参数说明： - content (string,json) └ 可以是string或json。当是string时，需要加上前缀标识（html:、id:、get:、post:、iframe:），如果没有加标识，系统会自动加上html:，具体请看应用例子。当是json时，表示一个或多个状态，每个状态的默认值为 $.jBox.stateDefaults。 - title [可选] (string) └ 窗口标题，值为
null时为不显示标题，默认值为 $.jBox.defaults.title。 - width [可选] (string,number) └ 窗口宽度，值为
'auto'或具体像素值（例如
350），默认值为 $.jBox.defaults.width。 - height [可选] (string,number) └ 窗口高度，值为
'auto'或具体像素值（例如
100），默认值为 $.jBox.defaults.height。 - options [可选] (json) └ 其它参数选项，默认值为 $.jBox.defaults。 备注：$.jBox.open() 只是 $.jBox() 的一个扩展，方便 title、width、height 参数的传递。 示例（一）: $.jBox.open(
"iframe:http://www.baidu.com",
"百度一下",
800,
350, { buttons: {
'关闭':
true} }); 示例（二）: （content为Json对象，比较复杂一点的例子） var html1 =
'<div class="msg-div">' +
'<p>购买数量：</p><div class="field"><input type="text" id="amount" name="amount" value="1" /></div>' +
'<p>收货地址：</p><div class="field"><textarea id="address" name="address"></textarea></div>' +
'<div class="errorBlock" style="display: none;"></div>' +
'</div>'; var html2 =
'<div class="msg-div">' +
'<p>给卖家留言：</p><div class="field"><textarea id="message" name="message"></textarea></div>' +
'</div>'; var data = {}; var states = {}; states.state1 = { content: html1, buttons: {
'下一步':
1,
'取消':
0 }, submit: function (v, h, f) {
if (v ==
0) {
return true; }
else { h.find(
'.errorBlock').hide(
'fast', function () { $(
this).remove(); }); data.amount = f.amount;
if (data.amount ==
'' || parseInt(data.amount) <
1) { $(
'<div class="errorBlock" style="display: none;">请输入购买数量！</div>').prependTo(h).show(
'fast');
return false; } data.address = f.address;
if (data.address ==
'') { $(
'<div class="errorBlock" style="display: none;">请输入收货地址！</div>').prependTo(h).show(
'fast');
return false; } $.jBox.nextState(); }
return false; } }; states.state2 = { content: html2, buttons: {
'上一步': -
1,
'提交':
1,
'取消':
0 }, buttonsFocus:
1, submit: function (v, o, f) {
if (v ==
0) {
return true; }
else if (v == -
1) { $.jBox.prevState() }
else { data.message = f.message; $.jBox.nextState(
'<div class="msg-div">正在提交...</div>'); var msg = []; msg.push(
'<div class="msg-div">'); msg.push(
'<p>下面是提交的数据</p>');
for (var p in data) { msg.push(
'<p>' + p +
':' + data[p] +
'</p>'); } msg.push(
'</div>'); window.setTimeout(function () { $.jBox.nextState(msg.join(
'')); },
2000); }
return false; } }; states.state3 = { content:
'', buttons: {} }; states.state4 = { content:
'', buttons: {
'确定':
0 } }; $.jBox.open(states,
'提交订单',
450,
'auto'); $.jBox.prompt() 函数原型： $.jBox.prompt(content, title, icon, options); └ 或者 jBox.prompt(content, title, icon, options); 参数说明： - content (string) └ 只能是string，不支持前缀标识，默认值为
''。 - title [可选] (string) └ 窗口标题，值为
null时为不显示标题，默认值为 $.jBox.defaults.title。 - icon [可选] (string) └ 内容图标，值为
'none'时为不显示图标，可选值有
'none'、
'info'、
'question'、
'success'、
'warning'、
'error'，默认值为
'none'。 - options [可选] (json) └ 其它参数选项，默认值为 $.jBox.defaults。 备注：以下几个方法由 $.jBox.prompt() 扩展而来，参数类似，请看下面的例子。 $.jBox.alert(content, title, options); └ 或者 jBox.alert(content, title, options); $.jBox.info(content, title, options); └ 或者 jBox.info(content, title, options); $.jBox.success(content, title, options); └ 或者 jBox.success(content, title, options); $.jBox.error(content, title, options); └ 或者 jBox.error(content, title, options); $.jBox.confirm(content, title, submit, options); └ 或者 jBox.confirm(content, title, submit, options); $.jBox.warning(content, title, submit, options); └ 或者 jBox.warning(content, title, submit, options); └ 上面方法中默认按钮的文字设置在 $.jBox.languageDefaults 示例（一）: $.jBox.prompt(
'Hello jBox',
'jBox',
'info', { closed: function () { alert(
'prompt is closed.'); } }); 示例（二）: $.jBox.alert(
'Hello jBox',
'jBox'); 示例（三）: $.jBox.info(
'Hello jBox',
'jBox'); 示例（四）: $.jBox.success(
'Hello jBox',
'jBox'); 示例（五）: $.jBox.error(
'Hello jBox',
'jBox'); 示例（六）: var submit = function (v, h, f) {
if (v ==
'ok') jBox.tip(v,
'info');
else if (v ==
'cancel') jBox.tip(v,
'info');
return true; }; $.jBox.confirm(
"确定吗？",
"提示", submit); 示例（六
02）: var submit = function (v, h, f) {
if (v ==
true) jBox.tip(
"恩",
'info');
else jBox.tip(
"好吖",
'info');
return true; }; $.jBox.confirm(
"天使，做我女朋友吧？",
"表白提示", submit, { buttons: {
'恩':
true,
'好吖':
false} }); 示例（七）: var submit = function (v, h, f) {
if (v ==
'yes') { $.jBox.tip(
'已保存。',
'success'); }
if (v ==
'no') { $.jBox.tip(
'没保存。'); }
if (v ==
'cancel') { $.jBox.tip(
'已取消。'); }
return true; }; $.jBox.warning(
"内容已修改，是否保存？",
"提示", submit); $.jBox.tip() 函数原型： $.jBox.tip(content, icon, options); └ 或者 jBox.tip(content, icon, options); 参数说明： - content (string) └ 只能是string，不支持前缀标识，默认值为
''。 - icon [可选] (string) └ 内容图标，可选值有
'info'、
'success'、
'warning'、
'error'、
'loading'，默认值为
'info'，当为
'loading'时，timeout值会被设置为
0，表示不会自动关闭。 - options [可选] (json) └ 其它参数选项，默认值为 $.jBox.tipDefaults。 备注：如果想手动关闭tip，请调用 $.jBox.closeTip() 方法。 示例（一）: $.jBox.tip(
'Hello jBox'); 示例（二）: $.jBox.tip(
'关闭后设置输入框为焦点',
'info', { focusId:
'tip-input' }); 输入框： 示例（三）: $.jBox.tip(
'关闭后设置输入框为已选择',
'error', { closed: function () { $(
'#tip-input2').select(); } }); 输入框： 示例（四）: $.jBox.tip(
"正在XX，你懂的...",
'loading'); window.setTimeout(function () { $.jBox.tip(
'XX已完成。',
'success'); },
2000); 示例（五）: var submit = function (v, h, f) {
if (v ==
'ok') { $.jBox.tip(
"正在删除数据...",
'loading'); window.setTimeout(function () { $.jBox.tip(
'删除成功。',
'success'); },
2000); }
else if (v ==
'cancel') { }
return true; }; $.jBox.confirm(
"确定要删除数据吗？",
"提示", submit); $.jBox.messager() 函数原型： $.jBox.messager(content, title, timeout, options); └ 或者 jBox.messager(content, title, timeout, options); 参数说明： - content (string) └ 只能是string，不支持前缀标识，默认值为
''。 - title [可选] (string) └ 窗口标题，值为
null时为不显示标题，默认值为 $.jBox.messagerDefaults.title。 - timeout [可选] (number) └ 显示多少毫秒后自动关闭，如果为
0则不自动关闭，默认值为 $.jBox.messagerDefaults.timeout。 - options [可选] (json) └ 其它参数选项，默认值为 $.jBox.messagerDefaults。 备注：如果想手动关闭messager，请调用 $.jBox.closeMessager() 方法。 示例（一）: $.jBox.messager(
'Hello jBox',
'jBox'); 示例（二）: $.jBox.messager(
"Hello jBox 2",
"my title",
null, { width:
350, showType:
'fade' }); 示例（三）: $.jBox.messager(
"Hello jBox 3",
"my title",
3000, { width:
350, icon:
'info', showType:
'show', buttons: {
'去看看':
true }, submit: function (v, h, f) { $.jBox.info(
'看个蛋蛋？');
return true; } }); jBox 其它成员 全局设置： $.jBox.defaults $.jBox.stateDefaults $.jBox.tipDefaults $.jBox.messagerDefaults $.jBox.languageDefaults 其它函数： - $.jBox.setDefaults(configs); └ 设置全局设置，请参考 demo.js 里的使用。 - $.jBox.getBox(); └ 获取最前面打开的窗口jQuery对象。 - $.jBox.getIframe(jBoxId); └ 获取最前面打开的或指定ID的窗口里的 iframe jQuery对象。(方便与iframe的交互) - $.jBox.getContent(); └ 获取最前面打开的窗口的内容html。 - $.jBox.setContent(content); └ 设置最前面打开的窗口的内容html。 - $.jBox.getState(stateNmae); └ 获取最前面打开的窗口可见状态内容。（content为多状态下） - $.jBox.getStateName(); └ 获取最前面打开的窗口可见状态的名称。（content为多状态下） - $.jBox.goToState(stateName, stateContent); └ 显示最前面打开的窗口的指定状态，并可设置状态内容。（content为多状态下） - $.jBox.nextState(stateContent); └ 显示最前面打开的窗口的下一个状态，并可设置状态内容。（content为多状态下） - $.jBox.prevState(stateContent); └ 显示最前面打开的窗口的上一个状态，并可设置状态内容。（content为多状态下） - $.jBox.close(token); └ 关闭最前面打开的窗口，token可以是指定jBox的ID或布尔值，如果是
true显示关闭所有已打开的窗口。 - $.jBox.closeTip(); └ 关闭提示（由 $.jBox.tip() 打开的）。 - $.jBox.closeMessager(); └ 关闭提示（由 $.jBox.messager() 打开的）。 示例（iframe）: var html =
"<div style='padding:10px;'>输入点什么：<input type='text' id='some' name='some' /></div>"; var submit = function (v, h, f) {
if (f.some ==
'') { top.$.jBox.tip(
"请输入点什么。",
'error', { focusId:
"some" });
return false; } top.$.jBox.info(
"你输入了：" + f.some);
return true; }; top.$.jBox(html, { title:
"输入", submit: submit });
