jBox 2.3基于jquery的最新多功能对话框插件常见使用问题解答

网络编程 2024/11/16 佚名

3 2 1

插件说明
- jBox 是一款基于 jQuery 的多功能对话框插件，能够实现网站的整体风格效果，给用户一个新的视觉享受。
运行环境
- 兼容 IE6+、Firefox、Chrome、Safari、Opera 等主流浏览器。
使用授权
- jBox 永久免费使用，但是必须保留相关的版权信息。如果有好的建议，可以直接在下面留言。

版本：2.3
大小：19.8k
下载：点击下载
在线demo:http://www.kudystudio.com/jbox/jbox-demo.html
[2011-11-08] jBox v2.3 beta 版本更新
复制代码代码如下:
- [新增] tip方法增加了 opacity 选项，它决定是否显示隔离层。
- [新增] 增加了 showScrolling 选项，在显示jBox窗口时可以隐藏浏览器的滚动条。
- [新增] 多个窗口共存时，点击某个窗口标题时，窗口自动处于最顶层。
- [调整] id 选项默认改为null，当为null时会自动生成随机id，一个id只会显示一个jBox。
- [调整] loaded 选项增加了个参数h，参数h表示窗口内容的jQuery对象，方便用户在窗口加载后对内容进行初始化处理。
- [调整] 把全局设置放到独立的js文件，统一放在目录 i18n，目前只有jquery.jBox-zh-CN.js。
- [调整] 按空格键可直接执行默认按钮提交的事件（为保留此功能，按钮为焦点时不是很好看，但用户体验应该优先考虑）。
- [修复] 修复在IE下多窗口状态切换时显示不了的Bug。

使用方法：
复制代码代码如下:
<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-1.4.2.min.js"><script type="text/javascript" src="/UploadFiles/2021-04-02/jquery.jBox-2.3.min.js"><script type="text/javascript" src="/UploadFiles/2021-04-02/jquery.jBox-zh-CN.js"><link type="text/css" rel="stylesheet" href="jBox/Skins/皮肤文件夹/jbox.css"/>
// 或
<link type="text/css" rel="stylesheet" href="jBox/Skins2/皮肤文件夹/jbox.css"/>

