- 浏览: 50750 次
- 性别:
- 来自: 南京
最新评论
-
wuyizhong:
夏末忆逝 写道不兼容其他浏览器 忘记加上了,只在IE下试过。
完整的JSP实现打印预览、打印设置等功能demo -
夏末忆逝:
不兼容其他浏览器
完整的JSP实现打印预览、打印设置等功能demo
使用实例如下:
一,使用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/
发表评论
-
正则表达式 整数
2013-12-01 09:52 799^[1-9]\d*$ //匹配正 ... -
select 循环 attribute id does not accept any expressions
2013-12-01 09:52 833居然这样只写 解决了 <select name=&q ... -
DBeaver (mark一把)
2012-07-03 09:57 1132DBeaver 1.6 开源版本发布。开源许可为GPL(作者说 ... -
java中获取当前系统时间,日期并格式化输出
2012-07-03 09:57 1072一. 获取当前系统时间和日期并格式化输出: import j ... -
android EditText中inputType的属性列表
2012-07-03 09:57 1282android 1.5以后添加了软件虚拟键盘的功能,所以 ... -
Struts2单选按钮标签s:radio的使用及其设置默认值
2012-04-24 13:59 3616首先在页面中引入struts标签库: <%@ t ... -
java环境变量配置
2012-04-20 13:25 809JAVA_HOME指明JDK安装路径,就是刚才安装时所选择的路 ... -
java caused by:java.sql.SQLException
2010-07-07 13:02 1584java.sql.SQLException: ORA- ... -
js获取浏览器信息
2010-12-20 08:52 737<body> <script type=& ... -
jQuery.datePicker日历插件
2011-01-10 19:00 1667此datePicker应非jQuery ui中的datepic ... -
解决eclipse-helios中Errors running builder JavaScript Validator的问题
2011-05-26 10:43 964Web项目在打开的时候,总是在验证的时候弹出错误:Errors ... -
jstl对Map,list的操作
2011-07-19 10:29 880//jstl对Map的操作 /**当forEach 的ite ... -
java 获取 google地址
2011-12-12 11:41 754private String getAddr(Stri ... -
使用方向键切换INPUT焦点之左右键补遗
2012-02-01 14:11 1197使用方向鍵切換INPUT焦點之左右鍵補遺兩年前曾在一個小專案實 ... -
struts2中s:select标签的使用
2012-04-17 14:28 9581.第一个例子:<s:select list=&q ... -
jquery如何实现过几秒消失的标签提示
2012-01-10 17:44 2601<head> <style> ... -
jquery如何实现过几秒消失的标签提示
2012-01-10 17:43 798<head> <style> ... -
jqGrid编辑
2011-08-22 13:38 2211jqGrid的编辑——基础知 ... -
Javascript跳转页面和打开新窗口等方法
2011-07-09 13:36 12541.在原来的窗体中直接跳转用 window.loc ... -
完整的JSP实现打印预览、打印设置等功能demo
2011-07-09 11:41 2503<%--一个完整的JSP实现打印预览、打印设 ...
相关推荐
《jQuery Colorbox:深入解析与应用》 jQuery Colorbox是一款基于jQuery库的轻量级弹出插件,它提供了一种优雅的方式展示图片、HTML内容、IFrame、Ajax以及视频等,极大地丰富了网页的交互体验。在网页设计中,...
在"ColorBox样式例子"中,我们将探讨如何在实际项目中应用和定制ColorBox。 首先,ColorBox的核心功能是创建一个可自定义的弹出窗口,用于显示单张或一组图片。它支持预加载图像,提供平滑的过渡效果,并且可以轻松...
jQuery Colorbox是一款流行的jQuery插件,它用于创建优雅的、响应式的图片展示效果。这款插件不仅限于图片,还能处理HTML内容、IFRAME、Ajax请求等多种类型的媒体。Colorbox能够提供轻量级的弹出窗口体验,使得在...
**jQuery ColorBox插件详解** 在网页设计中,弹出窗口常常用于展示图片、内容或者进行用户交互,而`jQuery ColorBox`就是这样一个强大的轻量级弹出窗口小插件。它提供了优雅的视觉效果,使得用户体验更加舒适,是...
《jQuery Colorbox在实际项目中的应用深度解析》 在网页设计和开发中,优雅的弹出层效果常常能提升用户体验,jQuery Colorbox就是一个强大的轻量级插件,它提供了多种类型的弹出展示方式,包括图片、iframe、HTML...
这个教程将帮助你理解和掌握Colorbox的使用方法,包括其API接口和中文指南。 首先,我们来了解Colorbox的基本用法。在HTML中,你可以通过添加特定的类或者数据属性来标记需要弹出显示的内容。例如,对于图片,可以...
《ColorBox:jQuery相册查看控件的深度解析与应用》 ColorBox是一款基于jQuery的轻量级灯箱插件,它以其优雅的界面、强大的功能和良好的用户体验,被广泛应用于网页中的图片、iframe、HTML内容等的弹出展示。这款...
**jQuery Colorbox** 是一款非常流行的JavaScript库,用于在网页中创建优雅的、可自定义的弹出窗口。它基于jQuery框架,使得开发者能够轻松地实现各种弹出效果,如图片画廊、内联内容、IFrame、Ajax加载以及YouTube...
《图片预览效果:colorBox深度解析》 在网页设计中,图片预览功能是不可或缺的一部分,它能够为用户提供一个方便、快捷的方式来查看大图,而无需跳转到新的页面或者下载图片。colorBox,作为一个优秀的JavaScript...
在压缩包中,可能包含`colorbox.css`和`jquery.colorbox.js`等文件,这些都是实现Colorbox功能所必需的。确保将这些文件添加到你的HTML页面头部或者底部,以便正确加载。 例如,在HTML文件中,你可以这样引用: ``...
下面将详细介绍Colorbox的功能、使用方法及其实现放大图片的原理。 1. **Colorbox功能**: - **图片画廊**:Colorbox可以轻松实现图片画廊效果,用户可以在弹出窗口中浏览一组相关的图片。 - **内联内容**:除了...
《jQuery Colorbox弹出层插件:实现图片弹出显示的代码详解》 在Web开发中,为了提供更好的用户体验,我们常常需要实现一种效果:当用户点击某个元素时,图片或者其他内容以弹出层的形式展示出来。jQuery Colorbox...
在网页设计和开发中,"colorbox"是一个流行的JavaScript库,用于创建优雅的弹出层、遮罩和对话框效果。这个库以其简洁的API和高度可定制性而受到广泛欢迎。下面我们将深入探讨colorbox的功能、用法以及它如何实现...
**jQuery colorbox插件详解** `jQuery colorbox`是一款基于jQuery库的轻量级、高度可定制的弹出框插件,通常用于实现轻盒(lightbox)效果。它能够优雅地展示图片、HTML内容、IFrame、YouTube视频等,提供了一种在...
**jQuery Colorbox** jQuery Colorbox是一款流行的轻量级插件,用于在网页中创建弹出式的图片、HTML、iframe和Ajax等内容展示。它提供了一种优雅的方式来增强用户体验,通过将内容在现有页面上以全屏或半透明的...
**JavaScript Colorbox插件详解** Colorbox是一款流行的JavaScript插件,专用于创建优雅的弹出框效果。在网页设计中,弹出框常用于显示图片、视频、内嵌页面等,而Colorbox以其简洁的界面和高度可定制性受到开发者...
《ColorBox-library:Android平台上的出色颜色选择器》 在移动应用开发中,尤其是在涉及到用户界面设计时,颜色选择器是不可或缺的一部分。ColorBox-library,正如其名,是一款专为色彩爱好者打造的Android颜色选择...
"Colorbox"是一款流行的JavaScript轻量级插件,主要用于创建响应式、美观的弹出框,尤其适合实现图片轮播功能。在网页设计和开发中,它提供了多种展示方式,可以满足不同需求的图片轮播效果,使得用户体验更加优雅且...
ColorBox 路由器手机控制客户端,手机控制刷了openwrt系统的路由,实现手机看视频,控制aria2脱机下载等功能