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
});
}
});
});
05-04 03:57