基于AJAX的Tabs实现方法 at catch the digital flow

June 21, 2007

基于AJAX的Tabs实现方法

Ajax Tabs
自从上次给侧边栏安装了TabPane后, 我就对此类的网页应用产生了深厚的兴趣, 昨天又把blogroll列表折叠了起来. 今天打算再介绍一个好玩的应用: 基于AJAX的Tabs.
[Demo在这里]

这是如何实现的呢? 说来真不好意思, 我介绍的这几个应用, 代码没有一行是自己写的, 都是把别人做好的东西(Ajax Tabs Content)搬到自己网站上, 就当是抛砖引玉了, 呵呵. 让我们开始吧!

首先下载ajaxtabscontent.zip,
与其他的脚本应用类似, 要在页面的head标签之间调用脚本和相应的CSS样式:

然后, 在需要使用Tabs的地方加入以下代码, 当然不能照搬, 改为自己需要的, 并且保证所有涉及到的路径都能正确访问:

<ul id="maintab" class="shadetabs">
<li class="selected"><a href="#default" rel="ajaxcontentarea">Intro</a></li>
<li><a href="external.htm" rel="ajaxcontentarea">Bird</a></li>
<li><a href="external2.htm" rel="ajaxcontentarea">Dog</a></li>
<li><a href="external3.htm" rel="ajaxcontentarea">Cat</a></li>
<li><a href="external4.htm" rel="ajaxcontentarea" rev="content.css, content.js">Sea Otter</a></li>
</ul>

<div id="ajaxcontentarea" class="contentstyle">
<p>这些内容以非AJAX的方法直接嵌入默认标签中.</p>
</div>

下面我们解释一些这些代码中的关键部分:

id="maintab", class="shadetabs": ID必须唯一, 它用来指定 UL 元素, class="shadetabs" 用来调用此处的CSS样式.
class="selected": 添加到 LI 标签上用来指定页面加载时默认处于被选择状态的标签, 与此标签相关的内容也会自动加载. 这个不是必选项.
href="page to load": 使用AJAX调用外部页面, 可以是.htm, .txt或是.php等等, 如果希望Tab直接调用"默认内容", 需要使用"#default"关键字.
rel="ajaxcontentarea": 添加在链接元素中用来指定同个ID的DIV容器要装载的页面.
rev="objects to load": 也添加在链接元素用来为外部页面装载JS脚本或CSS样式表, 用逗号分隔多个文件. 不是必选项.
最后, 在所有AJAX的Tabs内容代码之后调用startajaxtabs("maintab")函数来激活脚本, "maintab"是整个Tab的ID, 如果在同一个页面中想使用多个Tab, 需要把每个ID都传递给函数, 例如:

startajaxtabs("maintab", "maintab2")