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之九 一些瑕疵说明
Jun 21 Javascript
js简单实现删除记录时的提示效果
Dec 05 Javascript
Javascript blur与click冲突解决办法
Jan 09 Javascript
jQuery简单获取DIV和A标签元素位置的方法
Feb 07 Javascript
JavaScript 巧学巧用
May 23 Javascript
详解Vue 方法与事件处理器
Jun 20 Javascript
JS实现简单短信验证码界面
Aug 07 Javascript
详解js跨域请求的两种方式,支持post请求
May 05 Javascript
JavaScript继承与聚合实例详解
Jan 22 Javascript
Vue匿名插槽与作用域插槽的合并和覆盖行为
Apr 22 Javascript
React 父子组件通信的实现方法
Dec 05 Javascript
JS数组方法slice()用法实例分析
Jan 18 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文件时顶部出现空白影响布局分析原因及解决办法
2013/01/11 PHP
实用的简单PHP分页集合包括使用方法
2013/10/21 PHP
解决php 处理 form 表单提交多个 name 属性值相同的 input 标签问题
2017/05/11 PHP
Js点击弹出下拉菜单效果实例
2013/08/12 Javascript
5分钟理解JavaScript中this用法分享
2013/11/09 Javascript
javascript 寻找错误方法整理
2014/06/15 Javascript
jQuery中parentsUntil()方法用法实例
2015/01/07 Javascript
JavaScript实现判断图片是否加载完成的3种方法整理
2015/03/13 Javascript
最简单的tab切换实例代码
2016/05/13 Javascript
angularjs 表单密码验证自定义指令实现代码
2016/10/27 Javascript
浅谈js函数的多种定义方法与区别
2016/11/29 Javascript
如何提高Dom访问速度
2017/01/05 Javascript
微信小程序  TLS 版本必须大于等于1.2问题解决
2017/02/22 Javascript
微信小程序实现轮播图效果
2017/09/07 Javascript
Vue项目引发的「过滤器」使用教程
2019/03/12 Javascript
个人小程序接入支付解决方案
2019/05/23 Javascript
pageGroup.js实现分页功能
2019/07/27 Javascript
深入分析jQuery.one() 函数
2020/06/03 jQuery
Vue实现点击导航栏当前标签后变色功能
2020/08/19 Javascript
Python探索之自定义实现线程池
2017/10/27 Python
Python 利用内置set函数对字符串和列表进行去重的方法
2018/06/29 Python
在Pytorch中使用样本权重(sample_weight)的正确方法
2019/08/17 Python
美国牙科折扣计划:DentalPlans.com
2019/08/26 全球购物
为什么要使用servlet
2016/01/17 面试题
外科实习自我鉴定
2013/10/06 职场文书
司机职责范本
2014/03/08 职场文书
缓刑期间思想汇报范文
2014/10/10 职场文书
四风专项整治工作情况汇报
2014/10/28 职场文书
大三学生英语考试作弊检讨书
2015/01/01 职场文书
指导老师鉴定意见
2015/06/05 职场文书
2015年工商局个人工作总结
2015/07/23 职场文书
大学宣传委员竞选稿
2015/11/19 职场文书
SpringBoot整合阿里云视频点播的过程详解
2021/12/06 Java/Android
Java实现学生管理系统(IO版)
2022/02/24 Java/Android
一篇文章弄清楚Ajax请求的五个步骤
2022/03/17 Javascript
Oracle 多表查询基本语法实例
2022/04/18 Oracle