常见使用问题：
1.请使用XHTML 1.0标准
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2.不想显示标题？
把title设置为null即可，例如： jBox('内容', { title: null });
3.不想要按钮？自定义按钮？
把buttons设置为{}表示不显示按钮，例如： jBox('内容', { buttons: {} });
自定义按钮：jBox('内容', { buttons: {'按钮1':'按钮1点击返回值','按钮2':'按钮2点击返回值'} });
还可以设置buttonsFocus要哪个按钮为默认按钮，索引从0开始
4.不显示隔离层？
把opacity设置为0即可，例如： jBox('内容', { opacity: 0 });
5.窗口自动关闭？
把timeout设置为0表示不自动关闭，正数表示多少毫秒后自动关闭，例如3秒后关闭： jBox('内容', { timeout: 3000 });
6.在不显示隔离层的情况下，想防止点击按钮弹出多个一样的窗口？
把id传进去就可以了，因为一个id只会显示一个窗口，例如： jBox('内容', { id: 'my-id'});
7.窗口的高和宽一定要指定值吗？可以自适应吗？
除了iframe外，其它情况，是可以指定窗口的高和宽是自适应的，例如：jBox('内容', { width: 'auto', height:'auto' });
jbox的可选参数很多，结合不同的参数可以会有不同的效果，请查看下面的全局参数说明（在文件jquery.jBox-zh-CN.js）。如果你是使用简体中文，且不想改全局配置，则不需要加载jquery.jBox-zh-CN.js，因为jquery.jBox-2.3.min.js里默认的设置和jquery.jBox-zh-CN.js是一样的，如果只想修改某几个选项，例如窗口边框，只需要一行代码就可以：jBox.setDefaults({ defaults: { border: 8} });
喜欢jBox的朋友别忘了点一下[推荐]哦，3q
复制代码代码如下:
/* jBox 全局设置 */
var jBoxConfig = {};
jBoxConfig.defaults = {
id: null, /* 在页面中的唯一id，如果为null则自动生成随机id,一个id只会显示一个jBox */
top: '15%', /* 窗口离顶部的距离,可以是百分比或像素(如 '100px') */
border: 5, /* 窗口的外边框像素大小,必须是0以上的整数 */
opacity: 0.1, /* 窗口隔离层的透明度,如果设置为0,则不显示隔离层 */
timeout: 0, /* 窗口显示多少毫秒后自动关闭,如果设置为0,则不自动关闭 */
showType: 'fade', /* 窗口显示的类型,可选值有:show、fade、slide */
showSpeed: 'fast', /* 窗口显示的速度,可选值有:'slow'、'fast'、表示毫秒的整数 */
showIcon: true, /* 是否显示窗口标题的图标，true显示，false不显示，或自定义的CSS样式类名（以为图标为背景） */
showClose: true, /* 是否显示窗口右上角的关闭按钮 */
draggable: true, /* 是否可以拖动窗口 */
dragLimit: true, /* 在可以拖动窗口的情况下，是否限制在可视范围 */
dragClone: false, /* 在可以拖动窗口的情况下，鼠标按下时窗口是否克隆窗口 */
persistent: true, /* 在显示隔离层的情况下，点击隔离层时，是否坚持窗口不关闭 */
showScrolling: true, /* 是否显示浏览的滚动条 */
ajaxData: {}, /* 在窗口内容使用get:或post:前缀标识的情况下，ajax post的数据，例如：{ id: 1 } 或 "id=1" */
iframeScrolling: 'auto', /* 在窗口内容使用iframe:前缀标识的情况下，iframe的scrolling属性值，可选值有：'auto'、'yes'、'no' */
title: 'jBox', /* 窗口的标题 */
width: 350, /* 窗口的宽度，值为'auto'或表示像素的整数 */
height: 'auto', /* 窗口的高度，值为'auto'或表示像素的整数 */
bottomText: '', /* 窗口的按钮左边的内容，当没有按钮时此设置无效 */
buttons: { '确定': 'ok' }, /* 窗口的按钮 */
buttonsFocus: 0, /* 表示第几个按钮为默认按钮，索引从0开始 */
loaded: function (h) { }, /* 窗口加载完成后执行的函数，需要注意的是，如果是ajax或iframe也是要等加载完http请求才算窗口加载完成，参数h表示窗口内容的jQuery对象 */
submit: function (v, h, f) { return true; }, /* 点击窗口按钮后的回调函数，返回true时表示关闭窗口，参数有三个，v表示所点的按钮的返回值，h表示窗口内容的jQuery对象，f表示窗口内容里的form表单键值 */
closed: function () { } /* 窗口关闭后执行的函数 */
};
jBoxConfig.stateDefaults = {
content: '', /* 状态的内容，不支持前缀标识 */
buttons: { '确定': 'ok' }, /* 状态的按钮 */
buttonsFocus: 0, /* 表示第几个按钮为默认按钮，索引从0开始 */
submit: function (v, h, f) { return true; } /* 点击状态按钮后的回调函数，返回true时表示关闭窗口，参数有三个，v表示所点的按钮的返回值，h表示窗口内容的jQuery对象，f表示窗口内容里的form表单键值 */
};
jBoxConfig.tipDefaults = {
content: '', /* 提示的内容，不支持前缀标识 */
icon: 'info', /* 提示的图标，可选值有'info'、'success'、'warning'、'error'、'loading'，默认值为'info'，当为'loading'时，timeout值会被设置为0，表示不会自动关闭。 */
top: '40%', /* 提示离顶部的距离,可以是百分比或像素(如 '100px') */
width: 'auto', /* 提示的高度，值为'auto'或表示像素的整数 */
height: 'auto', /* 提示的高度，值为'auto'或表示像素的整数 */
opacity: 0, /* 窗口隔离层的透明度,如果设置为0,则不显示隔离层 */
timeout: 3000, /* 提示显示多少毫秒后自动关闭,必须是大于0的整数 */
loaded: function (h) { } /* 窗口加载完成后执行的函数，参数h表示窗口内容的jQuery对象 */
};
jBoxConfig.messagerDefaults = {
content: '', /* 信息的内容，不支持前缀标识 */
title: 'jBox', /* 信息的标题 */
icon: 'none', /* 信息图标，值为'none'时为不显示图标，可选值有'none'、'info'、'question'、'success'、'warning'、'error' */
width: 350, /* 信息的高度，值为'auto'或表示像素的整数 */
height: 'auto', /* 信息的高度，值为'auto'或表示像素的整数 */
timeout: 3000, /* 信息显示多少毫秒后自动关闭,如果设置为0,则不自动关闭 */
showType: 'slide', /* 信息显示的类型,可选值有:show、fade、slide */
showSpeed: 600, /* 信息显示的速度,可选值有:'slow'、'fast'、表示毫秒的整数 */
border: 0, /* 信息的外边框像素大小,必须是0以上的整数 */
buttons: {}, /* 信息的按钮 */
buttonsFocus: 0, /* 表示第几个按钮为默认按钮，索引从0开始 */
loaded: function () { }, /* 窗口加载完成后执行的函数 */
submit: function (v, h, f) { return true; }, /* 点击信息按钮后的回调函数，返回true时表示关闭窗口，参数有三个，v表示所点的按钮的返回值，h表示窗口内容的jQuery对象，f表示窗口内容里的form表单键值 */
loaded: function (h) { } /* 窗口加载完成后执行的函数，参数h表示窗口内容的jQuery对象 */
};
jBoxConfig.languageDefaults = {
close: '关闭', /* 窗口右上角关闭按钮提示 */
ok: '确定', /* $.jBox.prompt() 系列方法的“确定”按钮文字 */
yes: '是', /* $.jBox.warning() 方法的“是”按钮文字 */
no: '否', /* $.jBox.warning() 方法的“否”按钮文字 */
cancel: '取消' /* $.jBox.confirm() 和 $.jBox.warning() 方法的“取消”按钮文字 */
};
$.jBox.setDefaults(jBoxConfig);

jBox,jQuery,对话框插件

标签：

jBox,jQuery,对话框插件

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

评论“jBox 2.3基于jquery的最新多功能对话框插件常见使用问题解答”

jBox 2.3基于jquery的最新多功能对话框插件常见使用问题解答

暂无“jBox 2.3基于jquery的最新多功能对话框插件常见使用问题解答”评论...

www.imxmx.com 杰晶网络

8,675无损音乐

1,324高清电影

213破解软件

120,141站长资源

jBox 2.3基于jquery的最新多功能对话框插件常见使用问题解答

jBox,jQuery,对话框插件

JQuery模板插件 jquery.tmpl 动态ajax扩展

Javascript中的isNaN函数使用说明

评论“jBox 2.3基于jquery的最新多功能对话框插件常见使用问题解答”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

更新动态

友情链接

jBox 2.3基于jquery的最新多功能对话框插件 常见使用问题解答

jBox,jQuery,对话框插件

JQuery模板插件 jquery.tmpl 动态ajax扩展

Javascript中的isNaN函数使用说明

评论“jBox 2.3基于jquery的最新多功能对话框插件 常见使用问题解答”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新动态

友情链接

jBox 2.3基于jquery的最新多功能对话框插件常见使用问题解答

评论“jBox 2.3基于jquery的最新多功能对话框插件常见使用问题解答”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存