首页    技术博客    PHP教程    数据库技术    前端开发   HTML5    Nginx    php论坛
新用户注册 | 会员登录
加入会员，解锁专属内容
取消
热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

JQuery弹出窗口小插件ColorBox

作者：手机用户2602880745 | 来源：互联网 | 2023-06-06 14:20
本文来自：http:www.cnblogs.comwggmqjarchive201111042236263.html 今天在博客园看到一篇《ColorBox，里面附带了示例。看了一会儿，就自己模仿着示例做了一个基本的ColorBox弹出页面的效果。说道ColorBox,还是先来介绍一下它吧。ColorBox官方网站：http:colo

本文来自：

http://www.cnblogs.com/wggmqj/archive/2011/11/04/2236263.html

 

今天在博客园看到一篇《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. 添加

 

代码如下：

 

JQuery弹出窗口小插件ColorBox
<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>



"Content1" COntentPlaceHolderID="TitleContent" runat="server">
    主页

"Content3" COntentPlaceHolderID="HeadContent" runat="server">
    "http://www.cnblogs.com/ColorBox/skin4/colorbox.css" rel="stylesheet" type="text/css" />
    
    

    
    


"Content2" COntentPlaceHolderID="MainContent" runat="server">

    
<%: ViewData["Message"] %>

    

        若要了解有关 ASP.NET MVC 的更多信息，请访问 "http://asp.net/mvc" title="ASP.NET MVC 网站">http://asp.net/mvc。
        "ColorBox/NewView/Index" Onclick="goColorBox()" id="goOne" class="goOne" font-size:32px">ColorBox

JQuery弹出窗口小插件ColorBox

因为是新建的MVC项目，直接在首页写的测试，所以会有母版页。

效果图：

弹出ColorBox前

JQuery弹出窗口小插件ColorBox

弹出ColorBox时

