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 相关文章推荐
文本框的字数限制功能jquery插件
Nov 24 Javascript
jquery 提交值不为空的元素示例代码
May 10 Javascript
jQuery 重复加载错误以及修复方法
Dec 16 Javascript
SuperSlide标签切换、焦点图多种组合插件
Mar 14 Javascript
AngularJs中route的使用方法和配置
Feb 04 Javascript
深入理解jQuery之事件移除
Jun 02 Javascript
JavaScript易错知识点整理
Dec 05 Javascript
详解前端自动化工具gulp自动添加版本号
Dec 20 Javascript
详解JavaScript对数组操作(添加/删除/截取/排序/倒序)
Apr 28 Javascript
Vue 实现监听窗口关闭事件,并在窗口关闭前发送请求
Sep 01 Javascript
JavaScript Array.flat()函数用法解析
Sep 02 Javascript
JavaScript实现网页留言板功能
Nov 23 Javascript
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
PHP实现文件安全下载
2006/10/09 PHP
PHP 异步执行方法,模拟多线程的应用分析
2013/06/03 PHP
thinkphp5框架调用其它控制器方法 实现自定义跳转界面功能示例
2019/07/03 PHP
JavaScript打印网页指定区域的例子
2014/05/03 Javascript
jquery实现侧边弹出的垂直导航
2014/12/09 Javascript
javascript限制文本框输入值类型的方法
2015/05/07 Javascript
jquery动态切换背景图片的简单实现方法
2016/05/14 Javascript
jQuery学习之DOM节点的插入方法总结
2017/01/22 Javascript
如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
2017/07/17 jQuery
JS判断数组那点事
2017/10/10 Javascript
JavaScript偏函数与柯里化实例详解
2019/03/27 Javascript
Javascript读取上传文件内容/类型/字节数
2019/04/30 Javascript
nodejs log4js 使用详解
2019/05/31 NodeJs
基于node+websocket+html实现腾讯课堂聊天室聊天功能
2020/03/04 Javascript
Vue切换Tab动态渲染组件的操作
2020/09/21 Javascript
python操作redis的方法
2015/07/07 Python
python冒泡排序简单实现方法
2015/07/09 Python
Python Pandas批量读取csv文件到dataframe的方法
2018/10/08 Python
配置 Pycharm 默认 Test runner 的图文教程
2018/11/30 Python
用python 实现在不确定行数情况下多行输入方法
2019/01/28 Python
对Pycharm创建py文件时自定义头部模板的方法详解
2019/02/12 Python
python实现名片管理系统项目
2019/04/26 Python
Pycharm新手教程(只需要看这篇就够了)
2019/06/18 Python
Python如何执行精确的浮点数运算
2020/07/31 Python
使用layui实现左侧菜单栏及动态操作tab项的方法
2020/11/10 HTML / CSS
Stührling手表官方网站:男女高品质时尚手表的领先零售商
2021/01/07 全球购物
双立人美国官方商店:ZWILLING集团餐具和炊具
2020/05/07 全球购物
儿科主治医生个人求职信
2013/09/23 职场文书
实习生自荐信范文分享
2013/11/27 职场文书
车辆委托书范本
2014/10/05 职场文书
邹越演讲观后感
2015/06/15 职场文书
职工培训工作总结
2015/08/10 职场文书
如何书写邀请函?
2019/06/24 职场文书
OpenCV-Python使用cv2实现傅里叶变换
2021/06/09 Python
详解Spring事件发布与监听机制
2021/06/30 Java/Android
Java 关于String字符串原理上的问题
2022/04/07 Java/Android