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 相关文章推荐
用JavaScript脚本实现Web页面信息交互
Dec 21 Javascript
JQuery 选择器 xpath 语法应用
May 13 Javascript
javascript中onclick(this)用法介绍
Apr 19 Javascript
原生js ActiveXObject获取execl里面的值
Nov 01 Javascript
JavaScript中for..in循环陷阱介绍
Nov 12 Javascript
新增加的内容是如何将div的scrollbar自动移动最下面
Jan 02 Javascript
解析javascript中鼠标滚轮事件
May 26 Javascript
BootStrap响应式导航条实例介绍
May 06 Javascript
详解vue 中使用 AJAX获取数据的方法
Jan 18 Javascript
详解angularjs结合pagination插件实现分页功能
Feb 10 Javascript
jQuery选择器_动力节点Java学院整理
Jul 05 jQuery
Vue仿手机qq的实例代码(demo)
Sep 08 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 imagecreatetruecolor 创建高清和透明图片代码小结
2010/05/15 PHP
PHP加密函数 Javascript/Js 解密函数
2013/09/23 PHP
轻松实现php文件上传功能
2017/02/17 PHP
js获取元素在浏览器中的绝对位置
2010/07/24 Javascript
网页打开自动最大化的js代码
2012/08/22 Javascript
JS Date函数整理方便使用
2013/10/23 Javascript
巧用局部变量提升javascript性能
2014/02/24 Javascript
js获取网页可见区域、正文以及屏幕分辨率的高度
2014/05/15 Javascript
Iframe实现跨浏览器自适应高度解决方法
2014/09/02 Javascript
JavaScript实现的一个计算数字步数的算法分享
2014/12/06 Javascript
深入解读JavaScript中的Hoisting机制
2015/08/12 Javascript
JavaScript下的时间格式处理函数Date.prototype.format
2016/01/27 Javascript
原生JS下拉加载插件分享
2016/12/26 Javascript
vue的diff算法知识点总结
2018/03/29 Javascript
JavaScript 复制对象与Object.assign方法无法实现深复制
2018/11/02 Javascript
python 爬取微信文章
2016/01/30 Python
浅谈pytorch和Numpy的区别以及相互转换方法
2018/07/26 Python
Python3.4 splinter(模拟填写表单)使用方法
2018/10/13 Python
flask框架单元测试原理与用法实例分析
2019/07/23 Python
numpy.ndarray 实现对特定行或列取值
2019/12/05 Python
python的flask框架难学吗
2020/07/31 Python
Python学习工具jupyter notebook安装及用法解析
2020/10/23 Python
详解HTML5 data-* 自定义属性
2018/01/24 HTML / CSS
法国面料和小百货在线商店:Mondial Tissus
2019/03/23 全球购物
意大利包包和行李箱销售网站:Bagaglio.it
2021/03/02 全球购物
中国电子产品批发商/跨境电商/外贸网:Sunsky-online
2020/04/20 全球购物
2014年社区学雷锋活动总结
2014/03/09 职场文书
班级团队活动方案
2014/08/14 职场文书
大学毕业典礼演讲稿
2014/09/09 职场文书
债务纠纷委托书范本
2014/10/14 职场文书
幼师求职自荐信
2015/03/26 职场文书
php远程请求CURL案例(爬虫、保存登录状态)
2021/04/01 PHP
快速学习Oracle触发器和游标
2021/06/30 Oracle
「约定的梦幻岛」作画发布诺曼生日新绘
2022/03/21 日漫
python函数的两种嵌套方法使用
2022/04/02 Python
MySQL数据库简介与基本操作
2022/05/30 MySQL