快捷導(dǎo)航

jQuery彈層插件jquery.fancybox.js用法實(shí)例

更新時(shí)間：2016年01月22日 09:37:49 作者：張映

這篇文章主要介紹了jQuery彈層插件jquery.fancybox.js用法,結(jié)合實(shí)例形式分析了jQuery彈出層插件jquery.fancybox.js的功能、用法與相關(guān)注意事項(xiàng),需要的朋友可以參考下

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

fancybox是jquery的插件，功能強(qiáng)大。支持對(duì)放大的圖片添加陰影效果，對(duì)于一組相關(guān)的圖片添加導(dǎo)航操作按紐，除了能展示層外，還可以展示iframed內(nèi)容，通過css訂制樣式。配合其他插件，能實(shí)現(xiàn)更旋的效果。

這里給出官方下載以及實(shí)例地址：http://fancyapps.com/fancybox/

附帶給出本站下載地址。

到目前為止，fancybox的最新版本2.1.5，調(diào)用方法變了一些，參數(shù)也加了一些。在上面那個(gè)地址的最下面，有非常詳細(xì)的參數(shù)說(shuō)明。下面簡(jiǎn)單說(shuō)一下使用過程。

1、要用fancybox，至少要加載二個(gè)文件

<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" />

在這兒有一點(diǎn)讓我不爽，就是要加載css文件，jquery插件當(dāng)中要加載css文件的并不多。

2、html調(diào)用fancybox的地方

<a id='fancybox' href="test1.html" >click here</a>
//<a>標(biāo)簽里面加上一個(gè)class="fancybox.ajax"，不然js里面要加參數(shù)type來(lái)說(shuō)明

不知道從哪個(gè)版本開始，調(diào)用ajax的時(shí)候必須在class里面加上fancybox.ajax這個(gè)，調(diào)用iframe呢要加上fancybox.iframe。不然調(diào)不出來(lái)。前提是調(diào)用fancybox沒有指定彈層類型的參數(shù)。指類型用type這個(gè)參數(shù)。

3、js調(diào)用fancybox

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

fancybox彈層插件有一點(diǎn)也要注意，就是不管是用ajax彈層，還是iframe來(lái)加載頁(yè)面，彈出東西，要加上高和寬，如果不加的話，默認(rèn)是自適應(yīng)的。這樣就會(huì)有問題，如果CSS用了特殊字體，即使你設(shè)置了，width和height,不同的瀏覽器計(jì)算出來(lái)的彈層大小會(huì)不一樣。

更多關(guān)于jQuery插件相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery常用插件及用法總結(jié)》

希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: