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

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

作者: IT小兵 | 2013年10月10日| 热度:℃ | 评论: |参与:

今天推荐大家一个jquery的实用弹出框插件-Colorbox 。

用过,也参考过好多弹出框插件,比如:LightBox/LightBox2/easyDialog等。

发现Colorbox 还是简单实用是最大的特色。LightBox2就是很炫了,用在web网站还是可以的,比如

我网站上使用的是LightBox2。easyDialog的样式略显简单。

闲话少说。

Colorbox 官方地址: http://www.jacklmoore.com/colorbox/

遵守 MIT 协议.源代码在 Github.

支持一下浏览器:jQuery 1.3.2+ in Firefox, Safari, Chrome, Opera, Internet Explorer 7+

使用说明:

官方下载js包后,在你的页面引用:jquery.colorbox.js,或者jquery.colorbox.min.js。

<script src="../../js/jquery-1.7.2.min.js"></script>
<script src="../../js/jquery.colorbox.js"></script>

引用使用的时候,代码格式如下:

$(selector).colorbox({key:value, key:value, key:value});

例子:

// 图片组展示
$('a.gallery').colorbox({rel:'gal'});
// Ajax调用
$('a#login').colorbox();
// 调用页面
$.colorbox({href:"thankyou.html"});
// 直接用html串调用
$.colorbox({html:"<h1>Welcome</h1>"});
// 弹出内容由一个函数function组织的html:
$("a.gallery").colorbox({rel: 'gal', title: function(){
  var url = $(this).attr('href');
  return '<a href="' + url + '" target="_blank">Open In New Window</a>';}});

支持的事件有:onClosed、onOpen、onLoad、onComplete、onCleanup;

参数说明:

PropertyDefaultDescription
transition"elastic"The transition type. Can be set to "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. $("h1").colorbox({href:"welcome.html"});
titlefalseThis can be used as an anchor title alternative for 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. $("a.gallery").colorbox({rel:"group1"}); Note: The value can also be set to 'nofollow' to disable grouping.
scalePhotostrueIf true, and if maxWidth, maxHeight, innerWidth, innerHeight, width, or height have been defined, Colorbox will scale photos to fit within the those values.
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.
opacity0.85The overlay opacity level. Range: 0 to 1.
openfalseIf true, Colorbox will immediately open.
returnFocustrueIf true, focus will be returned when Colorbox exits to the element it was launched from.
trapFocustrueIf true, keyboard focus will be limited to Colorbox's navigation and content.
fastIframetrueIf false, the loading graphic removal and onComplete event will be delayed until iframe's content has completely loaded.
preloadingtrueAllows for preloading of 'Next' and 'Previous' content in a group, after the current content has finished loading. Set to false to disable.
overlayClosetrueIf false, disables closing Colorbox by clicking on the background overlay.
escKeytrueIf false, will disable closing colorbox on 'esc' key press.
arrowKeytrueIf false, will disable the left and right arrow keys from navigating between the items in a group.
looptrueIf false, will disable the ability to loop back to the beginning of the group when on the last element.
datafalseFor submitting GET or POST values through an ajax request. The data property will act exactly like jQuery's .load() data argument, as Colorbox uses .load() for ajax handling.
classNamefalseAdds a given class to colorbox and the overlay.
fadeOut300Sets the fadeOut speed, in milliseconds, when closing Colorbox.
closeButtontrueSet to false to remove the close button.
Internationalization

current"image {current} of {total}"Text or HTML for the group counter while viewing a group. {current} and {total} are detected and replaced with actual numbers while Colorbox runs.
previous"previous"Text or HTML for the previous button while viewing a group.
next"next"Text or HTML for the next button while viewing a group.
close"close"Text or HTML for the close button. The 'esc' key will also close Colorbox.
xhrError"This content failed to load."Error message given when ajax content for a given URL cannot be loaded.
imgError"This image failed to load."Error message given when a link to an image fails to load.
Content Type

iframefalseIf true, specifies that content should be displayed in an iFrame.
inlinefalse

If true, content from the current document can be displayed by passing the href property a jQuery selector, or jQuery object.

// Using a selector:
$("#inline").colorbox({inline:true, href:"#myForm"});
// Using a jQuery object:
var $form = $("#myForm");
$("#inline").colorbox({inline:true, href:$form});
htmlfalseFor displaying a string of HTML or text: $.colorbox({html:"<p>Hello</p>"});
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')
ajax
This property isn't actually used as Colorbox assumes all hrefs should be treated as either ajax or photos, unless one of the other content types were specified.
Dimensions

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"
Slideshow

slideshowfalseIf true, adds an automatic slideshow to a content group / gallery.
slideshowSpeed2500Sets the speed of the slideshow, in milliseconds.
slideshowAutotrueIf true, the slideshow will automatically start to play.
slideshowStart"start slideshow"Text for the slideshow start button.
slideshowStop"stop slideshow"Text for the slideshow stop button
Positioning

fixedfalseIf true, Colorbox will be displayed in a fixed position within the visitor's viewport. This is unlike the default absolute positioning relative to the document.
topfalseAccepts a pixel or percent value (50, "50px", "10%"). Controls Colorbox's vertical positioning instead of using the default position of being centered in the viewport.
bottomfalseAccepts a pixel or percent value (50, "50px", "10%"). Controls Colorbox's vertical positioning instead of using the default position of being centered in the viewport.
leftfalseAccepts a pixel or percent value (50, "50px", "10%"). Controls Colorbox's horizontal positioning instead of using the default position of being centered in the viewport.
rightfalseAccepts a pixel or percent value (50, "50px", "10%"). Controls Colorbox's horizontal positioning instead of using the default position of being centered in the viewport.
repositiontrueRepositions Colorbox if the window's resize event is fired.
Retina Images

retinaImagefalseIf true, Colorbox will scale down the current photo to match the screen's pixel ratio
retinaUrlfalseIf true and the device has a high resolution display, Colorbox will replace the current photo's file extention with the retinaSuffix+extension
retinaSuffix"@2x.$1"If retinaUrl is true and the device has a high resolution display, the href value will have it's extention extended with this suffix. For example, the default value would change `my-photo.jpg` to `my-photo@2x.jpg`
Callbacks

onOpenfalseCallback that fires right before Colorbox begins to open.
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.

更多参数和方法,请参考官方网站。

转发注明:IT分享  http://www.suchso.com 

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

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

给您更多信息和帮助

在这里您可以找到更多:

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

投稿:suchso@vip.qq.com

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

抢天猫双11红包
推荐使用阿里云服务器
echarts教程系列
本月最热文章

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

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:suchso@vip.qq.com

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