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

2024-12-19 16:09:07

本文实例讲述了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程序设计有所帮助。

小巧强大的jquery layer弹窗弹层插件

先去官网下载最新的js http://sentsin.com/jquery/layer/ ①引用jquery ②引用layer.min.js 触发弹层的事件可自由绑定,如: $('#id').on('click', function(){ layer.msg('test'); }); 下面主要贴出上述例子的调用代码: [信息框]: layer.alert('白菜级别前端攻城师贤心', 8); //风格一 layer.msg('前端攻城师贤心'); //风格二 //当然,远远不止这两种风格. [
javascript右下角弹层及自动隐藏(自己编写)

在编写项目中总会需要有个右下角弹层提示公告的需求,怎么用更简单方面,更简洁代码,实现更好用户体验这个就是我们的所要做的内容.市场这块弹层很多,但功能不尽如人意.下面分享早些时候自己编写,以及现在还在应用的自动弹层. 弹层示例图: 实现代码如下: Css样式: 复制代码代码如下: /*通知提示层*/ .msg_info{ font-size: 12px; text-align: left; z-index: 100; position: absolute; display: none; bot
Js 订制自己的AlertBox(信息提示框)

本文制作一个用户自定义的AlertBox,效果如图:js文件中插入如下代码: 复制代码代码如下: // JScript 文件 // constants to define the title of the alert and button text. var ALERT_TITLE = "Oops!"; var ALERT_BUTTON_TEXT = "Close"; // over-ride the alert method only if this a new
Bootstrap被封装的弹层

对于Bootstrap的弹层,插件有很多,今天主要用的是它自带的功能,通过bootstrap提供的模式窗口来实现的,而小编主要对使用方法进行了封装,开发人员可以自己动态传入弹层的HTML内容,可以控制按钮的显示与隐藏,用户通过MVC扩展方法对弹层进行生成,然后使用A标签进行调用．具体使用很简单 @Html.GenerateDialog("测试",true, @<div> <form action="/home/index">hello wo
weUI应用之JS常用信息提示弹层的封装

weUI应用,自己用JS封装了几个常用的信息提示的弹层测试页面的代码在后面有贴出几个弹层如下图 HTML页面代码: <!DOCTYPE html> <html> <head> <title>weUI-test</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,c
javascript中常见的3种信息提示框(alert,prompt,confirm)

1.警告提示框 alert("文本"). ex. function disp_alert() { alert("我是警告框!!"+'\n'+"hhah")//有折行 } [Ctrl+A 全选注:如需引入外部Js需刷新才能执行] 2.确认提示框(confirm,返回true或者false) function show_confirm() { var r=confirm("Press a button!"); if (r==tr
JS实现仿google、百度搜索框输入信息智能提示的实现方法

本文实例讲述了JS实现仿google.百度搜索框输入信息智能提示的实现方法.分享给大家供大家参考.具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&qu
js操作输入框提示信息且响应鼠标事件

我们经常遇到一些输入框,比如注册网站的输入框就有默认提示值,当获取鼠标焦点的时候,默认值被删除,当用户没输入东西焦点离开的时候,又恢复默认提示值.这方法用js代码实现如下: html代码: 复制代码代码如下: <input type="text" id="email" name="email" class="txt_input" value="请输入经常使用的邮箱" onfocus="fn
Angularjs整合微信UI（weui）

引子不久前,微信推出了自己的一套UI,我看有很多开发者将其套用在了一些前端框架中,比如react.vue.最近自己在学习Angularjs,所以,也想把这个UI整合到这个框架,这几天试了一下,简单的套用了一个功能,现在分享给大家,分离做的不好,请高手指点. 适合读者有一定的Angularjs基础,并且了解ngRoute.ngAnimate的人群. 包含文件整合的时候,参照官方的演示页面,自己也做了一个演示页面,完全使用Angularjs做的,没有引用其它框架.下面先说明一下引入的文件. 使
js下在password表单内显示提示信息的解决办法

经典有人要这个代码,考虑到password中输入的内容会显示为*号,所以要想办法解决*的问题.当初想用setAttribute动态修改type属性达到效果,再ff下测试成功,但没想到setAttribute对type属性的修改在ie中无效.最终采用背景图片的方式解决了这个.即为password设定一个背景图片,图片文字为提示信息如:<img src="http://files.jb51.net/upload/20070819124037566.gif" />, 当鼠标放上

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

相关推荐

随机推荐