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


Posted in Javascript onNovember 10, 2011

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

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

jBox 2.3基于jquery的最新多功能对话框插件 常见使用问题解答
版本: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="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"/>

常见使用问题:
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);
Javascript 相关文章推荐
JS 类型转换常见方法小结
May 31 Javascript
js 获取时间间隔实现代码
May 12 Javascript
基于javascript代码检测访问网页的浏览器呈现引擎、平台、Windows操作系统、移动设备和游戏系统
Dec 03 Javascript
微信小程序 教程之注册页面
Oct 17 Javascript
手机移动端实现 jquery和HTML5 Canvas的幸运大奖盘特效
Dec 06 Javascript
bootstrap 下拉多选框进行多选传值问题代码分析
Feb 14 Javascript
vue中如何使用ztree
Feb 06 Javascript
微信小程序地图(map)组件点击(tap)获取经纬度的方法
Jan 10 Javascript
详解JavaScript的内存空间、赋值和深浅拷贝
Apr 17 Javascript
js实现直播点击飘心效果
Aug 19 Javascript
详解微信小程序(Taro)手动埋点和自动埋点的实现
Mar 02 Javascript
vue 把二维或多维数组转一维数组
Apr 24 Vue.js
Javascript中的isNaN函数使用说明
Nov 10 #Javascript
推荐40个非常优秀的jQuery插件和教程【系列三】
Nov 09 #Javascript
关于二级域名下使用一级域名下的COOKIE的问题
Nov 07 #Javascript
用jquery和json从后台获得数据集的代码
Nov 07 #Javascript
JS重要知识点小结
Nov 06 #Javascript
javascript日期转换 时间戳转日期格式
Nov 05 #Javascript
jQuery News Ticker 基于jQuery的即时新闻行情展示插件
Nov 05 #Javascript
You might like
ThinkPHP5实现作业管理系统中处理学生未交作业与已交作业信息的方法
2016/11/12 PHP
Laravel5.7框架安装与使用学习笔记图文详解
2019/04/02 PHP
IE8 原生JSON支持
2009/04/13 Javascript
表单的焦点顺序tabindex和对应enter键提交
2013/01/04 Javascript
JS实现静止元素自动移动示例
2014/04/14 Javascript
js事件绑定快捷键以ctrl+k为例
2014/09/30 Javascript
JavaScript前补零操作实例
2015/03/11 Javascript
JS利用cookie记忆当前位置的防刷新导航效果
2015/10/15 Javascript
jQuery使用cookie与json简单实现购物车功能
2016/04/15 Javascript
设计模式中的组合模式在JavaScript程序构建中的使用
2016/05/18 Javascript
JavaScript中输出信息的方法(信息确认框-提示输入框-文档流输出)
2016/06/12 Javascript
bootstrap treeview 扩展addNode方法动态添加子节点的方法
2017/11/21 Javascript
浅谈ajax在jquery中的请求和servlet中的响应
2018/01/22 jQuery
Angular 数据请求的实现方法
2018/05/07 Javascript
Javascript中parseInt的正确使用方式
2018/10/17 Javascript
Vue项目引进ElementUI组件的方法
2018/11/11 Javascript
JavaScript常见事件处理程序实例总结
2019/01/05 Javascript
vue实现微信分享链接添加动态参数的方法
2019/04/29 Javascript
JavaScript实现随机点名器实例详解
2019/05/07 Javascript
使用异步controller与jQuery实现卷帘式分页
2019/06/18 jQuery
微信小程序实现页面分享onShareAppMessage
2019/08/12 Javascript
详解从vue-loader源码分析CSS Scoped的实现
2019/09/23 Javascript
学习python (1)
2006/10/31 Python
疯狂上涨的Python 开发者应从2.x还是3.x着手?
2017/11/16 Python
Python实现聊天机器人的示例代码
2018/07/09 Python
virtualenv 指定 python 解释器的版本方法
2018/10/25 Python
Python docx库用法示例分析
2019/02/16 Python
Python代码实现删除一个list里面重复元素的方法
2019/04/02 Python
Pycharm新手使用教程(图文详解)
2020/09/17 Python
Electrolux伊莱克斯巴西商店:家用电器、小家电和配件
2018/05/23 全球购物
美国综合购物商城:UnbeatableSale.com
2018/11/28 全球购物
公司离职证明范本
2014/01/13 职场文书
详细的大学生创业计划书模板
2014/01/27 职场文书
呼啸山庄读书笔记
2015/06/29 职场文书
详解如何在Canvas中添加事件的方法
2021/04/17 Javascript
Nginx虚拟主机的配置步骤过程全解
2022/03/31 Servers