June 21, 2007
基于AJAX的Tabs实现方法
自从上次给侧边栏安装了TabPane后, 我就对此类的网页应用产生了深厚的兴趣, 昨天又把blogroll列表折叠了起来. 今天打算再介绍一个好玩的应用: 基于AJAX的Tabs.
[Demo在这里]
这是如何实现的呢? 说来真不好意思, 我介绍的这几个应用, 代码没有一行是自己写的, 都是把别人做好的东西(Ajax Tabs Content)搬到自己网站上, 就当是抛砖引玉了, 呵呵. 让我们开始吧!
首先下载ajaxtabscontent.zip,
与其他的脚本应用类似, 要在页面的head标签之间调用脚本和相应的CSS样式:
<link rel="stylesheet" type="text/css" href="ajaxtabs/ajaxtabs.css" />
<script type="text/javascript" src="ajaxtabs/ajaxtabs.js"></script>
</head>
然后, 在需要使用Tabs的地方加入以下代码, 当然不能照搬, 改为自己需要的, 并且保证所有涉及到的路径都能正确访问:
<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>
<script type="text/javascript">
//Start Ajax tabs script for UL with id="maintab" Separate multiple ids each with a comma.
startajaxtabs("maintab")
</script>
下面我们解释一些这些代码中的关键部分:
- 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")
注意: 关于调用外部页面, 只能调用同一个域名下的文件, 如果想调用另个服务器上的文件是不可行的.
另外, 如果我想点击一个链接就打开某个Tab页面该如何做呢?
调用上面这个方法就好了, tabcontentid就是ul的ID名称, tabnumber则是你想打开Tab的序号, 比如想打开第3个, 此处就应该写2, 因为序号从0开始. 具体看下面的例子:
好咯, 到此为止, 我已经介绍完了Ajax Tabs Content的使用方法, 还想再看看Demo吗? 点击这里吧.