美文网首页我爱编程
colorbox 弹出层 jquery

colorbox 弹出层 jquery

作者: Yumazhiyao | 来源:发表于2017-09-21 09:52 被阅读248次

    colorbox 弹出层 jquery

    $(".inline").colorbox({inline:true, width:"50%"});<p><a class='inline' href="#inline_content">Inline HTML</a></p><div style='display:none'><div id='inline_content' style='padding:10px; background:#fff;'><p><strong>This content comes from a hidden element on this page.</strong></p><p>The inline option preserves bound JavaScript events and changes, and it puts the content back where it came from when it is closed.</p></div></div>

    在上面的代码中,每种使用方式都有说明,从代码中可以看出, colorbox 使用起来是非常的简单。
    colorbox 还提供了很多的属性、方法和事件,可以让我们更加方式的就用 colorbox,下面是一个从网上找的一个中文的参考列表:
    KEY
    设置的值

    DEFAULT
    默认值

    DESCRIPTION
    介绍

    transition

    “elastic”

    The transition type. Can be set to “elastic”, “fade”, or “none”.
    过渡效果,可以是”elastic”, “fade”, or “none”.

    speed

    350

    Sets the speed of the fade and elastic transitions, in milliseconds.
    设置过渡效果的持续时间,毫秒

    href

    false

    This can be used as an alternative anchor URL or to associate a URL for non-anchor elements such as images or form buttons. Example:
    $(‘h1′).colorbox({href:”welcome.html”})
    这个用来设置一个锚标记的值或者一个不是锚的元素,例如图像或者表单的按钮,例如:

    title

    false

    This can be used as an anchor title alternative for ColorBox.
    这可以为Colorbox设置一个标题

    rel

    false

    This can be used as an anchor rel alternative for ColorBox. This allows the user to group any combination of elements together for a gallery, or to override an existing rel so elements are not grouped together. Example:
    $(‘#example a’).colorbox({rel:’group1′})
    这个可以根据元素的rel属性设置要显示的元素集合,也可以覆盖一个存在的rel属性

    width

    false

    Set a fixed total width. This includes borders and buttons. Example: “100%”, “500px”, or 500
    设置宽度,包括边框和按钮

    height

    false

    Set a fixed total height. This includes borders and buttons. Example: “100%”, “500px”, or 500
    设置高度,包括边框和按钮

    innerWidth

    false

    This is an alternative to ‘width’ used to set a fixed inner width. This excludes borders and buttons. Example: “50%”, “500px”, or 500
    这个可以设定一个固定的内大小,包括边框和按钮

    innerHeight

    false

    This is an alternative to ‘height’ used to set a fixed inner height. This excludes borders and buttons. Example: “50%”, “500px”, or 500
    这个可以设定一个固定的内高度,包括边框和按钮

    initialWidth

    300

    Set the initial width, prior to any content being loaded.
    设置初始化宽度

    initialHeight

    100

    Set the initial height, prior to any content being loaded.
    设置初始化高度

    maxWidth

    false

    Set a maximum width for loaded content. Example: “100%”, 500, “500px”
    设置内容的最大宽度

    maxHeight

    false

    Set a maximum height for loaded content. Example: “100%”, 500, “500px”
    设置内容的最大高度

    scalePhotos

    true

    If ‘true’ and if maxWidth, maxHeight, innerWidth, innerHeight, width, or height have been defined, ColorBox will scale photos to fit within the those values.
    如果是true且maxWidth, maxHeight, innerWidth, innerHeight, width, 或者 height 被设置,Colorbox会缩放图片以使用边框

    scrolling

    true

    If ‘false’ ColorBox will hide scrollbars for overflowing content. This could be used on conjunction with the resize method (see below) for a smoother transition if you are appending content to an already open instance of ColorBox.
    如果是false,Colorbox不会为了溢出元素设置滚动条

    iframe

    false

    If ‘true’ specifies that content should be displayed in an iFrame.
    如果是true,元素会在Iframe中显示

    inline

    false

    If ‘true’ a jQuery selector can be used to display content from the current page. Example:
    $(“#inline”).colorbox({inline:true, href:”#myForm”});
    如果是true,jquery选择器可以用来选择要显示的元素。例如:

    html

    false

    This allows an HTML string to be used directly instead of pulling content from another source (ajax, inline, or iframe). Example:
    $.fn.colorbox({html:’<p>Hello</p>’});
    这个是直接让你显示HTML代码,例如:

    photo

    false

    If true, this setting forces ColorBox to display a link as a photo. Use this when automatic photo detection fails (such as using a url like ‘photo.PHP’ instead of ‘photo.jpg’, ‘photo.jpg#1′, or ‘photo.jpg?pic=1′)
    如果为true,ColorBox只会把元素按照图片显示,防止类似photo.php?pic=1这样的连接被误认为是网页

    opacity

    0.85

    The overlay opacity level. Range: 0 to 1.
    遮罩层不透明度 从0-1之间取值

    open

    false

    If true, the lightbox will automatically open with no input from the visitor.
    如果为true,ColorBox会自动开启

    preloading

    true

    Allows for preloading of ‘Next’ and ‘Previous’ content in a shared relation group (same values for the ‘rel’ attribute), after the current content has finished loading. Set to ‘false’ to disable.
    如果为True,ColorBox会自动预载要显示图片

    overlayClose

    true

    If true, enables closing ColorBox by clicking on the background overlay.
    为true单击遮罩层就可以把ColorBox关闭

    slideshow

    false

    If true, adds an automatic slideshow to a content group / gallery.
    为True,会自动滚动图片

    slideshowSpeed

    2500

    Sets the speed of the slideshow, in milliseconds.
    设置时间,毫秒

    slideshowAuto

    true

    If true, the slideshow will automatically start to play.
    为tuue,滑动会自动开始

    slideshowStart

    “start slideshow”

    Text for the slideshow start button.
    开始自动滑动按钮的文本

    slideshowStop

    “stop slideshow”

    Text for the slideshow stop button
    停止自动滑动按钮的文本

    current

    “{current} of {total}”

    Text format for the content group / gallery count. {current} and {total} are detected and replaced with actual numbers while ColorBox runs.
    文本内容:现在正在显示的元素序号,格式”{现在} of {总计}”

    previous

    “previous”

    Text for the previous button in a shared relation group (same values for ‘rel’ attribute).
    “上一个”按钮的文本

    next

    “next”

    Text for the next button in a shared relation group (same values for ‘rel’ attribute).
    “下一个”按钮的文本

    close

    “close”

    Text for the close button. The ‘Esc’ key will also close ColorBox.
    “关闭”按钮的文本

    onOpen

    false

    Callback that fires right before ColorBox begins to open.
    下面几个都是在XXX时候要执行的函数,不用多说,一看就会

    onLoad

    false

    Callback that fires right before attempting to load the target content.

    onComplete

    false

    Callback that fires right after loaded content is displayed.

    onCleanup

    false

    Callback that fires at the start of the close process.

    onClosed

    false

    Callback that fires once ColorBox is closed.

    上面列表转载自:http://hi.baidu.com/234000/

    (原创)关于一款优秀的Jquery插件-Colorbox的官方用法翻译
    2010年01月17日 星期日 11:13
    原创文章,如果您需要转载,请您注明来源来自 http://hi.baidu.com/234000/ 谢谢!
    Colorbox:http://colorpowered.com/colorbox/
    Colorbox是一个能在你的浏览器窗口中创建一个模态对话框的程序。。。也就是类似大家经常看到的那种遮罩层+提示框的样子。当然,你也可以让遮罩层不显示的。
    在以前,用于Jquery的类似插件应该毫无疑问是Thickbox。不过前一阵子去Jquery Plugins看的时候发现Thickbox已经停止了更新,且Jquery官方推荐了几个Thickbox的替代品,我最终选择了Colorbox,因为它十分的简单易用和强大。
    以下是Colorbox的官方介绍翻译,希望对大家有所帮助。
    ——————————————————————————————————————————
    Colorbox
    Jquery的一个轻量的,可自定义的 lightbox 插件。
    为什么选择Colorbox?
    Supports photos, photo groups, slideshow, ajax, inline, and iframed content.
    支持图片,图片组,图片滑动观看,ajax,行内元素和iframe内容

    · Lightweight: less than 9KB of javascript.
    · 十分轻量,只有不到9KB大小
    · Appearance is controlled through CSS so users can restyle the box.
    · 外观可以通过CSS进行控制
    · Behavior settings can be over-written without altering the ColorBox javascript file.
    · 可以直接覆盖ColorBox的行为设置而不用改ColorBox的js文件
    · Can be extended with callbacks & event-hooks without altering the source files.
    · 可以直接加上回调函数和事件钩子而不用更改它的源代码
    · Completely unobtrusive, options are set in the JS and require no changes to existing HTML.
    · 非入侵式操作,选项可以在JS中设置而不用更改HTML
    · Preloads background images and can preload upcoming images in a photo group.
    · 可以预载背景图片和图片组中的图片
    · Written in jQuery plugin format and can be chained with other jQuery commands.
    · 用Jquery插件格式编写,可以使用链式操作
    · Generates W3C valid XHTML and adds no JS global variables & passes JSLint.
    · 语法通过W3C和XHTML认证,没有添加JS的全局变量
    · Released under the MIT License.
    · 在 MIT License下发布
    Tested In: Firefox 2 & 3, Safari 3 & 4, Opera 9, Chrome, Internet Explorer 6, 7, 8.
    在Firefox 2 & 3, Safari 3 & 4, Opera 9, Chrome, Internet Explorer 6, 7, 8.下运行良好
    Instructions
    介绍
    The colorbox() function takes a key/value object and an optional callback.
    colorbox()函数使用一堆key/value对象和一个可选的callback函数
    Format: $('selector').colorbox({key:value}, callback);
    格式?:$('selector').colorbox({key:value}, callback);
    Example: $('a.gallery').colorbox({transition:'fade', speed:500});
    例子: $('a.gallery').colorbox({transition:'fade', speed:500});
    Example: $('button').colorbox({href:"thankyou.html"});
    还是例子:$('button').colorbox({href:"thankyou.html"});
    Follow the source code on the demonstration pages for plenty of examples.
    在Colorbox的演示页面还有很多例子
    Key
    设置的值

    Default
    默认值

    Description
    介绍

    transition

    "elastic"

    The transition type. Can be set to "elastic", "fade", or "none".
    过渡效果,可以是"elastic", "fade", or "none".

    speed

    350

    Sets the speed of the fade and elastic transitions, in milliseconds.
    设置过渡效果的持续时间,毫秒

    href

    false

    This can be used as an alternative anchor URL or to associate a URL for non-anchor elements such as images or form buttons. Example:$('h1').colorbox({href:"welcome.html"})
    这个用来设置一个锚标记的值或者一个不是锚的元素,例如图像或者表单的按钮,例如:

    title

    false

    This can be used as an anchor title alternative for ColorBox.
    这可以为Colorbox设置一个标题

    rel

    false

    This can be used as an anchor rel alternative for ColorBox. This allows the user to group any combination of elements together for a gallery, or to override an existing rel so elements are not grouped together. Example:$('#example a').colorbox({rel:'group1'})
    这个可以根据元素的rel属性设置要显示的元素集合,也可以覆盖一个存在的rel属性

    width

    false

    Set a fixed total width. This includes borders and buttons. Example: "100%", "500px", or 500
    设置宽度,包括边框和按钮

    height

    false

    Set a fixed total height. This includes borders and buttons. Example: "100%", "500px", or 500
    设置高度,包括边框和按钮

    innerWidth

    false

    This is an alternative to 'width' used to set a fixed inner width. This excludes borders and buttons. Example: "50%", "500px", or 500
    这个可以设定一个固定的内大小,包括边框和按钮

    innerHeight

    false

    This is an alternative to 'height' used to set a fixed inner height. This excludes borders and buttons. Example: "50%", "500px", or 500
    这个可以设定一个固定的内高度,包括边框和按钮

    initialWidth

    300

    Set the initial width, prior to any content being loaded.
    设置初始化宽度

    initialHeight

    100

    Set the initial height, prior to any content being loaded.
    设置初始化高度

    maxWidth

    false

    Set a maximum width for loaded content. Example: "100%", 500, "500px"
    设置内容的最大宽度

    maxHeight

    false

    Set a maximum height for loaded content. Example: "100%", 500, "500px"
    设置内容的最大高度

    scalePhotos

    true

    If 'true' and if maxWidth, maxHeight, innerWidth, innerHeight, width, or height have been defined, ColorBox will scale photos to fit within the those values.
    如果是true且maxWidth, maxHeight, innerWidth, innerHeight, width, 或者 height 被设置,Colorbox会缩放图片以使用边框

    scrolling

    true

    If 'false' ColorBox will hide scrollbars for overflowing content. This could be used on conjunction with the resize method (see below) for a smoother transition if you are appending content to an already open instance of ColorBox.
    如果是false,Colorbox不会为了溢出元素设置滚动条

    iframe

    false

    If 'true' specifies that content should be displayed in an iFrame.
    如果是true,元素会在Iframe中显示

    inline

    false

    If 'true' a jQuery selector can be used to display content from the current page. Example: $("#inline").colorbox({inline:true, href:"#myForm"});
    如果是true,jQuery选择器可以用来选择要显示的元素。例如:

    html

    false

    This allows an HTML string to be used directly instead of pulling content from another source (ajax, inline, or iframe). Example: $.fn.colorbox({html:'<p>Hello</p>'});
    这个是直接让你显示HTML代码,例如:

    photo

    false

    If true, this setting forces ColorBox to display a link as a photo. Use this when automatic photo detection fails (such as using a url like 'photo.php' instead of 'photo.jpg', 'photo.jpg#1', or 'photo.jpg?pic=1')
    如果为true,ColorBox只会把元素按照图片显示,防止类似photo.php?pic=1这样的连接被误认为是网页

    opacity

    0.85

    The overlay opacity level. Range: 0 to 1.
    遮罩层不透明度 从0-1之间取值

    open

    false

    If true, the lightbox will automatically open with no input from the visitor.
    如果为true,ColorBox会自动开启

    preloading

    true

    Allows for preloading of 'Next' and 'Previous' content in a shared relation group (same values for the 'rel' attribute), after the current content has finished loading. Set to 'false' to disable.
    如果为True,ColorBox会自动预载要显示图片

    overlayClose

    true

    If true, enables closing ColorBox by clicking on the background overlay.
    为true单击遮罩层就可以把ColorBox关闭

    slideshow

    false

    If true, adds an automatic slideshow to a content group / gallery.
    为True,会自动滚动图片

    slideshowSpeed

    2500

    Sets the speed of the slideshow, in milliseconds.
    设置时间,毫秒

    slideshowAuto

    true

    If true, the slideshow will automatically start to play.
    为tuue,滑动会自动开始

    slideshowStart

    "start slideshow"

    Text for the slideshow start button.
    开始自动滑动按钮的文本

    slideshowStop

    "stop slideshow"

    Text for the slideshow stop button
    停止自动滑动按钮的文本

    current

    "{current} of {total}"

    Text format for the content group / gallery count. {current} and {total} are detected and replaced with actual numbers while ColorBox runs.
    文本内容:现在正在显示的元素序号,格式"{现在} of {总计}"

    previous

    "previous"

    Text for the previous button in a shared relation group (same values for 'rel' attribute).
    “上一个”按钮的文本

    next

    "next"

    Text for the next button in a shared relation group (same values for 'rel' attribute).
    “下一个”按钮的文本

    close

    "close"

    Text for the close button. The 'Esc' key will also close ColorBox.
    “关闭”按钮的文本

    onOpen

    false

    Callback that fires right before ColorBox begins to open.
    下面几个都是在XXX时候要执行的函数,不用多说,一看就会

    onLoad

    false

    Callback that fires right before attempting to load the target content.

    onComplete

    false

    Callback that fires right after loaded content is displayed.

    onCleanup

    false

    Callback that fires at the start of the close process.

    onClosed

    false

    Callback that fires once ColorBox is closed.

    下面几个方法由于时间问题没能来得及翻译,有空一定为大家补上
    Public Methods
    $.fn.colorbox()This method allows you to call ColorBox without having to assign it to an element. Returns 'this' (document). Example: $.fn.colorbox({href:'login.php', open:true});
    $.fn.colorbox.next() & $.fn.colorbox.prev()These methods moves to the next and previous items in a gallery and are the same as pressing the 'next' or 'previous' buttons. Returns nothing.
    $.fn.colorbox.close()This method initiates the close sequence, which does not immediately complete. The lightbox will be completely closed only when the 'cbox_closed' event is fired. Returns nothing.
    $.fn.colorbox.element()This method is used to fetch the current HTML element that ColorBox is associated with. Returns a DOM element. Example: var that = $.fn.colorbox.element();
    $.fn.colorbox.resize()This allows ColorBox to auto-resize it's height if it's content is altered. This must be called manually after the content has been updated. Set 'scrollbars' to false to prevent them from being displayed during the resize animation.
    $.fn.colorbox.init()This runs silently when the DOM is first loaded and is used to initialize the lightbox (adds necessary HTML to the DOM, preloads the interface graphics, initializes variables, etc). If ColorBox were completely removed from the DOM, to load in a new stylesheet for example, this would be needed to re-initialize it.

    相关文章

      网友评论

        本文标题:colorbox 弹出层 jquery

        本文链接:https://www.haomeiwen.com/subject/taptrxtx.html