zoukankan      html  css  js  c++  java
  • colorbox去除close关闭按钮,附上colorbox的基本使用方法

    要去除colorbox的关闭按钮,网上找了好多资料,都没找到其中用设置close参数的方式来解决,有找到的麻烦告诉我声,然后只好在onload事件中将这按钮remove或者hide()掉,代码如下: 

     $('selector').colorbox({onLoad:function(){

        $('#cboxClose').remove();
    }});

     

    $(".class_name").colorbox({innerWidth:500, innerHeight:400, iframe:true, escKey:false, overlayClose:false,onLoad: function() {
        $
    ('#cboxClose').remove();

    }}); 

    另附上colorbox的使用方法:

    ColorBox是一个基于jQuery 1.3 的轻量级,自定义灯箱插件,功能非常强大,支持图片,图片组,ajax,inline和iframed内容,灯箱样式完全由用户控制,可自定义CSS样 式,不需要改写ColorBox库文件就能重写展示效果设置,支持加载预处理提示等等,效果图如下:

    使用说明
    1,jQuery 1.3库文件
    2,colorbox 库文件
    3,灯箱效果CSS样式文件

    使用实例如下:
    一,使用ColorBox灯箱显示一张图片和图片组
    (1)js部分
    $.fn.colorbox.settings.transition = "fade";
    $.fn.colorbox.settings.bgOpacity = "0.9";
    $.fn.colorbox.settings.contentCurrent = "image {current} of {total}";
    $(".cpModal").colorbox();

    transition设置ColorBox灯箱的过渡效果,如上:fade
    bgOpacity设置ColorBox灯箱的背景透明度,如上:0.9
    contentCurrent设置ColorBox灯箱的当前图片,如上:image {current} of {total}

    (2)HTML部分
    <p><a class="cpModal" href="marylou.jpg" >单张图片</a></p>
    <p><a class="cpModal" href="biuuu1.jpg" >图片组1</a></p>
    <p><a class="cpModal" href="biuuu2.jpg" >图片组2</a></p>
    <p><a class="cpModal" href="biuuu3.jpg" >图片组3</a></p>

    二,使用ColorBox灯箱显示ajax加载HTML页面
    (1)js部分
    $("#ajax").colorbox({contentWidth:"300px", contentHeight:"195px"});

    contentWidth设置ColorBox灯箱的内容宽度,如上:300px
    contentHeight设置ColorBox灯箱的内容高度,如上:195px

    (2)HTML部分
    <p><a id="ajax" href="ajax.html">Ajax HTML</a></p>
    ajax.html表示加载的html页面,

    三,使用ColorBox灯箱显示flash页面效果
    (1)js部分
    $("#flash").colorbox({contentAjax:"flash.html"});

    (2)HTML部分

    <p><a id="flash" href="http://www.youtube.com/watch?v=lBvaHZIrt0">Flash / Video</a></p>
    四,使用ColorBox灯箱显示Inline HTML效果

    (1)js部分
    $("#inline").colorbox({contentWidth:"500px", contentInline:"#inline-content"});
    contentInline设置ColorBox灯箱的inline内容

    (2)HTML部分
    <p><a id="inline" href="#">Inline HTML</a></p>
    <div style="display:none">
    <div id="inline-content">
    <div style="padding:10px">
    <p>必优博客</p>
    <p>www.biuuu.com</p>
    </div>
    </div>
    </div>
    五,使用ColorBox灯箱显示Iframed框架内容效果
    (1)js部分
    $("#google").colorbox({contentWidth:"750px", contentHeight:"450px", contentIframe:true});

    contentIframe设置ColorBox灯箱的内容是否为框架

    (2)HTML部分
    <p><a id="google" href="http://www.google.com">Iframed内容</a></p>

    ColorBox灯箱配置如下:
    transition 'elastic' 表示灯箱过渡效果,可选"elastic" or "fade"
    transitionSpeed    350 表示灯箱过渡效果展示的速度
    initialWidth    300 表示灯箱初始化宽度
    initialHeight    100 表示灯箱初始化高度
    contentWidth    false 表示是否设置一个固定的宽度
    contentHeight    false 表示是否设置一个固定的高度
    contentAjax    false 表示是否是一个ajax加载
    contentInline    false 表示是否是一个inline
    contentIframe    false 表示是否是一个iframe
    bgOpacity 0.85 表示灯箱的背景透明度
    preloading    true 表示是否预加载
    contentCurrent    '{current} of {total}' 表示灯箱展示的当前图片和总数
    contentPrevious    'previous' 表示上一个锚,类似于rel属性
    contentNext    'next'    表示下一个锚,类似于rel属性
    modalClose    'close' 锚文本关闭链接,可选Esc或close

    jQuery插件ColorBox彩盒使用非常简单,可实现功能非常多,如弹出新窗口,弹出图片,弹出框架等等,值得推荐。

    介绍内容来自 http://www.biuuu.com/

    设置的值

     

    默认值

    transition

    "elastic"

    过渡效果,可以是"elastic", "fade", or "none".

    speed

    350

    设置过渡效果的持续时间,毫秒

    hreffalse

    Example:$('h1').colorbox({href:"welcome.html"})

    这个用来设置一个锚标记的值或者一个不是锚的元素,例如图像或者表单的按钮,例如:

    titlefalse

    这可以为Colorbox设置一个标题

    relfalse

    Example:$('#example a').colorbox({rel:'group1'})

    这个可以根据元素的rel属性设置要显示的元素集合,也可以覆盖一个存在的rel属性

    widthfalse

    Example: "100%", "500px", or 500

    设置宽度,包括边框和按钮

    heightfalse

     Example: "100%", "500px", or 500

    设置高度,包括边框和按钮

    innerWidthfalse

    Example: "50%", "500px", or 500

    这个可以设定一个固定的内大小,包括边框和按钮

    innerHeightfalse

    Example: "50%", "500px", or 500

    这个可以设定一个固定的内高度,包括边框和按钮

    initialWidth300

    设置初始化宽度

    initialHeight100

    设置初始化高度

    maxWidthfalse

     Example: "100%", 500, "500px"

    设置内容的最大宽度

    maxHeightfalse

    Example: "100%", 500, "500px"

    设置内容的最大高度

    scalePhotostrue

    如果是true且maxWidth, maxHeight, innerWidth, innerHeight, width, 或者 height 被设置,

    Colorbox会缩放图片以使用边框

    scrollingtrue

    如果是false,Colorbox不会为了溢出元素设置滚动条

    iframefalse

    如果是true,元素会在Iframe中显示

     

     

    介绍

    inlinefalse

    Example: $("#inline").colorbox({inline:true, href:"#myForm"});

    如果是true,jQuery选择器可以用来选择要显示的元素。例如:

    htmlfalse

    Example: 
    $.fn.colorbox({html:'

    Hello

    '});

    这个是直接让你显示HTML代码,例

    photofalse

    如果为true,ColorBox只会把元素按照图片显示,防止类似photo.php?pic=1这样的连接被误认为是网页

    opacity0.85

    遮罩层不透明度 从0-1之间取值

    openfalse

    如果为true,ColorBox会自动开启

    preloadingtrue

    如果为True,ColorBox会自动预载要显示图片

    overlayClosetrue

    为true单击遮罩层就可以把ColorBox关闭

    slideshowfalse

    为True,会自动滚动图片

    slideshowSpeed2500

    设置时间,毫秒

    slideshowAutotrue

    为tuue,滑动会自动开始

    slideshowStart"start slideshow"

    开始自动滑动按钮的文本

    slideshowStop"stop slideshow"

    停止自动滑动按钮的文本

    current"{current} of {total}"

    文本内容:现在正在显示的元素序号

    previous"previous"

    “上一个”按钮的文本

    next"next"

    “下一个”按钮的文本

    close"close"

    “关闭”按钮的文本

  • 相关阅读:
    栈和堆的区别【转】
    C++虚函数表解析(转)
    C++编码规范(转)
    全局变量的声明和定义 以及dll中全局变量的导出
    Sizeof与Strlen的区别与联系.
    利用事件对象实现线程同步
    创建互斥对象同步线程
    MFC GDI笔记 转
    ClientToScreen( )和ScreenToClient( )
    Visual C++线程同步技术剖析
  • 原文地址:https://www.cnblogs.com/zhiji6/p/2489555.html
Copyright © 2011-2022 走看看