fancybox的使用

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
                      });
                  }
              });
          });
         

 

转载于:https://www.cnblogs.com/shenghaishiweini/p/3144446.html