全文预览已结束
下载本文档
版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
基于AJAX的Tabs实现方法自从上次给侧边栏安装了TabPane后, 我就对此类的网页应用产生了深厚的兴趣, 昨天又把blogroll列表折叠了起来. 今天打算再介绍一个好玩的应用: 基于AJAX的Tabs.Demo在这里这是如何实现的呢? 说来真不好意思, 我介绍的这几个应用, 代码没有一行是自己写的, 都是把别人做好的东西(Ajax Tabs Content)搬到自己网站上, 就当是抛砖引玉了, 呵呵. 让我们开始吧! 首先下载ajaxtabscontent.zip,与其他的脚本应用类似, 要在页面的head标签之间调用脚本和相应的CSS样式:然后, 在需要使用Tabs的地方加入以下代码, 当然不能照搬, 改为自己需要的, 并且保证所有涉及到的路径都能正确访问:IntroBirdDogCatSea Otter 这些内容以非AJAX的方法直接嵌入默认标签中./Start Ajax tabs script for UL with id=maintab Separate multiple ids each with a comma.startajaxtabs(maintab)下面我们解释一些这些代码中的关键部分: 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页面该如何做呢?expandtab(tabcontentid, tabnumber)调用上面这个方法就好了, tabcontentid就是ul的ID名称, tabnumber则是你想打开Tab的序号, 比如想打开第3个, 此处就应该写2, 因为序号从0开始. 具体看下面的例子:选择ID为maintab的面板上第3
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
评论
0/150
提交评论