首页 > Dhtmlx > dhtmlxTabBar中文帮助文档

dhtmlxTabBar中文帮助文档

关于dhtmlx TabBar的学习
tabBar 是一个页签,它属于容器级的组件,在项目中经常使用到,比如一个项目中分若干个模块,就可以将每个模块放在页签中来显示。
1、 导入资源文件

<link rel="stylesheet" type="text/css"
       href="./tabbar/codebase/dhtmlxtabbar.css"/>
<script src="../codebase/js/dhtmlxcommon.js"></script>
<script src="../codebase/js/dhtmlxtabbar.js"></script>
<script src="../codebase/js/dhtmlxtabbar_start.js"></script>

2、在哪里使用?
位置:div中使用,要注意的是最好给div中添加style属性给div区域限制大小。
那么怎么得到和使用页签呢?
有这样以下几点:
1、通过读取xml文件获得tabbar对象

<div id="a_tabbar" style="width:400px;height:100px"></div>
<script>
tabbar=new dhtmlXTabBar("a_tabbar","top");
//其中第一个参数是div的id(也就是说你要将tabbar放在那个div里)
//第二个参数是页签在页面的显示的格式,如Top, bottom, right 和left四种属性
tabbar.setImagePath("../../imgs/");
tabbar.loadXML("tabs.xml");
</script>
---------tabs.xml---------
<?xml version="1.0"?>
<tabbar>
<row>
<tab id="a1" width='200px' selected="1">Profiles
<content>
<![CDATA[<img src='../images/page_a.gif'>]]>
</content>
</tab>
<tab id="a2" width='200px'>Settings
<content>
<![CDATA[<img src='../images/page_b.gif'>]]>
</content>
</tab>
</row>
</tabbar>

貌似这种方法能实现页签,但我觉得要是用这种方法实现组件的组合,就不太好了,因为在页面里直接组合比使用配置文件的要容易的多,不过要是显示一个页面在页签里或者只在页签里显示图片之类的,那么配置文件就是最好的选择。
2、在tabbar中使用ajax技术实现页面的访问(在配置文件里设置ajax)
解释:DHL框架中封装了ajax异步通信实现页面的loading。
使用方法:在页面创建dhtmlXTabBar对象,设置有关信息,然后加载配置文件。
在配置文件如下配置

<?xml version="1.0"?>
<tabbar  hrefmode="ajax">
//ajax 是从xml里载入内容 ajax-html从html载入内容iframe
<row>
<tab id="b1" width='100px' selected="1"  href="dhxtabbar.html">谷歌</tab>
<tab id="b2" width='100px' href="test.html">雅虎</tab>
</row>
</tabbar>

3、在页签中使用ajax技术实现页面访问(在页面实现ajax)
解释:在页面使用ajax,是在容器里(div)设置hrefmode=”ajax”,就可以使用ajax技术异步加载页面
其在页面中代码为:

<div hrefmode="ajax" id="a_tabbar" imgpath="../../codebase/imgs/"
style="width:390px; height:390px;" skinColors="#FCFBFC,#F4F3EE" >
<div id="b1" width="100" name="谷歌" href="test.html"></div>
<div id="b2" width="100" name="雅虎" href="dhxAjax.html"></div>
</div>

4、页签的状态(页签的方向有top、bottom、left、right四种),
重要的api:

tabbar.addTab("页签ID","页签名称","页签的大小");//增加一个页签
tabbar.setImagePath("图片地址");//设置页签的图片
tabbar.setHrefMode("iframes");
//iframes时,显示当前页签里面的组件,否则只显示当前一个页签
Hrefmode的可能值有:
Iframe ----建立单一的iframe
Iframes为每一个tab建立iframe并一次载入所有内容
Iframes-on-demand---只在启用tab时建立iframe
tabbar.setTabActive("s0",true,false);//设置当前显示的页签
tabbar.setContent("页签id","页签中的内容");
//其中页签内容可以是 页面、div或其它容器里的内容都可以。
tabbar.setenableAutoReSize(true,true);
tabbar.hideTab(tabId,true);//如果时true被隐藏tab的选项被移动到最近的一个。

5.关于tabbar和tab内容区域大小的api

Tabbar.enableAutoSize(true,true);//依tab里面的内容大小自动调整大小。
Tabbar.enableAutoReSize(true);//依tabbar大小来自动调整页签大小。
tabbar.setSize("450px","400px",true);
//设置tabbar大小 第三个字段表示被设定的尺寸为tab的内容大小

6、页签里能放什么组件,组件该怎么放?
该放什么组件:DHX组件中有的组件都能放到tabbar中
怎么放:

tabbar.setContent(“id”,”内容”);
//id指的是你想在那个页签放组件的页签的id,后者是放的内容
//(注释:这里的内容指的是可以放一个div里的内容,也可以是一个其它资源如一个页面)

除非注明,文章为IT热血青年原创,欢迎转载!转载请注明本文地址,谢谢。
本文地址:http://blog.itblood.com/dhtmlx-tabbar-chinese-help-documentation.html

  1. 本文目前尚无任何评论.
  1. 本文目前尚无任何 trackbacks 和 pingbacks.