jQuery ColorBox插件使用小记

简介: ColorBox算的上是jQuery一款很不错的弹窗插件了。最近的一个项目中也用到了它,尤其是它的iframe功能感觉比Ajax要简化许多。 使用方法大概有两种,一种是页面加载完成后为链接绑定事件。 ColorBox打开// 对应的JavaScript脚本为$(function() {$(‘#colorboxLink’).colorbox(‘/*这里可以写一些Colorbox的配置*/’);}); 还有一种方法就是在函数中调用,这也是我用的比较多的一种。

ColorBox算的上是jQuery一款很不错的弹窗插件了。最近的一个项目中也用到了它,尤其是它的iframe功能感觉比Ajax要简化许多。

使用方法大概有两种,一种是页面加载完成后为链接绑定事件。

<a id=”colorboxLink” href=”http://www.phplamp.org”>ColorBox打开</a>
// 对应的JavaScript脚本为
$(function() {
$(‘#colorboxLink’).colorbox(‘/*这里可以写一些Colorbox的配置*/’);
});

还有一种方法就是在函数中调用,这也是我用的比较多的一种。

function colorboxShow() {
$.colorbox({href:’链接地址’});
}

关于ColorBox的参数配置我还是比较有心得的,为了在不同的浏览器中表现出相同的效果,参数配置了N多种才满足了我的要求(该死的IE)。

1. transition:fade|none|elastic

transition主要控制ColorBox的出现效果,默认的是elastic,我用的时候直接将它设为none了,完全是因为IE

2. href:String

很明显,打开的链接地址

3. iframe:true|false

链接是否以iframe形式打开,打开的链接由href设置

4. inline:true|false

打开当前页面某个ID内的东西。ID由href设置,ID前要加#,(注意inline与iframe是不兼容的,想想也知道不能兼容,我还傻傻的试了N多遍)。

5. title:String

弹出窗口的标题

6. width, height

弹窗的大小,最好设大点,不然效果会很难看(绝对的BUG)。

7. 这也是最致使的一点,让我调试最长的一个问题。

如果以事件形式调用colorbox,如:<a href=”javascript:;” onclick=”colorboxShow()”>打开Colorbox</a>,IE不会打开iframe,其它浏览器没有问题;必需将href改为#才行。(又一个该死的BUG)

8. 关闭colorbox

window.parent.$.colorbox.close();

相关文章
|
7月前
|
JavaScript
Jquery插件知识之Jquery.cookie实现页面传值
Jquery插件知识之Jquery.cookie实现页面传值
39 0
|
8月前
|
JavaScript
jQuery 插件自用列表
jQuery 插件自用列表
30 0
|
11天前
|
JavaScript
jQuery图片延迟加载插件jQuery.lazyload
jQuery图片延迟加载插件jQuery.lazyload
|
11天前
|
JavaScript 数据可视化 前端开发
jQuery-JS插件-第9次课-使用插件让领导对你刮目相看-附案例作业
jQuery-JS插件-第9次课-使用插件让领导对你刮目相看-附案例作业
22 0
|
9月前
|
JavaScript
jQuery编写插件的两种方法
jQuery编写插件的两种方法
59 0
|
11天前
|
JavaScript 前端开发
开发jQuery插件这些就够了
开发jQuery插件这些就够了
33 0
|
11天前
|
JavaScript 前端开发 安全
jQuery 第十一章(表单验证插件推荐)
jQuery 第十一章(表单验证插件推荐)
62 1
|
6月前
|
JavaScript
jQuery年月日(年龄)选择插件
jQuery年月日(年龄)选择插件
31 0
|
6月前
|
前端开发 JavaScript
Jquery前端分页插件pagination同步加载和异步加载
Jquery前端分页插件pagination同步加载和异步加载
51 0