jQuery弹层插件jquery.fancybox.js用法实例

正文实例汇报了jQuery弹层插件jquery.fancybox.js用法。分享给我们供大家参谋,具体如下:

澳门新葡萄京娱乐场 ,fancybox是jquery的插件,功效强盛。协理对推广的图片加多阴影效果,对于大器晚成组相关的图纸增多导航操作按纽,除了能显得层外,仍可以展现iframed内容,
通过css订制样式。协作别的插件,能兑现更旋的功效。

此地给出官方下载以至实例地址:

到方今截至,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,差别的浏览器总计出来的弹层大小会不生机勃勃致。

发表评论

电子邮件地址不会被公开。 必填项已用*标注