现在位置首页 / 前端开发 /正文

jquery colorbox完整使用说明+demo下载

作者: IT小兵 | 2014年9月13日| 热度:℃ | 评论: |参与:

在以前分享的关于jquery colorbox的文章中,有2篇:

[jquery简单实用弹出框控件-Colorbox使用]

[jquery简单实用弹出框控件-Colorbox事件例子]

昨天又用到这个插件了,但是我发现我自己看我的文章都看不明白那。有点小挫折。。。。


今天再看了一遍代码,将一个完整的使用例子和说明发布出来,希望以后能够有帮助。

首先,如果没有耐心看我代码,直接去官方下载最新的demo即可。http://www.jacklmoore.com/colorbox/ 

Colorbox一个jQuery lightbox,一个轻量级的可定制的lightbox jQuery插件.支持一下功能,还是很强大的。

  1. 支持图片、分组、幻灯片、ajax、内联和iframe的内容。

  2. 轻量级:10 kb的JavaScript(少于5 kbs gzip)。

  3. 外观控制通过CSS可以改变。

  4. 可以扩展回调&事件钩子不改变源文件。

  5. JS完全不引人注目的,选项设置,不需要修改现有的HTML。

  6. 预载照片组即将到来的图像。

  7. 当前使用的多 达190万个网站 。


使用方法非常简单

第一步引用js:

    <script type="text/javascript" src="../../Assets/js/jquery-2.0.3.min.js"></script>
  <script  type="text/javascript"  src="../../Assets/js/jquery.colorbox-min.js"></script>

第二步:

定义需要使用的html,这里以内联的html为例子。

    <div style="display:none;" id="divuploadlogo"> 
         我是要显示的html控件
    </div>

定义一个a 指向这个div:

 <a  class='inline'  id="uploadlogo" href="#divuploadlogo">点击上传</a>

第三部,在js中定义a和div的关系:

$(document).ready(function () {
 
    $("#uploadlogo").colorbox({
        title: "上传Logo",  
        returnFocus: true, inline: true, innerWidth: "60%",
        innerHeight: "80%", fixed: true
    }); 
    $(document).bind('cbox_open', function (e) {
         
        $("#divuploadlogo").show();
    });
    $(document).bind('cbox_closed', function () {
        $("#divuploadlogo").hide();
    });
});

需要注意:colorbox支持的是a,如果你把div按照上面的步骤作为按钮的话,是无法实现这个弹出效果的。

Colorbox接受设置从一个对象的键/值对,并可以分配给任何HTML元素。

// Format:
$(selector).colorbox({key:value, key:value, key:value});
// Examples:
// Image links displayed as a group
$('a.gallery').colorbox({rel:'gal'});
// Ajax
$('a#login').colorbox();
// Called directly, without assignment to an element:
$.colorbox({href:"thankyou.html"});
// Called directly with HTML
$.colorbox({html:"<h1>Welcome</h1>"});
// Colorbox can accept a function in place of a static value:
$("a.gallery").colorbox({rel: 'gal', title: function(){
  var url = $(this).attr('href');
  return '<a href="' + url + '" target="_blank">Open In New Window</a>';
}});


点击阅读本文所属分类的更多文章: 前端开发 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:[email protected]

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:[email protected]

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询