jQuery的弹出窗口插件colorbox
官方网站:http://colorpowered.com/colorbox/
- 支持 照片,照片组,幻灯片,ajax,内联 和 iframe 框架。
- 通过CSS 控制外观,使用用户可以很容易重新定制外观。
- 不需要更改 ColorBox 的 javascript 文件就可以重新设定其行为。
- 可以依靠 callback & event-hooks 进行拓展,不需要修改源代码。
- 非常友好,不需要修改现有的 HTML,所有的选项都通过 JS 设置。
介绍
colorbox()函数使用一堆key/value对象和一个可选的callback函数
格式:$('selector').colorbox({key:value}, callback);
例子: $('a.gallery').colorbox({transition:'fade', speed:500});
还是例子:$('button').colorbox({href:"thankyou.html"});
|
设置的值 |
默认值 |
介绍 |
|---|---|---|
|
transition |
"elastic" |
过渡效果,可以是"elastic", "fade", or "none". |
|
speed |
350 |
设置过渡效果的持续时间,毫秒 |
| href | false |
Example:$('h1').colorbox({href:"welcome.html"}) 这个用来设置一个锚标记的值或者一个不是锚的元素,例如图像或者表单的按钮,例如: |
| title | false |
这可以为Colorbox设置一个标题 |
| rel | false |
Example:$('#example a').colorbox({rel:'group1'}) 这个可以根据元素的rel属性设置要显示的元素集合,也可以覆盖一个存在的rel属性 |
| width | false |
Example: "100%", "500px", or 500 设置宽度,包括边框和按钮 |
| height | false |
Example: "100%", "500px", or 500 设置高度,包括边框和按钮 |
| innerWidth | false |
Example: "50%", "500px", or 500 这个可以设定一个固定的内大小,包括边框和按钮 |
| innerHeight | false |
Example: "50%", "500px", or 500 这个可以设定一个固定的内高度,包括边框和按钮 |
| initialWidth | 300 |
设置初始化宽度 |
| initialHeight | 100 |
设置初始化高度 |
| maxWidth | false |
Example: "100%", 500, "500px" 设置内容的最大宽度 |
| maxHeight | false |
Example: "100%", 500, "500px" 设置内容的最大高度 |
| scalePhotos | true |
如果是true且maxWidth, maxHeight, innerWidth, innerHeight, width, 或者 height 被设置, Colorbox会缩放图片以使用边框 |
| scrolling | true |
如果是false,Colorbox不会为了溢出元素设置滚动条 |
| iframe | false |
如果是true,元素会在Iframe中显示 |
| inline | false |
Example: $("#inline").colorbox({inline:true, href:"#myForm"}); 如果是true,jQuery选择器可以用来选择要显示的元素。例如: |
| html | false |
Example: Hello '}); 这个是直接让你显示HTML代码,例 |
| photo | false |
如果为true,ColorBox只会把元素按照图片显示,防止类似photo.php?pic=1这样的连接被误认为是网页 |
| opacity | 0.85 |
遮罩层不透明度 从0-1之间取值 |
| open | false |
如果为true,ColorBox会自动开启 |
| preloading | true |
如果为True,ColorBox会自动预载要显示图片 |
| overlayClose | true |
为true单击遮罩层就可以把ColorBox关闭 |
| slideshow | false |
为True,会自动滚动图片 |
| slideshowSpeed | 2500 |
设置时间,毫秒 |
| slideshowAuto | true |
为tuue,滑动会自动开始 |
| slideshowStart | "start slideshow" |
开始自动滑动按钮的文本 |
| slideshowStop | "stop slideshow" |
停止自动滑动按钮的文本 |
| current | "{current} of {total}" |
文本内容:现在正在显示的元素序号 |
| previous | "previous" |
“上一个”按钮的文本 |
| next | "next" |
“下一个”按钮的文本 |
| close | "close" |
“关闭”按钮的文本 |
jQuery的弹出窗口插件colorbox的更多相关文章
- CSS3/jQuery自定义弹出窗口
简单演示一下,精简了演示效果和css样式文件,更利于在项目中的实际应用 引入style.css index.js <!DOCTYPE HTML PUBLIC "-//W3C//DT ...
- 写了一个jquery的 弹出层插件。
下载地址:http://pan.baidu.com/s/1eQ26CMm ps:ajax加载做的,要有环境才能正常运行哦! //这是一个以ajax加载显示弹出层插件 参数(option): widt ...
- FancyBox——jQuery弹出窗口插件
最近工作项目中有用到这款插件,就查找了一下相关资料和用法,下面是一些基本的简单用法,比较容易掌握,有需要的小伙伴可以参考.:) FancyBox是一款基于jquery开发的类Lightbox插件.支持 ...
- jQuery layer弹出层插件 http://layer.layui.com/直接上官网学
在许多网站中,经常用到弹出层,有时候为了达到更好的用户体验,你将写繁琐的css跟js,这款 jquery-layer可以让你想到即可做到的web弹窗/层js组件.layer侧重于用户灵活的自定义,为不 ...
- PHPCMS系统使用的弹出窗口插件artDialog
来源: http://aui.github.io/artDialog/doc/index.html (官方) http://lab.seaning.com/ http://www.mb5u.com/ ...
- jQuery+css3弹出框插件
先来看DEMO:https://codepen.io/jonechen/pen/regjGG 插件的开发很简单,运用了CSS3的动画效果,并且弹出框的内容可以自定义.插件的默认配置参数有三个: var ...
- jquery layer弹出层插件
http://www.51xuediannao.com/js/jquery/jquery_layer/layer.html
- jQuery zxxbox弹出框插件(v3.0)
插件地址: http://www.zhangxinxu.com/study/201009/jquery-zxxbox-v3-demo.html
- 自用的弹出窗口jquery插件
现有网上的弹出窗口插件很多, 但发现在项目应用中总会有些功能不能适用, 最后只好自己写一个:插件主要参考了ymPrompt弹窗代码, ymPrompt是JS的弹窗,本插件相当于是ymPrompt的jq ...
随机推荐
- Php output buffering缓存及程序缓存
在php中有时为了控制程序的输出显示顺序,提供了output buffering缓存(php自身缓存机制). 若Ob缓存开启,需要输出的就先存在ob缓存里,再到程序缓存里.若没有开启,则直接进入 ...
- 9 本免费的 Python 语言编程书籍(转载)
9 本免费的 Python 语言编程书籍 原文地址:http://linuxtoy.org/archives/9-free-python-books.html 2010-03-03 Toy Poste ...
- Python Ogre Blender(转载)
http://www.cppblog.com/Charlib/archive/2010/05/31/python_ogre_blender_1.html PyOgre入门以及如何使用Blender制作 ...
- WPF DragDrop事件元素跟随
前一段时间项目里面要实现一个鼠标拖动一个元素到另外一个元素上面并且赋值的功能,由于要在surface上运行,拖动的时候手指会挡住系统默认的拖动图标,导致用户意识不到自己是不是在拖动着东西,所以要解决这 ...
- Ruby on Rail学习笔记
说明:只针对Windows8.1 Windows下,上rubyinstaller上下载最新的railsinstaller包含Ruby2.1的,然后更新gem 用命令: gem update --sys ...
- Node.js学习笔记 01 搭建静态服务器
希望这篇文章能解决你这样一个问题:“我现在已经了解了一些Node.Js基本概念了,怎么搭一台静态服务器呢?” 请参考一下博主的前两篇文章: 完全面向于初学者的Node.js指南 Node.Js的Mod ...
- NOJ1019-计算二叉树的高度和结点数
输入 二叉树的先序遍历序列,用#代表空树或空子树. 输出 共五行 前三行依次输出先序.中序和后序遍历序列, 第四行输出二叉树的高度, 第五行依次输出二叉树总结点数目.叶子结点数目.度为1的结点数目. ...
- PAT乙级真题1001. 害死人不偿命的(3n+1)猜想 (15)(解题)
卡拉兹(Callatz)猜想: 对任何一个自然数n,如果它是偶数,那么把它砍掉一半:如果它是奇数,那么把(3n+1)砍掉一半.这样一直反复砍下去,最后一定在某一步得到n=1.卡拉兹在1950年的世界数 ...
- 11G ORACLE RAC DBCA 无法识别asm磁盘组
ASM磁盘无法识别几种现象: 1) gi家目录或者其子目录权限错误 2)asm磁盘的权限错误 3)asm实例未启动或者asm磁盘组没有mount上 4)asm磁盘组资源没有在线 5)oracle用户的 ...
- bc命令
bc 命令: bc 命令是用于命令行计算器. 它类似基本的计算器. 使用这个计算器可以做基本的数学运算. [tough@localhost *|bc [tough@localhost expr ...