一.什么是DOMtab
DOMtab是一个用javascipt制作的通用可扩展的tab切换显示隐藏内容快的web控件。
二.怎么使用DOMtab
1.在页面的
区域加上
- <script type="text/javascript" src="domtab.js"></script>
2.在页面主体的
部分加上
- <div class="domtab">
- <ul class="domtabs">
- <li><a href="#t1">Test 1</a></li>
- <li><a href="#t2">Test 2</a></li> [idea] [idea]
- [... and so on ...]
- </ul>
- <div>
- <h2><a name="t1" id="t1">Proof 1</a></h2>
- <p>Test to prove that more than one menu is possible</p>
- <p><a href="#top">back to menu</a></p>
- </div>
- <div>
- <h2><a name="t2" id="t2">Proof 2</a></h2>
- <p>Test to prove that more than one menu is possible</p>
- <p><a href="#top">back to menu</a></p>
- </div>
- [... and so on ...]
- </div>
然后定义各个class的样式就可以了，你也可以加class定义样式，但是代码的结构不能变化
3.更改javascript中控件的属性
tabClass:’domtab’, //目标区域的class名称
listClass:’domtabs’, // 列表菜单的class名称
activeClass:’active’, // 菜单激活状态下的class名称
contentElements:’div’, // 循环内容区域的元素名称
backToLinks:/#top/, // 设置返回顶部的参数
printID:’domtabprintview’, // 显示所有区域内容的id名称
showAllLinkText:’show all content’, // 显示所有区域的文字名称
三.增加向前向后按钮
1.在区域的起始class上多增加一个doprevnext
- <div class="domtab doprevnext">
- <ul class="domtabs">
- <li><a href="#t1">Test 1</a></li>
- <li><a href="#t2">Test 2</a></li>
- <li><a href="#t3">Test 3</a></li>
- <li><a href="#t4">Test 4</a></li>
- </ul>
- [... ad nauseam...]
- </div>
2.在页面里面加上下列代码
- <ul class="prevnext">
- <li class="prev"><a href="#">previous</a></li>
- <li class="next"><a href="#">next</a></li>
- </ul>
3.javascript里面的属性定义
- prevNextIndicator:'doprevnext', // 目标容器的class名称
- prevNextClass:'prevnext', // class名称
- prevLabel:'previous', // 上一页的文字
- nextLabel:'next', // 下一页的文字
- prevClass:'prev', // 上一页的class
- nextClass:'next', // 下一页的class
四.DOMtab中的样式控制
你可以强制的控制某一个元素的样式譬如显示和隐藏等等
- <script type="text/javascript">
- document.write('<style type="text/css">');
- document.write('div.domtab div{display:none;}<');
- document.write('/s'+'tyle>');
- </script>
五.下载以及演示
下载DOMtab version 3.1415927
DOMtab演示