jQuery弹层插件jquery.fancybox.js用法实例
2016-01-22 00:00
686 查看
本文实例讲述了jQuery弹层插件jquery.fancybox.js用法。分享给大家供大家参考,具体如下:
fancybox是jquery的插件,功能强大。支持对放大的图片添加阴影效果,对于一组相关的图片添加导航操作按纽,除了能展示层外,还可以展示iframed内容, 通过css订制样式。配合其他插件,能实现更旋的效果。
这里给出官方下载以及实例地址:http://fancyapps.com/fancybox/
附带给出本站下载地址。
到目前为止,fancybox的最新版本2.1.5,调用方法变了一些,参数也加了一些。在上面那个地址的最下面,有非常详细的参数说明。下面简单说一下使用过程。
1、要用fancybox,至少要加载二个文件
在这儿有一点让我不爽,就是要加载css文件,jquery插件当中要加载css文件的并不多。
2、html调用fancybox的地方
不知道从哪个版本开始,调用ajax的时候必须在class里面加上fancybox.ajax这个,调用iframe呢要加上fancybox.iframe。不然调不出来。前提是调用fancybox没有指定弹层类型的参数。指类型用type这个参数。
3、js调用fancybox
fancybox弹层插件有一点也要注意,就是不管是用ajax弹层,还是iframe来加载页面,弹出东西,要加上高和宽,如果不加的话,默认是自适应的。这样就会有问题,如果CSS用了特殊字体,即使你设置了,width和height,不同的浏览器计算出来的弹层大小会不一样。
更多关于jQuery插件相关内容感兴趣的读者可查看本站专题:《jQuery常用插件及用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
jQuery弹出层插件Lightbox_me使用指南
jQuery插件zoom实现图片全屏放大弹出层特效
原创jQuery弹出层插件分享
js弹出层(jQuery插件形式附带reLoad功能)
Jquery实现弹出层分享微博插件具备动画效果
jquery.artwl.thickbox.js 一个非常简单好用的jQuery弹出层插件
基于jquery的blockui插件显示弹出层
boxy基于jquery的弹出层对话框插件扩展应用 弹出层选择器
jQuery Dialog 弹出层对话框插件
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程序设计有所帮助。
您可能感兴趣的文章:
小巧强大的jquery layer弹窗弹层插件jQuery弹出层插件Lightbox_me使用指南
jQuery插件zoom实现图片全屏放大弹出层特效
原创jQuery弹出层插件分享
js弹出层(jQuery插件形式附带reLoad功能)
Jquery实现弹出层分享微博插件具备动画效果
jquery.artwl.thickbox.js 一个非常简单好用的jQuery弹出层插件
基于jquery的blockui插件显示弹出层
boxy基于jquery的弹出层对话框插件扩展应用 弹出层选择器
jQuery Dialog 弹出层对话框插件
相关文章推荐
- jQuery头像裁剪工具jcrop用法实例(附演示与demo源码下载)
- jQuery简单获取键盘事件的方法
- jQuery ajax时间差导致的变量赋值问题分析
- jquery.validate提示错误信息位置方法
- jQuery实现图片轮播效果
- jquery日历插件datepicker用法分析
- jquery采用oop模式class类的使用示例
- DOMLoaded 类似jquery的$(callback)
- 第二章 jQuery选择器
- 第三章 jQuery中的DOM操作
- jquery读写cookie
- jQuery-extend分析
- JQuery学习笔记——JQuery基础
- 2016 系统设计第一期 (档案一)jQuery checkbox 取值赋值
- 2016 系统设计第一期 (档案一)jQuery radio 取值赋值
- 2016 系统设计第一期 (档案一)jQuery ajax serialize()方法form提交数据
- Jquery 对话框确认
- 冻结 锁定 固定 行 列 表头 抬头 html table jquery 全兼容常见浏览器
- jQuery Dialog API (二)
- 使用JQuery能做什么(zz)