JQuery弹出窗口小插件ColorBox
本文来自:
Small_陌
http://www.cnblogs.com/wggmqj/archive/2011/11/04/2236263.html
今天在博客园看到一篇《ASP.NET MVC+Colorbox做的一个Demo(一)》的文章。看了效果,给人很舒服的感觉。立马我也照着他的示例做了。但做了很久没有成功。后来我到官方下载了ColorBox,里面附带了示例。看了一会儿,就自己模仿着示例做了一个基本的ColorBox弹出页面的效果。
说道ColorBox,还是先来介绍一下它吧。
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. 添加<script>逻辑。
ps:<script type="text/javascript">
function goColorBox() {
$("#goOne").colorbox({ width: "50%", height:"50%", close: "关闭", overlayClose: false}); <!--调用colorbox,大括号里面是指定该colorbox的属性。。在文章结尾会列出ColorBox的常用属性-->
}
</script>
代码如下:

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %> <asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
主页
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="HeadContent" runat="server">
<link href="http://www.cnblogs.com/ColorBox/skin4/colorbox.css" rel="stylesheet" type="text/css" />
<script src="http://www.cnblogs.com/ColorBox/js/jquery.min.js" type="text/javascript"></script>
<script src="http://www.cnblogs.com/ColorBox/js/jquery.colorbox.js" type="text/javascript"></script> <!--<script src="http://www.cnblogs.com/Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>-->
<script type="text/javascript">
function goColorBox() {
$("#goOne").colorbox({ width: "50%", height:"50%", close: "关闭", overlayClose: false});
}
</script>
</asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> <h2><%: ViewData["Message"] %></h2>
<p>
若要了解有关 ASP.NET MVC 的更多信息,请访问 <a href="http://asp.net/mvc" title="ASP.NET MVC 网站">http://asp.net/mvc</a>。
<a href="ColorBox/NewView/Index" onclick="goColorBox()" id="goOne" class="goOne" style="font-size:32px">ColorBox</a> </p>
</asp:Content>

因为是新建的MVC项目,直接在首页写的测试,所以会有母版页。
效果图:
弹出ColorBox前
弹出ColorBox时
ColorBox常用属性:
设置的值 |
默认值 |
介绍 |
---|---|---|
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的更多相关文章
- jQuery弹出窗口完整代码
jQuery弹出窗口完整代码 效果体验:http://keleyi.com/keleyi/phtml/jqtexiao/1.htm 1 <!DOCTYPE html PUBLIC "- ...
- 【jquery】fancybox 是一款优秀的 jquery 弹出层展示插件
今天给大家分享一款优秀的 jquery 弹出层展示插件 fancybox.它除了能够展示图片之外,还可以展示 flash.iframe 内容.html 文本以及 ajax 调用,我们可以通过 css ...
- 弹出层小插件之(一)sweetalert
//弹出层小插件之(一)sweetalert 1.引入sweetalert.css 2.引入sweetalert.min.js 下载地址:http://t4t5.github.io/sweetaler ...
- jQuery弹出窗口浏览图片
效果预览:http://keleyi.com/keleyi/phtml/jqtexiao/3.htm HTML文件代码: <!DOCTYPE HTML> <html> < ...
- Jquery弹出窗口
今天讲了Jquery的弹出窗口的组成和用法: 先把引用文件的代码写好: // 每个弹窗的标识 var x =0; var idzt = new Array(); var Window = functi ...
- 【转】10 个很有用的 jQuery 弹出层提示插件
模态对话框为网站用户提供了快速显示信息的方法,也可以用来提示错误.警告和确认等信息,这里介绍了 10 个弹出模态对话框插件. How to Create a jQuery Confirm Dialog ...
- jQuery 弹出窗口的形式一直是具体案件的中心
在网上查 多 不是不符合无效;因此,一些自己总结,解决这个问题 原则: 常见问题: 弹出层居中了,背景也是半透明的 可是发现一拉动滚动栏立即就露馅了发现背景仅仅设置了屏幕所在段,其它部分都是原来 ...
- FancyBox——jQuery弹出窗口插件
最近工作项目中有用到这款插件,就查找了一下相关资料和用法,下面是一些基本的简单用法,比较容易掌握,有需要的小伙伴可以参考.:) FancyBox是一款基于jquery开发的类Lightbox插件.支持 ...
- jQuery弹出层layer插件的使用
引入插件layer 触发弹出层的按钮/链接 <a href="javascript:showPop();"> <img src="" /> ...
随机推荐
- MyCat 介绍、分片规则、调优的内容收集
一.MyCat的简介 MyCat高可用.负载均衡架构图: 详细知识点: MySQL分布式集群之MyCAT(一)简介(修正) 二.MyCat的schema.xml讲解 详细知识点:MySQL分布式集群 ...
- js点击事件防止用户重复点击执行
点击事件里给button标签加一个自定义属性,存上次点击时间 追问: 求详细代码,JS 真心的没怎么做过 追答: <input type="button" id=&quo ...
- 总结一下用caffe跑图片数据的研究流程
近期在用caffe玩一些数据集,这些数据集是从淘宝爬下来的图片.主要是想研究一下对女性衣服的分类. 以下是一些详细的操作流程,这里总结一下. 1 爬取数据.写爬虫从淘宝爬取自己须要的数据. 2 数据预 ...
- hdu 4635 Strongly connected (tarjan)
题意:给一个n个顶点m条弧的简单有向图(无环无重边),求最多能够加入多少条弧使得加入后的有向图仍为简单有向图且不是一个强连通图.假设给的简单有向图本来就是强连通图,那么输出-1. 分析: 1.用tar ...
- LoadRunner性能测试中Controller场景创建需注意的几点
在LR工具做性能测试中,最关键的一步是Controller场景的设计,因为场景的设计与测试用例的设计相关联,而测试用例的执行,直接影响最终的测试结果是怎么的,因此,我们每设计一种场景,就有可能是一个测 ...
- sqlplus常用操作命令2
常用编辑命令:A[ppend] text 将text附加到当前行之后C[hange] /old /new 将当前行中的old替换为newCLear] buff[er] 清除缓冲区中的所有行DEL 删除 ...
- Python 初学
一. 前言 不怕各位园友笑话,今年年初时,我才知道有一个叫python的编程语言,听说它很大强大,而我只会用c#,正想好好再学一门新语言,还有人分享自己的经验时说,使用python制作的脚本,再做持续 ...
- roundcute 添加修改密码插件
添加修改密码插件 现打开main.inc.php 文件,搜索“$rcmail_config['plugins']”,找到: // List of active plugins (in plugins/ ...
- Java内存模型(转载)
1. 概述 多任务和高并发是衡量一台计算机处理器的能力重要指标之一.一般衡量一个服务器性能的高低好坏,使用每秒事务处理数(Transactions Per Second,TPS)这个指标比较能说明问题 ...
- android:padding和android:margin的区别
Android的Margin和Padding跟Html的是一样的.如下图所示:黄色部分为Padding,灰色部分为Margin. 通俗的理解: Padding 为内边框,指该控件内部内容,如文本/图片 ...