插件详细介绍
一、实现的功能
1. 提示框在进入过程中及显示期间的内容可以自己通过开发者自由配置(包括html代码);
2. 提示框在消失过程中显示内容可以由开发者自由配置(包括html代码);
3. 提示框可以自由控制显示和消失,(如点击div1时显示提示框,在点击div2时该提示框消失,用于ajax:ajax执行时显示提示框,执行完成让提示框消失);
4. 开发者可以选择提示框出现方向:从右向左展开、从左向右展开、从上到下展开、从下岛上展开(有点像擦除效果),默认为从右向左展开;
5. 开发者可以选择提示框消失方向:从右向左展开、从左向右展开、从上到下展开、从下岛上展开(有点像擦除效果),默认为从左往右擦除;
6. 开发者可以选择出现样式:淡入、直接显示(目前只支持这两种),默认为淡入;
7. 开发者可以选择消失样式:淡出、直接消失(目前只支持这两种),默认为淡出;
8. 开发者可以配置提示框出现、消失、淡入、淡出过程的时间(从完全看不见到完全展示出来)
9. 开发者可以通过css控制提示框进入过程(包括显示期间)、消失过程效果(除了position:absolute,升级版本考虑开放此配置),包括:宽、高、边框、背景、阴影、圆角等效果(需要开发者自己实现css的浏览器兼容)
10. 出现、消失过程相互独立互不影响,也就是说出现和消失的样式(消失的宽高配置无效)是相互独立可以自由配置的
11. 开发者可以选择提示框出现的位置(默认为3中显示方式)
包括:(1)在时间触发的节点所在位置显示(如点击一个div则直接显示一个提示框将这个div盖住,阻止开发者再次点击div),
(2)在触发节点指定偏移(偏移量开发者可以自由配置)位置显示;默认没有偏移
(3)在浏览器指定位置显示(位置可由开发者自由配置);默认的显示位置为浏览器右下角(相对浏览器静止)
12. 开发者可以配置提示框延迟出现效果(如点击一个div后等1000毫秒再出现);(默认没有延迟)
13. 开发者可以配置提示框自动消失时间,配置<=0则不自动消失, 默认为提示框不自动消失(如点击一个div后隔3000毫秒自动消失)
14. 开发者可以配置提示框延迟消失效果(如点击一个div后等1000毫秒再消失);(默认没有延迟)
15. 开发者可以配置提示框的透明度(默认为不透明)
16. 其中消失、显示效果相互独立,开发者可以将对应效果根据需要自由叠加
兼容性说明: 支持IE7+,以及其他主流浏览器(在IE6下没有相对浏览器静止的效果)
特别说明:
同时配置了进入显示的宽高、消失时的宽高则提示框在整个流程中的宽高都为进入时的宽高(进出的独立性有待改进)
二、新增功能
1. 加入可配置是否相对浏览器静止(positionIsFixed, 默认为true相对浏览器静止)
2. 在显示和消失时可以以参数形式加入提示语(fjDialog.showDialog("出现时的内容"), fjDialog.hiddenDialog("消失时的内容"), 提示:若用于Ajax等可以设置延迟消失以便看清消失前的提示内容)
三、配置方式
/*
(1)
dialog 宽高说明:优先使用css中设置的宽高, 如果css中没有设置或者为auto,则使用用户js中配置的宽高, 如果用户没有配置或者配置的为auto则使用默认的宽高(在浏览器边界显示
displayedInTheBrowser==true时为displayedInTheBrowserWidth和displayedInTheBrowserHeight,不然则为配置节点宽高(如,$('#aaa').fjDialog(settings)则为id=aaa的div的宽高))
(2)显示在浏览器边界displayedInTheBrowser==true时与在时间触发节点附近的各种配置无效
(3)若需要在点击事件发生的节点内显示则不需配置infoClassName(一个css名)属性,且宽高为0、或者不设置宽高、或者宽高为'auto'(升级版会考虑修改)
*/
/*-----------------------------提示框进入过程中及显示时间内的各种配置--------------------------------*/
infoPosition: 'left', // 提示框出现的方向, 有4个选项:left: 向左展开, top: 向上展开, bottom: 向右展开, down: 向下展开, center则直接显示出来
infoStyle: 'fadeIn', // 进入效果, 默认fadeIn(淡入), 可设置为没有效果'none',其效果可以和inPosition叠加
infoAnimateSpeed: 618, // 出现的速度,默认618毫秒,以及淡入的速度
infoShowMessage: '显示', // 进入过程中及显示期间显示在提示框内的内容
infoClassName: 'fjdialog_show_default_style', // 进入的className, 开发者可以自己建一个.class的css效果将className传进来就可以了
/*-----------------------------提示框消失的各种配置--------------------------------*/
outPosition: 'right', // 提示框消失的方向
outStyle: 'fadeOut', // 淡出效果
outAnimateSpeed: 618, // 消失动画的速度
outShowMessage: '消失', //消失过程中显示的提示内容
outClassName: 'fjdialog_hidden_default_style',
/*-----------------------------高级设置--------------------------------*/
displayedInTheBrowser: true, // 显示在浏览器边界, 默认样式, 设置为false则显示在点击节点内或附近显示
positionIsFixed: true, // 相对浏览器静止显示
showTimeOut: 0, //事件发生后延迟多少时间显示dialog
hiddenTimeOut: 0, //消失时间触发后后延迟多少时间让dialog消失
autoHiddeenTime: 0, // 自动消失时间, 如果为0则不自动消失, 需要调用hidden()才会消失
dialogOpacity: 0.618, // 提示框最终显示时的透明度
// 如果基于浏览器显示(displayedInTheBrowser = true)则不用设置下面两个属性, 设置了也无效
offsetEventLeft : 0, //提示框左边界离点击等事件发生节点的距离(左边距)
offsetEventTop: 0,//提示框上边界离点击等事件发生节点的距离(上边距)
// 如果基于浏览器显示(displayedInTheBrowser = true)则可以用下面4个设置起属性
positionLeft : 0, //提示框的绝对位置左边距 , 若4者同时设置则默认top,left有效
positionTop: 0, //提示框的绝对位置上边距
positionRight : 0, //提示框的绝对位置左边距
positionBottom: 0, //提示框的绝对位置上边距
displayedInTheBrowserWidth: 168, //displayedInTheBrowser= true且没有设置提示框宽度,或者提示框宽度为0时dialog的默认宽度,需要传入infoClassName且不设置宽
displayedInTheBrowserHeight: 62 //displayedInTheBrowser= true且没有设置提示框高度,或者提示框高度为0 时dialog的默认高度,需要传入infoClassName且不设置高,
/*如果需要配置显示在浏览器相对禁止位置的提示框的宽高,则可以采用(1)配置infoClassName传入的css设置宽高,
(2)传入css不设置宽高,配置displayedInTheBrowserWidth、displayedInTheBrowserHeight参数
*/
四、调用方式:
var publicFjDialog = $("body").fjDialog(fjDialogSettings);// fjDialogSettings为包含上述配置的变量
$("#1").click(publicFjDialog.showDialog);// 提示框显示
$("#2").click(publicFjDialog.hiddenDialog);// 提示框消失
五、bug修护或放弃功能
1. IE6的兼容(放弃)
2. 进入和退出宽高的独立(由于实际意义不大放弃)
3. 开发者配置输入数据的验证以及提示加之纠正(由于实际意义不大放弃)
4. 如果浏览器右下角已经有了提示框则新的提示框在其上方显示(在没有配置显示框的位置的时候可以, 如果设置了则以设置的值为主, 且只针对相对浏览器静止的显示方式, 不兼容IE6)
六、下一版本预计升级功能
1. 显示和消失过程中overflow部分的样式不是让其向下抵而是直接隐藏
2. 可以在任何地方任何时间修改提示框的所有配置
3. 加入可选配置:提示框自带关闭按钮