fancybox,个人没有深入了解,只是为了工作需要,做的一些界面,主要是用的AJAX功能。

首先,需要下载fancybox的js文件以及CSS文件(可能用不到)

其次,在页面中引入

<script src="/Scripts/jquery.fancybox.js"  type="text/javascript"></script>
<script src="/Scripts/jquery.fancybox.pack.js" type="text/javascript"></script>
<link href="/Content/jquery.fancybox.css" type="text/css" rel="Stylesheet" media="screen" />

再次,使用。比如要在td中使用 需要这样配置

<td href="container" class="fancy fancybox.ajax"> </td>

这里container是显示返回的数据的容器。class中是引入fancybox的核心.

这样配置后就可以使用了。

当需要使用时,可以采用下面的方法:

   $.fancybox(data, {
helpers: {
overlay: {
locked: false
}
},
speedIn: 800,
speedOut: 300,
titleShow: true,
title: title,
autoScale: true
});

前面的data是需要显示的内容,后面的{}是fancybox界面的一些配置。可以参考它的API

下面是我的一个小应用:

 $(".loc").dblclick(function () {
var title = $(this).attr("title");
$.ajax({
type: "POST",
cache: false,
url: "/racklocations/details",
data: {
userCode: $(this).attr('userCode')
},
success: function (data) {
$.fancybox(data, {
helpers: {
overlay: {
locked: false
}
},
speedIn: 800,
speedOut: 300,
titleShow: true,
title: title,
autoScale: true
});
}
});
});

fancybox的使用的更多相关文章

  1. ASP.NET MVC5+EF6+EasyUI 后台管理系统(56)-插件---单文件上传与easyui使用fancybox

    系列目录 https://yunpan.cn/cZVeSJ33XSHKZ  访问密码 0fc2 今天整合lightbox插件Fancybox1.3.4,发现1.3.4版本太老了.而目前easyui 1 ...

  2. Fancybox丰富的弹出层效果

    Fancybox是一款优秀的jquery插件,它能够展示丰富的弹出层效果.前面我们有文章介绍了facybox弹出层效果,相比facybox,fancybox显得功能更为齐全,它除了可以加载DIV,图片 ...

  3. FancyBox - 经典的 jQuery Lightbox 插件

    FancyBox 是一款非常优秀的弹窗插件,能够为图片.HTML 内容和其它任务的多媒体内容提供优雅的弹出缩放效果.作为是最流行的 Lightbox 插件之一,可以通过 fitToView 实现自适应 ...

  4. fancybox的配置项

    Fancybox的API和配置选项说明 属性名 默认值 简要说明 padding 10 浏览框内边距,和css中的padding一个意思 margin 20 浏览框外边距,和css中的margin一个 ...

  5. 又一个绝对棒的对话框插件fancybox v1.3.4

    http://www.jsfoot.com/jquery/demo/2011-07-30/fancybox/index.html jquery插件:fancybox   Fancybox的特点如下: ...

  6. fancybox 基础 简单demo

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <l ...

  7. fancybox 最基本的使用步骤

    初步使用第一步 :引用js和样式 第二步 :设定要触发显示的元素(a标签,链接href指向div的id)  <div><a href="#adddivtest" ...

  8. fancybox iframe 刷新父页面(项目经验)

    <script type="text/javascript"> $(document).ready(function() { $(".fancybox&quo ...

  9. fancybox,Ckeditor,jscrollpane 笔记串烧

    有用到一些插件,整理了一些笔记,分享一下. 一.Fancybox 很酷很强大的弹窗插件 官网地址:Fancybox,基于jquery,开源协议是GPL和MIT. 主要的特点是:能展示图片,html元素 ...

  10. [转]jquery Fancybox丰富的弹出层效果

    本文转自:http://www.helloweba.com/view-blog-65.html Fancybox是一款优秀的jquery插件,它能够展示丰富的弹出层效果.前面我们有文章介绍了facyb ...

随机推荐

  1. ZOJ3772 - Calculate the Function(线段树+矩阵)

    题目大意 给定一个序列A1 A2 .. AN 和M个查询 每个查询含有两个数 Li 和Ri. 查询定义了一个函数 Fi(x) 在区间 [Li, Ri] ∈ Z. Fi(Li) = ALi Fi(Li ...

  2. 第二百六十三天 how can I 坚持

    今天解脱了,放下了,小罗娜,不给力,话说下一步该咋办呢. 鱼不想过双十一自杀了.这都二十二号了,好快. 该把给罗娜说的那些话保存下来.可惜已经删了. 不知道做的对不对,反正就是没缘分,就这样吧. 睡觉 ...

  3. Hibernate之Session缓存以及操作Session缓存的相关方法

    1.Session概述 A.Session 接口是 Hibernate 向应用程序提供的操纵数据库的最主要的接口, 它提供了基本的保存, 更新, 删除和加载 Java 对象的方法. B. Sessio ...

  4. mysql从一个表中拷贝数据到另一个表中sql语句

    这一段在找新的工作,今天面试时,要做一套题,其中遇到这么一句话,从一个表中拷贝所有的数据到另一个表中的sql是什么? 原来我很少用到,也没注意过这个问题,面试后我上网查查,回来自己亲手写了写,测试了下 ...

  5. 《精通ASP.NET MVC5》第2章 第一个MVC应用程序

      控制器     public class NewHomeController : Controller     {         // GET: /NewHome/         public ...

  6. 【PYTHON】二维码生成

    二维码是什么? 二维码从一维码扩展而来,增加另一维具有可读性的条码,用黑白矩形图形表示二进制数据,被设备扫描后获取其中包含的信息,二维码的长度.宽度均记载着数据,二维码具有定位点和容错机制,即便没有辨 ...

  7. Myeclipse 10.x 安装Aptana3.2 插件

    安装步骤: 1.下载aptana3.2 Eclipse Plugin插件. 下载地址:http://update1.aptana.org/studio/3.2/024747/index.html 2. ...

  8. php-fpm 启动和关闭

    php-fpm -c /data/tools/repository/php-5.3.10/etc/php.ini -y /data/tools/repository/php-5.3.10/etc/ph ...

  9. Python写的东西在CMD下打印中文

    以前遇到的问题是在IDLE中可以print出中文,在cmd却是乱码. 后来想明白,IDLE中默认编码是unicode,而cmd中是ANSI,即cp963,即GBK 所以这样就能输出中文了: s = “ ...

  10. delphi 保存网页MHT

    delphi 保存网页MHT   uses ADODB_TLB, CDO_TLB, ComObj,MSHTML;{$R *.dfm}{能把网页如 WWW.QQ.COM保存为一个单文件 .MHT但不能把 ...