基于jQuery的facebox使用

Facebox是一款基于jQuery的lightbox插件,支持展示图像、div或远程页面内容。使用简便,仅需通过设置超链接的rel属性为facebox即可轻松调用。支持本地资源与远程Ajax加载。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

点击这里使用RSS订阅本Blog: rel="alternate" href="http://feed.feedsky.com/softwave" type="application/rss+xml" title="RSS 2.0" />

它是什么?

facebox是一个jquery为基础的lightbox,可显示图像, divs ,或者远程页面。 它的使用简单,容易。下载js,请查看例子,然后开始享受facebox给我们带来的乐趣。

首先我们用Facebox观看图片 :
<a href="cssrain.jpg" rel="facebox">text</a>
仅仅这样就OK。

然后我们在来看 用Facebox观看div  :
<a href="#info" rel="facebox">text</a>
ok,就这样就能简单的实现facebox了。

当然在ajax横行的时代,ajax远程加载页面也是必不可少的。
我们 用Facebox加载远程的页面内容:
<a href="cssrain.html" rel="facebox">text</a>
OK,这样就能远程加载 cssrain.html 的内容,以facebox的方式显示了。

这是 FamSpam 上的截图

用法:
facebox应该导入
<script src="jquery.js" type="text/javascript"></script>
<link href="/facebox/facebox.css" _fcksavedurl=""/facebox/facebox.css"" media="screen" rel="stylesheet" type="text/css"/>
<script src="/facebox/facebox.js" type="text/javascript"></script>
jQuery(document).ready(function($) {
//超链接的rel属性是否具有facebox
  $('a[rel*=facebox]').facebox()
})

演示
演示

下载
你需要在js和css里面 加上 loading图片,和四个角的图片和边框图片。 这就是你要做的。
Download Facebox v1.0


深入研究
http://famspam.com/facebox/

感谢 & 联系
感谢Facebook的理念和风格。感谢Mindy Tchieu她在工作中对我的帮助。

facebox作者Email: chris@ozmm.org

翻译作者Email: cssrain@gmail.com  Blog: http://www.cssrain.cn

摘自【http://bbs.blueidea.com/thread-2822886-1-1.html】
 
<script type="text/javascript" src="http://www.google.com/reader/ui/publis<script type="text/javascript" src="http://www.google.com/reader/public/javascript/user/00697638153916680411/state/com.google/broadcast?n=5&callback=grc_p(%7bc%3a%22green%22%2ct%3a%22%5cu8fd9%5cu4e9b%5cu6587%5cu7ae0%5cu4e5f%5cu503c%5cu5f97%5cu4e00%5cu770b%22%2cs%3a%22false%22%7d)%3bnew%20grc"></script>se%22%7D)%3Bnew%20GRC">
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值