DWZ框架的HTML擴展

DWZ框架HTML擴展

支持HTML擴展方式來調用DWZ組件

Ajax連接擴展使用方法

<a href=」xxx」 target=「ajax」 [rel=「boxId」]>

示例: <a href="w_alert.html" target="ajax" rel="container">提示窗口</a>

dialog連接擴展使用方法

 

<a href=」xxx」 target=「dialog」 [rel=「dialogId」]>

Html標籤擴 展方式示例:

<a href="w_dialog.html" target="dialog" rel="page2">彈出窗口</a>

或

<a class="button" href="demo_page1.html" target="dialog" rel="dlg_page1" title="[自定義標題]" width="800" height="480">打開窗口一</a> 

 

JS調用方式示例:

$.pdialog.open(url, dlgId, title);

或

$.pdialog.open(url, dlgId, title, {width: 500, height: 300});

 

navTab連接擴展使用方法

<a href=」xxx」 target=「navTab」 [rel=「tabId」]>

示例: <a href="w_alert.html" target="navTab" rel="page1">提示窗口</a>

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>

 

容 器高度自適應

容器高度自適應, 只要增長擴展屬性layouth=」xx」, 單位是像素.

Layouth表 示容器內工具欄高度.  瀏覽器窗口大小改變時容器高度自適應, 但容器內工具欄高度是固定的, 須要告訴js工具 欄高度來計算出內容的高度.

示例: <div layouth=「100」>

Table擴展使用方法

在table標籤上增長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>

在 線編輯器

在textarea標籤上增長class="editor"

示例:

<textarea class="editor" name="description" rows="15" cols="80">內容</textarea>