jQuery彈層外掛jquery.fancybox.js用法實例_jquery

本文實例講述了jQuery彈層插件jquery.fancybox.js用法。分享給大家參考，具體如下：

fancybox是jquery的插件，功能強大。支援對放大的圖片添加陰影效果，對於一組相關的圖片添加導航操作按紐，除了能展示層外，還可以展示iframed內容， 透過css訂位樣式。配合其他插件，能實現更旋的效果。

這裡給出官方下載以及實例位址：http://fancyapps.com/fancybox/

附帶給本站下載位址。

到目前為止，fancybox的最新版本2.1.5，呼叫方法變了一些，參數也加了一些。在上面那個地址的最下面，有非常詳細的參數說明。下面簡單說一下使用流程。

1、要用fancybox，至少要載入二份檔案

<script type="text/javascript" src="jquery.fancybox.js&#63;v=2.1.2"></script>
<link rel="stylesheet" type="text/css" href="jquery.fancybox.css&#63;v=2.1.2" media="screen" />

在這裡有一點讓我不爽，就是要載入css文件，jquery插件當中要載入css文件的並不多。

2、html呼叫fancybox的地方

<a id='fancybox' href="test1.html" >click here</a>
//<a>标签里面加上一个class="fancybox.ajax"，不然js里面要加参数type来说明

不知道從哪個版本開始，呼叫ajax的時候必須在class裡面加上fancybox.ajax這個，呼叫iframe呢要加上fancybox.iframe。不然調不出來。前提是呼叫fancybox沒有指定彈層類型的參數。指類型用type這個參數。

3、js呼叫fancybox

$("#fancybox").fancybox({
  'width'        : '30%',
  'height'        : '20%',
  'autoScale'      : false,
  'transitionIn'     : 'none',
  'transitionOut'    : 'none',
  'onClosed' : function() {alert('test');}
});

fancybox彈層插件有一點也要注意，就是不管是用ajax彈層，還是iframe來加載頁面，彈出東西，要加上高和寬，如果不加的話，默認是自適應的。這樣就會有問題，如果CSS用了特殊字體，即使你設定了，width和height,不同的瀏覽器計算出來的彈層大小會不一樣。

更多關於jQuery外掛相關內容有興趣的讀者可查看本站專題：《jQuery常用外掛及用法總結》

希望本文所述對大家jQuery程式設計有所幫助。