DWZ框架的HTML扩展

原创
2010/04/27 20:01
阅读数 4.7K

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>

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
2 收藏
1
分享
返回顶部
顶部