Hot!Ajax

mootalbox中文教程

Thursday, 27 September 2007

MOOdalBox-一个html类的lightbox

MOOdalBox在mootools框架下利用ajax技术加载远程页面。它能够用来展示一些帮助文档，注册提交表单等内容。它是基于Slimbox的因此它继承了Slimbox的优良性能。压缩版的仅仅只有4.2kb（解压后又25kb，包括images，CSS，mootools 1.0）
预览：DEMO

下载：目前1.2.1版的提供下载，其他版本你可到Google Code project for MOOdalBox下载

本站源文件下载

需求：
MOOdalBox需要mootools 1.0或更新版的支持。你可在本站下载也可到mootools download page下载最新的。
安装步骤：
1.复制所有文件到你的文件夹中，MOOdalBox需要以下的文件结构，如果你改变了文件结构你必须修改css中的路径。

<p>|-css </p>
<p>|   moodalbox.css </p>
<p>|-img </p>
<p>|   closelabel.gif </p>
<p>|   loading.gif </p>
<p>|-js </p>
<p>|   mootools.js </p>
<p>|   moodalbox.js</p>

2.将moodabox.js，motools.js及moodalbox.css放到你的head中

<script type="text/javascript"   src="/js/mootools.js"></script>
<p><script   type="text/javascript" src="/js/moodalbox.js"></script> </p>
<p><link rel="stylesheet" href="/css/moodalbox.css" type="text/css"   media="screen" /></p>

3.在你要放到moodalbox显示的内容链接上加入标签rel="moodalbox"

<a href="some-page-to-load-inline.html" rel="moodalbox" title="Caption:
<p>a   description of the page that's loading.">some page</a>. </p>

其他选择：
你可在js中找到其他选择项，title可以用来对你的标题进行说明，其他选项可以通过rel来进行，例如要打开一个800×600的窗口，可以这样做：

<a href="some-page.html" rel="moodalbox 800 600"   title="Caption:
<p> a description of the page that's loading.">some   page</a></p>

如果你希望使用javascript打开moodalbox，可将代码写成：

MOOdalBox.open( // case matters
"http://www.example.com/",   // the link URL
"Some kind of caption", // the caption (link's title) - can   be blank
"500 400" // width and height of the box - can be left   blank

);

注：本文译自http://www.e-magine.ro/web-dev-and-design/36/moodalbox/

转载请注明出处

Set as favorite

Bookmark

Email This

Comments (0) add comment