DWZ框架的HTML扩展

为什么80%的码农都做不了架构师？>>>   

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>

转载于:https://my.oschina.net/dwz/blog/4162