JBox使用详解插件说明 nbsp jBox 是一款基于 jQuery 的多功能对话框插件 能够实现网站的整体风格效果 给用户一个新的视觉享受 nbsp 运行环境 nbsp 兼容 IE6 Firefox Chrome Safari Opera 等主流浏览器 备注 IE 不支持边框的圆角样式 不推荐大家使用蛋痛的 IE 浏览器 nbsp 使用授权 nbsp jBox 永久免费使用 但是必须保留相关的版权信息 如果有好的建议 请 Email kudych
插件说明
– jBox 是一款基于 jQuery 的多功能对话框插件，能够实现网站的整体风格效果，给用户一个新的视觉享受。
运行环境
– 兼容 IE6+、Firefox、Chrome、Safari、Opera 等主流浏览器。备注：IE不支持边框的圆角样式，不推荐大家使用蛋痛的IE浏览器。
使用授权
– jBox 永久免费使用，但是必须保留相关的版权信息。如果有好的建议，请Email: ，jBox的完善需要大家的好建议。
使用方法
“text/javascript”
src=
“jBox/jquery-1.4.2.min.js”
>
-
“text/javascript”
src=“jBox/jquery.jBox-2.3.min.js”>
-
“text/javascript”
src=“jBox/i18n/jquery.jBox-zh-CN.js”>
-
-
“text/css”
rel=“stylesheet” href=“jBox/Skins/皮肤文件夹/jbox.css”/>
-
-
“text/css”
rel=“stylesheet” href=“jBox/Skins2/皮肤文件夹/jbox.css”/>
- 函数原型：
- $.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
版本：v2.0
日期：2011-7-24
‘;
- info += ‘官网：
http://kudystudio.com/jbox’
;
- $.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 = ”
输入姓名：
” ;
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 = ‘
‘
+
‘
购买数量：
‘
+
‘
收货地址：
‘
+
‘
‘
+
”;
var html2 = ‘
‘
+
‘
给卖家留言：
‘
+
”;
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) {
$(‘
请输入购买数量！’
).prependTo(h).show(‘fast’);
return false;
}
data.address = f.address;
if (data.address == ”) {
$(‘
请输入收货地址！’
).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(‘
正在提交…’
);
var msg = [];
msg.push(‘
‘
);
msg.push(‘
下面是提交的数据
‘
); for (var p in data) { msg.push(‘‘ + p + ‘:’ + data[p] + ‘
‘
); } msg.push(”); 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 = ” 输入点什么：
” ; 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 });
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/220734.html原文链接：https://javaforall.net
