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?v=2.1.2"></script><link rel="stylesheet" type="text/css" href="jquery.fancybox.css?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程式設計有所協助。