• jQuery 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();

    作者:沐雪
    文章均系作者原创或翻译,如有错误不妥之处,欢迎各位批评指正。本文版权归作者和博客园共有,如需转载恳请注明。
    如果您觉得阅读这篇博客让你有所收获,请点击右下方【推荐】
    找一找教程网-随时随地学软件编程 http://www.zyiz.net/

  • 相关阅读:
    PAT甲级——A1059 Prime Factors
    PAT甲级——A1058 A+B in Hogwarts
    PAT甲级——A1057 Stack
    hdu2665 主席树模板题
    存两个图论模板
    存两个图论模板
    存两个图论模板
    codevs1080 第一次用ZKW线段树
    codevs1080 第一次用ZKW线段树
    codevs1080 第一次用ZKW线段树
  • 原文地址:https://www.cnblogs.com/puzi0315/p/2658353.html
Copyright © 2020-2023  润新知