博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JQuery弹出窗口小插件ColorBox
阅读量:6569 次
发布时间:2019-06-24

本文共 2259 字,大约阅读时间需要 7 分钟。

ColorBox官方网站:http://colorpowered.com/colorbox/     colorbox()函数使用一堆key/value对象和一个可选的callback函数    格式:$('selector').colorbox({key:value}, callback);    例子: $('a.gallery').colorbox({transition:'fade', speed:500});    还是例子:$('button').colorbox({href:"thankyou.html"});    支持 照片,照片组,幻灯片,ajax,内联 和 iframe 框架。    通过CSS 控制外观,使用用户可以很容易重新定制外观。    不需要更改 ColorBox 的 javascript 文件就可以重新设定其行为。    可以依靠 callback & event-hooks 进行拓展,不需要修改源代码。    非常友好,不需要修改现有的 HTML,所有的选项都通过 JS 设置。  现在我来说说我使用ColorBox的步骤吧:其实使用ColorBox很简单  1.当然,创建项目。这里就不多说了。  2.在需要使用ColorBox的地方引用ColorBox的JS文件和css样式文件。  ps:从官方下载ColorBox解压后得到colorbox文件夹,colorbox文件夹下包含了colorbox、content、demos、example1至example5等文件夹和文件。这里需要把colorbox文                  件夹下的两个JS文件拷贝到项目中,example1至example5这几个文件夹中是ColorBox的皮肤文件,比如你喜欢example1文件夹下的皮肤,就将文件夹下的images文件和  colorbox.css样式表拷贝到项目中。在需要使用ColorBox的地方引用jquery.colorbox.js、colorbox.css;当然不能忘了JQuery的JS文件jquery.min.js(注意:jquery.min.js需放在jquery.colorbox.js的前面)。到此,我们的准备工作就做好了。  3. 添加

 

示例:

			
Colorbox Examples

Colorbox Demonstration

Elastic Transition

Grouped Photo 1

Grouped Photo 2

Grouped Photo 3

Fade Transition

Grouped Photo 1

Grouped Photo 2

Grouped Photo 3

No Transition + fixed width and height (75% of screen size)

Grouped Photo 1

Grouped Photo 2

Grouped Photo 3

Slideshow

Grouped Photo 1

Grouped Photo 2

Grouped Photo 3

Other Content Types

Outside HTML (Ajax)

Flash / Video (Iframe/Direct Link To YouTube)

Flash / Video (Iframe/Direct Link To Vimeo)

Outside Webpage (Iframe)

Inline HTML

Demonstration of using callbacks

Example with alerts. Callbacks and event-hooks allow users to extend functionality without having to rewrite parts of the plugin.

Retina Images

Retina

Non-Retina

This content comes from a hidden element on this page.

The inline option preserves bound JavaScript events and changes, and it puts the content back where it came from when it is closed.

Click me, it will be preserved!

If you try to open a new Colorbox while it is already open, it will update itself with the new content.

Updating Content Example:

Click here to load new content

 

转载地址:http://oqpjo.baihongyu.com/

你可能感兴趣的文章
高并发秒杀系统分析
查看>>
3. 深入研究 UCenter API 之 加密与解密(转载)
查看>>
Asp.net MVC验证哪些事(3)-- Remote验证及其改进(附源码)
查看>>
php文件处理
查看>>
今天写了个从一张表数据插入到另一张表的oracle 语句
查看>>
Odoo Auto Backup Database And Set Linux task schedualer
查看>>
Java线程专栏文章汇总(转)
查看>>
listview中getview异步加载网络图片
查看>>
【AdaBoost算法】积分图代码实现
查看>>
如何让jquery-easyui的combobox像select那样不可编辑
查看>>
Linq之扩展方法
查看>>
【Bug Fix】Error : Can't create table 'moshop_1.#sql-534_185' (errno: 150)
查看>>
Android DownloadManager 的使用
查看>>
Android数据的四种存储方式
查看>>
上海互联网整体沉沦:盛大巨人全没落 8年没出一个马云
查看>>
fabric批量操作远程操作主机的练习
查看>>
css知多少(7)——盒子模型
查看>>
【转】在Ubuntu上下载、编译和安装Android最新源代码
查看>>
Dubbo入门实例--转载
查看>>
设计模式C++学习笔记之三(Singleton单例模式)
查看>>