Facebox——打造类似Facebook、人人网的提示框

转载 2012年03月29日 14:05:25

译自:http://defunkt.github.com/facebox/

简介

Facebox是一个基于jQuery的,类似于Facebook和人人网的提示框,可以显示图片、divs或者其他任何远程的页面。它简单易用,看起来也很清爽。

下载

可以点击这里下载压缩包,里面含有所有用到的js,css和示例等,或者去官方网站下载,也可以到GitHub下载。

使用

按以下顺序加载所需的js和css:

<script src="jquery.js" type="text/javascript"></script>
<link href="facebox/facebox.css" media="screen" rel="stylesheet" type="text/css"/>
<script src="facebox/facebox.js" type="text/javascript"></script>

然后在script块中加入如下代码:

jQuery(document).ready(function($) {
  $(''a[rel*=facebox]'').facebox({
  	loadingImage:'loading.gif' ,
  	closeImage:'closelabel.gif'
  	});
})

facebox的第一个参数是一个对象,包含多个名值对。一般需要为其指定loading图片的地址和关闭按钮图片的地址,如上所示。

这样,所有rel属性值中含有子串”facebox”的a标记将成为Facebox的触发器,当点击它们时将弹出类似Facebook的弹出框。弹出框的内容由该a标记的href属性值指定,或者由facebox方法的参数指定,详细方法将在下文介绍。

附加的class

可以给facebox的容器指定附加的class属性值来调整其样式,对于获取的远程页面,这个特性尤其重要。附加class的方法是将相应标记的rel属性做以下修改:rel=”facebox[.classname]“,其中的的classname即为要附加的css的类名。例如:

<a href="remote.html" rel="facebox[.bolder]">text</a>
Facebox的显示内容

Facebox弹出框所显示的内容可以由两种方式来设定,一种是由a标记的href属性值来指定,方法参加以上的示例,即:

  • 对于图片,设置其href属性值为图片地址;
  • 对于div,设置其href属性值为div的id;
  • 对于远程获取的页面,设置其href属性值为页面地址。

另一种方式是通过facebox方法的参数来指定,方法如下:

  • 简单的文本:jQuery.facebox(”something cool”);
  • 远程页面:jQuery.facebox({ ajax: ”remote.html” });
  • 图片:jQuery.facebox({ image: ”stairs.jpg” });
  • 同一页面中的标记:jQuery.facebox({ div: ”#box” });

如果要附加class,可以指定facebox的第二个参数,例如:

jQuery.facebox({ ajax: ''remote.html'' }, ''my-groovy-style'');

同时还可以将函数作为facebox方法的每一个参数,这个函数通过完成Ajax调用,并将结果填充到Facebox提示框中,在操作完成前会自动显示一个loading图片,例如:

jQuery.facebox(function() {
  jQuery.get(''code.js'', function(data) {
    jQuery.facebox(''<textarea>'' + data + ''</textarea>'')
  })
})

事件

Facebox还提供了多个事件,利用它们可以更方便地编程:

  • loading.facebox
  • beforeReveal.facebox
  • reveal.facebox,或afterReveal.facebox
  • init.facebox

使用时,只需要简单地绑定某个处理函数到这些事件上就可以上,如:

$(document).bind(''reveal.facebox'', function() {/*做一些事情*/})


RabbitMQ和kafka从几个角度简单的对比

业界对于消息的传递有多种方案和产品,本文就比较有代表性的两个MQ(rabbitMQ,kafka)进行阐述和做简单的对比, 在应用场景方面, RabbitMQ,遵循AMQP协议,由内在高并发的erl...
  • joeyon
  • joeyon
  • 2017年01月25日 16:42
  • 249

概率质量函数(Probability Mass Function)和期望课程笔记

随机变量的数学定义从样本空间到实数值的映射函数。一个样本空间可以定义多个随机变量一个或几个随机变量的函数构成一个新的随机变量概率质量函数的定义pX(x)=P(X=x)=P({ω∈Ω s.t.X(ω)=...

小强的HTML5移动开发之路(41)——jqMobi中Side Menu实现(类似人人网)

记得以前在做Native App的时候类似于人人网侧边滑动的效果非常的热,很多app仿照该效果进行开发,在jqMobi中也有类似的效果被称为Side Menu.下面我们来一步一步实现该效果。 首先新建...

为什么 Facebook 活得春风得意,而人人网却半死不活?

点击上方“CSDN”,选择“置顶公众号” 关键时刻,第一时间送达! 找同学,上人人?情怀不再,营销泛滥,走错路的人人网还能重现辉煌吗? 现如今,这个曾经号称中国领先的“实名制...

使用开源的Slidingmenu库 facebook、人人网、everynote、Google+

一、SlidingMenu简介 相信大家对SlidingMenu都不陌生了,它是一种比较新的设置界面或配置界面的效果,在主界面左滑或者右滑出现设置界面效果,能方便的进行各种操作。很多优秀的应用都采用...

jqMobi基础(4)--jqMobi中Side Menu实现(类似人人网)

记得以前在做Native App的时候类似于人人网侧边滑动的效果非常的热,很多app仿照该效果进行开发,在jqMobi中也有类似的效果被称为Side Menu.下面我们来一步一步实现该效果。 首...

类似人人网的侧滑动层叠窗口实现及代码

最近由于项目需要要实现类似人人网的侧滑层叠窗口,就是在一个 activity 上能再滑动的窗口,能部分或全部遮挡住下面的view与之前的滑动功能不同,以前的滑动是采用一个 view 滑开,另一个滑入来...

类似人人网 "新鲜事"(好友动态、SNS)架构

http://blog.csdn.net/yanmingming1989/article/details/6712398 推的模式和拉的模式。两个模式区别在于什么地方?推的模式意思就是说当一...

facebook与人人网的网站后台架构对比

要问时下什么类型的站点人气最旺?答案当属SNS网站。短短几年的时间,SNS便迅速确立了Web 2.0核心的地位。用户的增长量之快更是让人咂舌,而Facebook访问量首次超越Google的消息也让人觉...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Facebox——打造类似Facebook、人人网的提示框
举报原因:
原因补充:

(最多只允许输入30个字)