JQuery弹出窗口小插件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: 
$.fn.colorbox({html:'

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

推荐阅读
  • select

    如何使用Java获取服务器硬件信息和磁盘负载率

    如何使用Java获取服务器硬件信息和磁盘负载率
    本文介绍了使用Java编程语言获取服务器硬件信息和磁盘负载率的方法。首先在远程服务器上搭建一个支持服务端语言的HTTP服务，并获取服务器的磁盘信息，并将结果输出。然后在本地使用JS编写一个AJAX脚本，远程请求服务端的程序，得到结果并展示给用户。其中还介绍了如何提取硬盘序列号的方法。 ... [详细]
  • php

    Windows下配置PHP5.6的方法及注意事项

    Windows下配置PHP5.6的方法及注意事项
    本文介绍了在Windows系统下配置PHP5.6的步骤及注意事项，包括下载PHP5.6、解压并配置IIS、添加模块映射、测试等。同时提供了一些常见问题的解决方法，如下载缺失的msvcr110.dll文件等。通过本文的指导，读者可以轻松地在Windows系统下配置PHP5.6，并解决一些常见的配置问题。 ... [详细]
  • controller

    SpringBoot集成前端模版（thymeleaf）的配置步骤

    本文介绍了在SpringBoot中集成thymeleaf前端模版的配置步骤，包括在application.properties配置文件中添加thymeleaf的配置信息，引入thymeleaf的jar包，以及创建PageController并添加index方法。 ... [详细]
  • select

    高质量SQL书写的30条建议

    高质量SQL书写的30条建议
    本文提供了30条关于优化SQL的建议，包括避免使用select *，使用具体字段，以及使用limit 1等。这些建议是基于实际开发经验总结出来的，旨在帮助读者优化SQL查询。 ... [详细]
  • node.js

    从零基础到精通的前台学习路线

    从零基础到精通的前台学习路线
    随着互联网的发展，前台开发工程师成为市场上非常抢手的人才。本文介绍了从零基础到精通前台开发的学习路线，包括学习HTML、CSS、JavaScript等基础知识和常用工具的使用。通过循序渐进的学习，可以掌握前台开发的基本技能，并有能力找到一份月薪8000以上的工作。 ... [详细]
  • select

    REVERT权限切换的操作步骤和注意事项

    REVERT权限切换的操作步骤和注意事项
    本文介绍了在SQL Server中进行REVERT权限切换的操作步骤和注意事项。首先登录到SQL Server，其中包括一个具有很小权限的普通用户和一个系统管理员角色中的成员。然后通过添加Windows登录到SQL Server，并将其添加到AdventureWorks数据库中的用户列表中。最后通过REVERT命令切换权限。在操作过程中需要注意的是，确保登录名和数据库名的正确性，并遵循安全措施，以防止权限泄露和数据损坏。 ... [详细]
  • select

    python+selenium十：selenium的二次封装

    python+selenium十：基于原生selenium的二次封装fromseleniumimportwebdriverfromselenium.webdriv ... [详细]
  • chat

    详细介绍附代码：使用jquery，和php文件构建一个简单的在线聊天室，通过ip显示googlemap

    最近学习了关于使用最为流行的jquery发送请求，在实践中以最为简单的聊天室作为测验的辅助工具，对相关网页开发有一个初步的认识，希望大家能够一起学习进步。首先介绍一下 ... [详细]
  • php

    Linux进程控制块PCBtask_struct结构体结构及作用详解

    本文详细介绍了Linux中进程控制块PCBtask_struct结构体的结构和作用，包括进程状态、进程号、待处理信号、进程地址空间、调度标志、锁深度、基本时间片、调度策略以及内存管理信息等方面的内容。阅读本文可以更加深入地了解Linux进程管理的原理和机制。 ... [详细]
  • io

    Linux下Perl的安装及第一个程序运行

    本文介绍了在Linux下安装Perl的步骤，并提供了一个简单的Perl程序示例。同时，还展示了运行该程序的结果。 ... [详细]
  • controller

    后台获取视图对应的字符串

    后台获取视图对应的字符串
    1.帮助类后台获取视图对应的字符串publicclassViewHelper{将View输出为字符串(注：不会执行对应的ac ... [详细]
  • select

    VB.NET在线急等问题解决方法，如何统计数据库字段下的数据并显示在文本框里？

    本文介绍了一个在线急等问题解决方法，即如何统计数据库中某个字段下的所有数据，并将结果显示在文本框里。作者提到了自己是一个菜鸟，希望能够得到帮助。作者使用的是ACCESS数据库，并且给出了一个例子，希望得到的结果是560。作者还提到自己已经尝试了使用"select sum(字段2) from 表名"的语句，得到的结果是650，但不知道如何得到560。希望能够得到解决方案。 ... [详细]
  • select

    MySQL表分区的创建、增加和删除方法详解

    本文详细介绍了MySQL表分区的创建、增加和删除方法，包括查看分区数据量和全库数据量的方法。欢迎大家阅读并给予点评。 ... [详细]
  • controller

    如何在codeigniter中识别angularjs请求

    本文讨论了如何在codeigniter中识别来自angularjs的请求，并提供了两种方法的代码示例。作者尝试了$this->input->is_ajax_request()和自定义函数is_ajax()，但都没有成功。最后，作者展示了一个ajax请求的示例代码。 ... [详细]
  • tags

    Java后台Jsonp处理方法及其应用场景

    本文介绍了Java后台Jsonp处理方法及其应用场景。首先解释了Jsonp是一个非官方的协议，它允许在服务器端通过Script tags返回至客户端，并通过javascript callback的形式实现跨域访问。然后介绍了JSON系统开发方法，它是一种面向数据结构的分析和设计方法，以活动为中心，将一连串的活动顺序组合成一个完整的工作进程。接着给出了一个客户端示例代码，使用了jQuery的ajax方法请求一个Jsonp数据。 ... [详细]
author-avatar
手机用户2602880745
这个家伙很懒，什么也没留下！
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有