当前位置:  软件>JavaScript软件

jQuery的弹出窗口 ColorBox

    来源:    发布时间:2015-02-08

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

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

jQuery的弹出窗口 ColorBox[图片]

在线演示:http://runjs.cn/detail/hjor2zox

使用说明
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 href="marylou.jpg" >单张图片</a></p>
<p><a href="biuuu1.jpg" >图片组1</a></p>
<p><a href="biuuu2.jpg" >图片组2</a></p>
<p><a 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 >
<div id="inline-content">
<div >
<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/


    
 
 

您可能感兴趣的文章:

  • jquery弹窗插件colorbox绑定动态生成元素的方法
  • jQuery的弹出窗口 ColorBox
  • 通过javascript库JQuery实现页面跳转功能代码
  • jQuery鼠标动画插件 jquery-ahover
  • jQuery概述,代码举例及最新版下载
  • jQuery向导插件 Jquery Wizard Plugin
  • Jquery操作html复选框checkbox:全选,全不选和反选
  • jQuery圆角插件 jQuery Corners
  • struts+spring+hibernate+jquery实现分页功能的几个基本类介绍(异步加载)
  • jQuery相册插件 jQuery.popeye
  • jQuery UI组件 jQuery UI
  • jQuery右键菜单插件 jQuery ContextMenu
  • jQuery分页插件 Pagination jQuery Plugin
  • jQuery日历插件 jQuery Week Calendar
  • jQuery的中文日历插件 jQuery.datePickerCn
  • jQuery实现CSS3动画效果的插件 jQuery Transit
  • jQuery的CSV插件 jQuery CSV
  • jQuery的气泡提示插件 jquery.ns_bub.js
  • jQuery气泡提示插件 jquery-rollover-tooltip
  • jQuery对话框 jQuery Modal Dialog
  • jQuery 插件 jQuery Ripples
  • 精简版的jQuery jQuery.ish
  • jQuery的OpenSocial插件 OpenSocial jQuery
  •  
    本站(WWW.169IT.COM)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.169IT.COM)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • jQuery进度条插件 jQuery Progression
  • jQuery 对话框插件 Dialog jQuery Plugin
  • jQuery滚动效果插件 jQuery.SerialScroll
  • jQuery电子表格插件 jQuery.sheet
  • jQuery无限幻灯片插件 jQuery Carousel
  • jQuery日期选择插件 jQuery UI Datepicker
  • jQuery分页插件 jQuery Pagination
  • jQuery表单验证插件 jQuery.validity
  • jQuery条形码插件 jQuery Barcode
  • jQuery 星级评分插件 jQuery Raty
  • jQuery 内容滑动插件 Basic jQuery Slider
  • jQuery多值输入插件 jQuery Manifest
  • jQuery动态背景插件 jQuery.spritely
  • jQuery自动完成插件 jQuery.autocomplete
  • jQuery 计时器插件 jQuery Timer
  • jQuery 滚动插件 jQuery GoUp!
  • jQuery滚动插件 jQuery Totem
  • jQuery 图像展示插件 Jquery Threesixty
  • jQuery上下文菜单插件 jquery-simple-context-menu
  • jQuery的幻灯插件 jQuery Sequence


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2017,169IT.COM,E-mail:www_169it_com#163.com(请将#改为@)

    浙ICP备11055608号