DWZ组件

navTab链接扩展

<a href=”xxx” target=“navTab” [rel=“tabId”]>

示例:

<a href="url" target="navTab" >默认页面</a>

<a href="url" target="navTab" rel="page1" title="自定义标签名" fresh="false">自定义页面</a>

<a href="url" target="navTab" external="true">iframe方式打开</a>

target=navTab: 自动关联调用navTab组件

rel: 为navtab的ID值，后续可以用来重载该页面时使用，如当前页新增或删除数据可以通过该ID进行通知JS重载。注意rel的值区分大小写.

fresh: 表示重复打开navTab时是否重新加载数据

external: 为external="true"或者href是外网连接时，以iframe方式打开navTab页面

Js调用

navTab.openTab(tabid, url, { title:”New Tab”, fresh:false, data:{} });

其中data:{} json格式的数据

Tab组件扩展

开发人员不需写任何javacsript, 只要使用下面的html结构就可以.

<div class="tabs">

      <div class="tabsHeader">

            <div class="tabsHeaderContent">

                  <ul>

                        <li class="selected"><a href="#"><span>标题1</span></a></li>

                        <li><a href="#"><span>标题2</span></a></li>

                  </ul>

            </div>

      </div>

      <div class="tabsContent" style="height:150px;">

            <div>内容1</div>

            <div>内容2</div>

      </div>

      <div class="tabsFooter">

            <div class="tabsFooterContent"></div>

      </div>

</div>

Accordion组件

<div class="accordion" [fillSpace=”xxxKey”]>

      <div class="accordionHeader">

            <h2><span>icon</span>面板1</h2>

      </div>

      <div class="accordionContent" style="height:200px">

            内容1

      </div>

      <div class="accordionHeader">

            <h2><span>icon</span>面板2</h2>

      </div>

      <div class="accordionContent">

            内容2

      </div>

      <div class="accordionHeader">

            <h2><span>icon</span>面板3</h2>

      </div>

      <div class="accordionContent">

            内容3

      </div>

</div>

容器高度自适应

容器高度自适应, 只要增加扩展属性layoutH=”xx”, 单位是像素.

LayoutH表示容器内工具栏高度.  浏览器窗口大小改变时容器高度自适应, 但容器内工具栏高度是固定的, 需要告诉js工具栏高度来计算出内容的高度.

示例:

<div class=”layoutBox”>

<div layoutH=“150”>内容</div>

</div>

注意： layoutH=“150”的高度是根据含有class=”layoutBox”的父容器div动态更新的