Colorbox的官方用法翻译.doc

在上面的代码中，每种使用方式都有说明，从代码中可以看出， colorbox 使用起来是非常的简单。colorbox 还提供了很多的属性、方法和事件，可以让我们更加方式的就用 colorbox，下面是一个从网上找的一个中文的参考列表：KEY设置的值DEFAULT默认值DESCRIPTION介绍transition“elastic”The transition type. Can be set to “elastic”, “fade”, or “none”.过渡效果，可以是”elastic”, “fade”, or “none”.speed350Sets the speed of the fade and elastic transitions, in milliseconds.设置过渡效果的持续时间，毫秒hreffalseThis 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”)这个用来设置一个锚标记的值或者一个不是锚的元素，例如图像或者表单的按钮，例如：titlefalseThis can be used as an anchor title alternative for ColorBox.这可以为Colorbox设置一个标题relfalseThis 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属性widthfalseSet a fixed total width. This includes borders and buttons. Example: “100%”, “500px”, or 500设置宽度，包括边框和按钮heightfalseSet a fixed total height. This includes borders and buttons. Example: “100%”, “500px”, or 500设置高度，包括边框和按钮innerWidthfalseThis is an alternative to width used to set a fixed inner width. This excludes borders and buttons. Example: “50%”, “500px”, or 500这个可以设定一个固定的内大小，包括边框和按钮innerHeightfalseThis is an alternative to height used to set a fixed inner height. This excludes borders and buttons. Example: “50%”, “500px”, or 500这个可以设定一个固定的内高度，包括边框和按钮initialWidth300Set the initial width, prior to any content being loaded.设置初始化宽度initialHeight100Set the initial height, prior to any content being loaded.设置初始化高度maxWidthfalseSet a maximum width for loaded content. Example: “100%”, 500, “500px”设置内容的最大宽度maxHeightfalseSet a maximum height for loaded content. Example: “100%”, 500, “500px”设置内容的最大高度scalePhotostrueIf 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会缩放图片以使用边框scrollingtrueIf 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不会为了溢出元素设置滚动条iframefalseIf true specifies that content should be displayed in an iFrame.如果是true，元素会在Iframe中显示inlinefalseIf true a jQuery selector can be used to display content from the current page. Example:$(“#inline”).colorbox(inline:true, href:”#myForm”);如果是true,jQuery选择器可以用来选择要显示的元素。例如：htmlfalseThis allows an HTML string to be used directly instead of pulling content from another source (ajax, inline, or iframe). Example:$.fn.colorbox(html:Hello);这个是直接让你显示HTML代码，例如：photofalseIf 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这样的连接被误认为是网页opacity0.85The overlay opacity level. Range: 0 to 1.遮罩层不透明度 从0-1之间取值openfalseIf true, the lightbox will automatically open with no input from the visitor.如果为true,ColorBox会自动开启preloadingtrueAllows 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会自动预载要显示图片overlayClosetrueIf true, enables closing ColorBox by clicking on the background overlay.为true单击遮罩层就可以把ColorBox关闭slideshowfalseIf true, adds an automatic slideshow to a content group / gallery.为True，会自动滚动图片slideshowSpeed2500Sets the speed of the slideshow, in milliseconds.设置时间，毫秒slideshowAutotrueIf 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.“关闭”按钮的文本onOpenfalseCallback that fires right before ColorBox begins to open.下面几个都是在XXX时候要执行的函数，不用多说，一看就会onLoadfalseCallback that fires right before attempting to load the target content.onCompletefalseCallback that fires right after loaded content is displayed.onCleanupfalseCallback that fires at the start of the close process.onClosedfalseCallback that fires once ColorBox is closed.上面列表转载自：/234000/（原创）关于一款优秀的Jquery插件-Colorbox的官方用法翻译2010年01月17日 星期日 11:13原创文章，如果您需要转载，请您注明来源来自/234000/谢谢！Colorbox:/colorbox/Colorbox是一个能在你的浏览器窗口中创建一个模态对话框的程序。也就是类似大家经常看到的那种遮罩层+提示框的样子。当然，你也可以让遮罩层不显示的。在以前，用于Jquery的类似插件应该毫无疑问是Thickbox。不过前一阵子去Jquery Plugins看的时候发现Thickbox已经停止了更新，且Jquery官方推荐了几个Thickbox的替代品，我最终选择了Colorbox，因为它十分的简单易用和强大。以下是Colorbox的官方介绍翻译，希望对大家有所帮助。ColorboxJquery的一个轻量的，可自定义的 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 theMIT 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介绍transitionelasticThe transition type. Can be set to elastic, fade, or none.过渡效果，可以是elastic, fade, or none.speed350Sets the speed of the fade and elastic transitions, in milliseconds.设置过渡效果的持续时间，毫秒hreffalseThis 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)这个用来设置一个锚标记的值或者一个不是锚的元素，例如图像或者表单的按钮，例如：titlefalseThis can be used as an anchor title alternative for ColorBox.这可以为Colorbox设置一个标题relfalseThis 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属性widthfalseSet a fixed total width. This includes borders and buttons. Example: 100%, 500px, or 500设置宽度，包括边框和按钮heightfalseSet a fixed total height. This includes borders and buttons. Example: 100%, 500px, or 500设置高度，包括边框和按钮innerWidthfalseThis is an alternative to width used to set a fixed inner width. This excludes borders and buttons. Example: 50%, 500px, or 500这个可以设定一个固定的内大小，包括边框和按钮innerHeightfalseThis is an alternative to height used to set a fixed inner height. This excludes borders and buttons. Example: 50%, 500px, or 500这个可以设定一个固定的内高度，包括边框和按钮initialWidth300Set the initial width, prior to any content being loaded.设置初始化宽度initialHeight100Set the initial height, prior to any content being loaded.设置初始化高度maxWidthfalseSet a maximum width for loaded content. Example: 100%, 500, 500px设置内容的最大宽度maxHeightfalseSet a maximum height for loaded content. Example: 100%, 500, 500px设置内容的最大高度scalePhotostrueIf 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会缩放图片以使用边框scrollingtrueIf 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不会为了溢出元素设置滚动条iframefalseIf true specifies that content should be displayed in an iFrame.如果是true，元素会在Iframe中显示inlinefalseIf true a jQuery selector can be used to display content from the current page. Example:$(#inline).colorbox(inline:true, href:#myForm);如果是true,jQuery选择器可以用来选择要显示的元素。例如：htmlfalseThis allows an HTML string to be used directly instead of pulling content from another source (ajax, inline, or iframe). Example:$.fn.colorbox(html:Hello);这个是直接让你显示HTML代码，例如：photofalseIf 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这样的连接被误认为是网页opacity0.85The overlay opacity level. Range: 0 to 1.遮罩层不透明度 从0-1之间取值openfalseIf true, the lightbox will automatically open with no input from the visitor.如果为true,ColorBox会自动开启preloadingtrueAllows 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会自动预载要显示图片overlayClosetrueIf true, enables closing ColorBox by clicking on the background overlay.为true单击遮罩层就可以把ColorBox关闭slideshowfalseIf true, adds an automatic slideshow to a content group / gallery.为True，会自动滚动图片slideshowSpeed2500Sets the speed of the slideshow, in milliseconds.设置时间，毫秒slideshowAutotrueIf true, the slideshow will automatically start to play.为tuue，滑动会自动开始slideshowStartstart slideshowText for the slideshow start button.开始自动滑动按钮的文本slideshowStopstop slideshowText for the slideshow stop button停止自动滑动按钮的文本currentcurrent of totalText format for the content group / gallery count. current and total are detected and replaced with actual numbers while ColorBox runs.文本内容：现在正在显示的元素序号，格式现在 of 总计previouspreviousText for the previous button in a shared relation group (same values for rel attribute).“上一个”按钮的文本nextnextText for the next button in a shared relation group (same values for rel attribute).“下一个”按钮的文本closecloseText for the close button. The Esc key will also close ColorBox.“关闭”按钮的文本onOpenfalseCallback that fires right before ColorBox begins to open.下面几个都是在XXX时候要执行的函数，不用多说，一看就会onLoadfalseCallback that fires right before attempting to load the target content.onCompletefalseCallback that fires right after loaded content is displayed.onCleanupfalseCallback that fires at the start of the close process.onClosedfalseCallback that fires once ColorBox is closed.下面几个方法由于时间问题没能来得及翻译，有空一定为大家补上Public Metho