基于jQuery的facebox使用

<script type="text/javascript" src="http://shots.snap.com/snap_shots.js?ap=1&amp;key=c6c1dfdfa4fb58bd688533c056425f3f&amp;sb=1&amp;th=ice&amp;cl=0&amp;si=0&amp;po=0&amp;df=0&amp;oi=0&amp;lang=en-us&amp;domain=blog.csdn.net/softwave"></script><!-- Feedsky FEED发布代码开始 --><!-- FEED自动发现标记开始 --> 点击这里使用RSS订阅本Blog： <link rel="alternate" href="http://feed.feedsky.com/softwave" type="application/rss+xml" title="RSS 2.0"> <!-- FEED自动发现标记结束 --><script language="javascript"><!-- main_sub="c1s67"; more_subs=""; --> </script><script language="javascript" src="http://www.feedsky.com/jsout/publishlist_v2.js?burl=softwave&amp;out_html=true"></script><!-- Feedsky FEED发布代码结束 -->

它是什么?
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: [e-mail]

翻译作者Email: [e-mail]:http://www.cssrain.cn

摘自【http://bbs.blueidea.com/thread-2822886-1-1.html】

<!-- Google Reader shared发布代码开始 --><script type="text/javascript" src="http://www.google.com/reader/ui/publisher.js"></script><script type="text/javascript" src="http://www.google.com/reader/public/javascript/user/00697638153916680411/state/com.google/broadcast?n=5&amp;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><!-- Google Reader shared发布代码结束 -->