DWZ HTML扩展

一：Tree 扩展

<ul class="tree [treeFolder treeCheck [expand|collapse]]"oncheck="kkk">

<li><ahref="#"target="navTab"rel="main"tname="name"tvalue="value"checked="true">第一级菜单项 A</a>

            <ul>

                  <li><ahref="#"target="dialog"rel="dialog1"tname="name"tvalue="value"checked="true">第二级菜单项 A</a></li>

                  <li><ahref="#">第二级菜单项 B</a></li>

                  <li><ahref="#">第二级菜单项 C</a>

                        <ul>

                              <li><ahref="#">第三级菜单项 A</a></li>

                              <li><ahref="#">第三级菜单项 B</a></li>

                        </ul>

                  </li>

            </ul>

      </li>

      <li><ahref="#">第一级菜单项 B</a></li>

</ul>

 

 1、树结构是按照<ul><li>嵌套的，将最顶级的<ul>以class=”tree”标识即可。

       2、 treeFolder, treeCheck, expand|collapse则为可选的，treeFolder:在所有树节点前加上Icon图标，treeCheck:在所有树节点前加上checkbox，此时需要在<a> 加上三个

扩展属性tname=””, tvalue=””, checked, 其中tname与tvalue对应该checkbox的name 与value属性, checked表示checkbox的默认状态是否checked. 

       3、expand与collapse：expand表示树的所有第一级节点默认是展开状态，collapse则表示所有第一级节点默认为折叠状态，当expand与collapse都没有时默认则会展开第一个节点。 

       4、扩展属性oncheck是自定义函数, 用来接收点击checkbox时返回值, 当点击非子树节点checkbox时返回数据格式为:

{checked:true|false,items:{name:name, value:value}}, 当点击了树节点checkbox时, 此子树节点下所有的checkbox都将选中, 同时返回

此子树节点下所有的checkbox的值, 格式为{checked:true|false, items:{{name:name, value:value}, {name:name, value:value}……}} 。

二：Panel 扩展

<div class="panel [close collapse]" [defH="200"|minH=”100”]>

<h1>标题</h1>

      <div>

            内容

      </div>

</div>

顶层div 以class=”panel”标识即可, 其中的<h1>为panel的标题,  <h1>后的<div>则是放置内容的容器.

Class 中的close 与collapse为可选项, close表示panel默认为关闭状态, 没有则默认为打开状态. collapse 再表示此panel是否为可折叠的panel, 没有则

此panel不可折叠. 扩展属性defH则表示panel 内容部分的固定高度, 没有则panel内容部分的高度为实际内容的高度, minH可以指定panel内容部分的最小高度.

三：日志控件

<input type="text"name="xxx" class="date" [pattern="yyyy-MM-dd"] [yearstart="-80"] [yearend="5"]/>

日期格式：

 * Field        | Full Form          | Short Form

 * -------------+--------------------+-----------------------

 * Year         | yyyy (4 digits)   |yy (2 digits), y (2 or4digits)

 * Month        | MMM (name orabbr.)|MM (2 digits), M (1 or2digits)

 *             |NNN (abbr.)       |

 * Day of Month|dd (2 digits)      | d (1or2 digits)

 * Day of Week |EE (name)         | E (abbr)

 * Hour (1-12)  | hh (2digits)     |h (1 or 2digits)

 * Hour (0-23)  | HH (2digits)     |H (1 or 2digits)

 * Hour (0-11)  | KK (2digits)     |K (1 or 2digits)

 * Hour (1-24)  | kk (2digits)     |k (1 or 2digits)

 * Minute       | mm (2 digits)     |m (1 or 2digits)

 * Second       | ss (2 digits)     |s (1 or 2digits)

 * AM/PM        | a                  |

示例：

<p>

      <label>默认格式：</label>

      <inputtype="text"name="date1" class="date"/>

      <aclass="inputDateButton"href="#">选择</a>

</p>

<p>

      <label>定义年份：</label>

      <inputtype="text"name="date2" class="date"yearstart="-80"yearend="5"/>

      <aclass="inputDateButton"href="#">选择</a>

</p>

<p>

      <label>自定义日期格式：</label>

      <inputtype="text"name="date3" class="date"pattern="yyyy/MM/dd"/>

      <aclass="inputDateButton"href="#">选择</a>

</p>

<p>

      <label>自定义日期格式：</label>

      <inputtype="text"name="date5" class="date"pattern="dd/MM/yy"/>

      <aclass="inputDateButton"href="#">选择</a>

</p>

<p>

      <label>自定义日期+时间：</label>

      <inputtype="text"name="date7" class="date"pattern="yyyy年MM月dd日 HH:mm:ss" />

      <aclass="inputDateButton"href="#">选择</a>

</p>

<p>

      <label>自定义日期+时间：</label>

      <inputtype="text"name="date8" class="date"pattern="yyyy年MM月dd日 HH:mm" />

      <aclass="inputDateButton"href="#">选择</a>

</p>

<p>

      <label>自定义日期+时间：</label>

      <inputtype="text"name="date9" class="date"pattern="y年M月d日HH点"/>

      <aclass="inputDateButton"href="#">选择</a>

</p>

四：url变量变换

HTML扩展方式nabTab,dialog,nabTabTodo的url支持变量替换。例如：__URL__/edit/id/{xxx}大括号内的xxx就是变量名，主要功能

是结合table组件一起使用， 

删除、编辑、修改密码使用了变量{sid_user}

<tbody>中的<tr target={sid_user} rel={$vo['id']}/>

当选中一行时,tr上的rel值会自动替换到url变量中.

注意url变量名{sid_user}和tr的target="sid_user"保持一致.

 

代码示例：

    <a class="delete" href="__URL__/foreverdelete/id/{sid_user}/navTabId/__MODULE__"target="navTabTodo"title="你确定要删除

吗？"warn="请选择用户"><span>删除</span></a> 

<a class="edit" href="__URL__/edit/id/{sid_user}"target="dialog"mask="true"warn="请选择用户"><span>编辑</span></a> 

<a class="icon" href="__URL__/password/id/{sid_user}"target="dialog"mask="true"warn="请选择用户"><span>修改密码</span></a> 

<table class="list" width="100%" layoutH="116">

      <thead>

      <tr>

            <thwidth="60">编号</th>

            <thwidth="100">用户名</th>

            <th>昵称</th>

            <th>Email</th>

            <thwidth="100">添加时间</th>

            <thwidth="120">上次登录</th>

            <thwidth="80">登录次数</th>

            <thwidth="80">状态</th>

      </tr>

      </thead>

      <tbody>

      <volistid="vo"name="list">

            <trtarget="sid_user"rel="{$vo['id']}">

                  <td>{$vo['id']}</td>

                  <td>{$vo['account']}</td>

                  <td>{$vo['nickname']}</td>

                  <td>{$vo['email']}</td>

                  <td>{$vo['create_time']|date="Y-m-d",###}</td>

                  <td>{$vo['last_login_time']|date="Y-m-d H:i:s",###}</td>

                  <td>{$vo['login_count']}</td>

                  <td>{$vo['status']|showStatus=$vo['id']}</td>

            </tr>

      </volist>

      </tbody>

</table>