一: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>