DWX框架的HTML擴(kuò)展(2)

4. Tab組件擴(kuò)展

開(kāi)發(fā)人員不需寫(xiě)任何javacsript,只要使用下面的html結(jié)構(gòu)就可以.

<div class="tabs">
    <div class="tabsHeader">
       <div class="tabsHeaderContent">
           <ul>
              <li class="selected"><a href="#"><span>標(biāo)題1</span></a></li>
              <li><a href="#"><span>標(biāo)題2</span></a></li>
           </ul>
       </div>
    </div>
    <div class="tabsContent"style="height:150px;">
       <div>內(nèi)容1</div>
       <div>內(nèi)容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">
       內(nèi)容1
    </div>
    <div class="accordionHeader">
       <h2><span>icon</span>面板2</h2>
    </div>
    <div class="accordionContent">
       內(nèi)容2
    </div>
    <div class="accordionHeader">
       <h2><span>icon</span>面板3</h2>
    </div>
    <div class="accordionContent">
       內(nèi)容3
    </div>
</div>

4.1 容器高度自適應(yīng)

容器高度自適應(yīng), 只要增加擴(kuò)展屬性layoutH=”xx”, 單位是像素.
LayoutH表示容器內(nèi)工具欄高度.  瀏覽器窗口大小改變時(shí)容器高度自適應(yīng), 但容器內(nèi)工具欄高度是固定的, 需要告訴js工具欄高度來(lái)計(jì)算出內(nèi)容的高度.
示例:
<div class=”layoutBox”>
<div layoutH=“150”>內(nèi)容</div>
</div>

注意： layoutH=“150”的高度是根據(jù)含有class=”layoutBox”的父容器div動(dòng)態(tài)更新的

4.2 CSS  Table

原生html + CSS實(shí)現(xiàn)，無(wú)js處理效果、最簡(jiǎn)單、最基本、性能最高的table。
在table標(biāo)簽上增加class="list", table外面包一個(gè)<div layoutH="xx">實(shí)現(xiàn)table固定高度

<div layoutH="120">
<table class="list" width="98%">
    <thead>
       <tr>
           <th colspan="2">客戶信息</th>
           <th colspan="2">基本信息</th>
           <th colspan="3">資料信息</th>
       </tr>
       <tr>
           <th width="80">客戶號(hào)</th>
           <th width="100">客戶名稱</th>
           <th width="100">客戶劃分</th>
           <th>證件號(hào)碼</th>
           <th align="right" width="100">信用等級(jí)</th>
           <th width="100">企業(yè)性質(zhì)</th>
           <th width="100">建檔日期</th>
       </tr>
    </thead>
<tbody>
       <tr>
           <td>iso127309</td>
           <td>北京市政府咿呀喲</td>
           <td>政府單位</td>
           <td>0-0001027766351528</td>
           <td>四等級(jí)</td>
           <td>政府單位</td>
           <td>2009-05-21</td>
       </tr>
    </tbody>
</table>
</div>

5. Table擴(kuò)展

在table標(biāo)簽上增加class="table"

<table layoutH="170" class="table">
    <thead>
       <tr>
           <th width="80">客戶號(hào)</th>
           <th width="100">客戶名稱</th>
           <th align="right">證件號(hào)碼</th>
           <th width="100">建檔日期</th>
       </tr>
    </thead>
    <tbody>
       <tr>
           <td>iso127309</td>
           <td>北京市政府</td>
           <td>0-0001027766351528</td>
           <td>2009-05-21</td>
       </tr>
    </tbody>
</table>

5.1 在線編輯器
在textarea標(biāo)簽上增加class="editor"
示例:

<textarea class="editor" name="description" rows="15" cols="80">內(nèi)容</textarea>

5.2 分頁(yè)組件

分頁(yè)思路服務(wù)器返回當(dāng)前頁(yè)的數(shù)據(jù)，總條數(shù)，再由js來(lái)生成分頁(yè)標(biāo)簽。分頁(yè)是配合服務(wù)器端來(lái)處理的, 不是存js做的分頁(yè)。
因?yàn)槿绻麛?shù)據(jù)量很大，比如有好幾百頁(yè)，存js分頁(yè)就是悲劇了，存js分頁(yè)是必須一次載入所有數(shù)據(jù)，性能很慢。
分頁(yè)組件參數(shù)要由服務(wù)器傳過(guò)來(lái)targetType，totalCount，numPerPage，pageNumShown，currentPage
框架會(huì)自動(dòng)把下面的form中pageNum修改后，ajax重新發(fā)請(qǐng)求。下面這個(gè)form是用來(lái)存查詢條件的

<form id="pagerForm" action="xxx" method="post">
    <input type="hidden" name="pageNum"value="1" />/><!--【必須】value=1可以寫(xiě)死-->
    <input type="hidden" name="numPerPage"value="20" /><!--【可選】每頁(yè)顯示多少條-->
    <input type="hidden" name="orderField"value="xxx" /><!--【可選】查詢排序-->
    <input type="hidden" name="orderDirection" value="asc" /><!--【可選】升序降序-->

    <!--【可選】其它查詢條件，業(yè)務(wù)有關(guān)，有什么查詢條件就加什么參數(shù)。
    也可以在searchForm上設(shè)置屬性rel=”pagerForm”，js框架會(huì)自動(dòng)把searchForm搜索條件復(fù)制到pagerForm中-->

<input type="hidden" name="name" value="xxx" />
    <input type="hidden" name="status" value="active" />
    ……
</form>

分頁(yè)組件處理分頁(yè)流程：
1) pagerForm中緩存了當(dāng)前的查詢條件，加上一個(gè)pageNum字段
2) 點(diǎn)擊分頁(yè)時(shí)動(dòng)態(tài)修改pageNum,重新提交pagerForm
分頁(yè)組件使用方法：

<divclass="pagination" targetType="navTab"totalCount="200" numPerPage="20"pageNumShown="10" currentPage="1"></div>

測(cè)試方法，currentPage從1改為2，就是第2頁(yè)了，把上面那句改為：

<divclass="pagination" targetType="navTab"totalCount="200" numPerPage="20"pageNumShown="10" currentPage="2"></div>

參數(shù)說(shuō)明:

• targetType: navTab或dialog，用來(lái)標(biāo)記是navTab上的分頁(yè)還是dialog上的分頁(yè)
  
• totalCount: 總條數(shù)      
  
• numPerPage: 每頁(yè)顯示多少條
  
• pageNumShown: 頁(yè)標(biāo)數(shù)字多少個(gè)
  
• currentPage: 當(dāng)前是第幾頁(yè)
  

注意：
服務(wù)器端返回一個(gè)頁(yè)面碎片，其中包括pagerForm, table, 和分頁(yè)的div。只要把這個(gè)頁(yè)面碎片組裝好就行。