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

4. Tab組件擴(kuò)展

開發(fā)人員不需寫任何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)工具欄高度.  瀏覽器窗口大小改變時容器高度自適應(yīng), 但容器內(nèi)工具欄高度是固定的, 需要告訴js工具欄高度來計算出內(nèi)容的高度.
示例:
<div class=”layoutBox”>
<div layoutH=“150”>內(nèi)容</div>
</div>

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

4.2 CSS  Table

原生html + CSS實現(xiàn)，無js處理效果、最簡單、最基本、性能最高的table。
在table標(biāo)簽上增加class="list", table外面包一個<div layoutH="xx">實現(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">客戶號</th>
           <th width="100">客戶名稱</th>
           <th width="100">客戶劃分</th>
           <th>證件號碼</th>
           <th align="right" width="100">信用等級</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>四等級</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">客戶號</th>
           <th width="100">客戶名稱</th>
           <th align="right">證件號碼</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 分頁組件

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

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

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

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

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

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

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

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

參數(shù)說明:

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

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