DWZ框架的基本使用
2015-04-13 19:39
253 查看
1.HTML 扩展
1.A 链接扩展
<a href="w_alert.html" target="ajax" rel="container">提示窗口</a>
<a href="user.do?method=remove" target="ajaxTodo">删除</a>
<a href="user.do?method=remove" target="ajaxTodo" title=" 确定要删除吗?">删除</a>
<a href="w_dialog.html" target="dialog" rel="page2">弹出窗口</a> A所指向页面将会在dialog弹出层中打开,rel标识此弹出层的ID,rel为可选项。
href指向链接的地址
targer链接的显示方式
ajax为无刷新方式 ajaxTodo为无属性操作删除的时候提醒是否删除 dialog为以弹出框的形式显示链接的页面 navTab在当前的面板在增加一个tab
rel为 navtab 的 ID 值，后续可以用来重载该页面时使用
title为新弹出窗口的标题
Max 属性表示此dialog打开时默认最大化,
mask表示打开层后将背景遮盖.
maxable: dialog 是否可最大化，
minable: dialog 是否可最小化
resizable: dialog 是否可变大小
drawable: dialog 是否可拖动
width: dialog 打开时的默认宽度
height: dialog 打开时默认的高度
fresh: 重复打开dialog时是否重新载入数据，默认值true,
close: 关闭dialog时的监听函数，需要有boolean类型的返回值，
param: close监听函数的参数列表，以json格式表示，例{msg:’message’}
fresh: 表示重复打开 navTab 时是否重新加载数据
external: 为 external="true"或者 href 是外网连接时，以 iframe 方式打开 navTab 页面
2.Tab 组件
<div class="tabs">
<div class="tabsHeader"> <!-- tab头部内容 -->
<div class="tabsHeaderContent">
<ul>
<li class="selected"><a href="#"><span>标题1</span></a></li>
<li><a href="#"><span>标题2</span></a></li>
<li><a href="#"><span>标题3</span></a></li>
<li><a href="#"><span>标题4</span></a></li>
</ul>
</div>
</div>
<div class="tabsContent" style="height: 350px;"> <!-- tab所对应panel部分的内容 -->
<div>内容1</div>
<div>内容2</div>
<div>内容3</div>
<div>内容4</div>
</div>
<div class="tabsFooter"> <!-- tab脚部 -->
<div class="tabsFooterContent"></div>
</div>
</div>
3.Accordion 组件
<div class="accordion" [fillSpace=”xxxKey”]>
<div class="accordionHeader">
<h2>
<span>Folder</span>面板1
</h2>
</div>
<div class="accordionContent" layoutH="75px">内容1</div>
<div class="accordionHeader">
<h2>
<span>icon</span>面板2
</h2>
</div>
<div class="accordionContent" layoutH="75px">内容2</div>
<div class="accordionHeader">
<h2>
<span>icon</span>面板3
</h2>
</div>
<div class="accordionContent" layoutH="75px">内容3</div>
</div>
注释:容器高度自适应, 只要增加扩展属性 layoutH=”xx”, 单位是像素
4.CSS Table原生Table
<div layoutH="120">
<table class="list" width="100%">
<thead>
<tr>
<th colspan="2">客户信息</th>
<th colspan="2">基本信息</th>
<th colspan="3">资料信息</th>
</tr>
<tr>
<th width="80">客户号</th>
<th width="100">客户名称</th>
<th width="100">客户划分</th>
<th>证件号码</th>
<th width="100">信用等级</th>
<th width="100">企业性质</th>
<th width="100">建档日期</th>
</tr>
</thead>
<tbody>
<tr>
<td>iso127309</td>
<td>北京市政府咿呀哟</td>
<td>政府单位</td>
<td>0-0001027766351528</td>
<td>四等级</td>
<td>政府单位</td>
<td>2009-05-21</td>
</tr>
</tbody>
</table>
</div>
5.在线编辑器
<div class="unit">
<textarea class="editor" name="description" rows="8" cols="100"
upLinkUrl="upload.php" upLinkExt="zip,rar,txt"
upImgUrl="upload.php" upImgExt="jpg,jpeg,gif,png"
upFlashUrl="upload.php" upFlashExt="swf"
upMediaUrl="upload.php"upMediaExt:"avi">
<strong>xheditor + 文件上传</strong><br />
</textarea>
</div>
注释:
upLinkUrl:超链接上传接口地址
upLinkExt:超链接本地上传扩展限制 【可选】【默认值： zip,rar,txt】
upImgUrl:图片上传接口地址
upImgExt:图片本地上传扩展限制 【可选】【默认值：jpg,jpeg,gif,png】
upFlashUrl:动画上传接口地址
upFlashExt:动画本地上传扩展限制 【可选】【默认值： swf】
upMediaUrl:视频上传接口地址
upMediaExt:视频本地上传扩展限制 【可选】【默认值： avi】
tools工具栏的显示方式
mfull多行完全模式
simple简单模式
mini迷你模式
6.分页组件
<div class="pagination" targetType="navTab" totalCount="200"
numPerPage="20" pageNumShown="10" currentPage="1">
</div>
<form id="pagerForm" action="xxx" method="post">
<!--【必须】 value=1可以写死-->
<input type="hidden" name="pageNum" value="1" />
<!--【可选】每页显示多少条-->
<input type="hidden" name="numPerPage" value="20" />
<!--【可选】查询排序-->
<input type="hidden" name="orderField" value="xxx" />
<!--【可选】升序降序-->
<input type="hidden" name="orderDirection" value="asc" />
<!--【可选】其它查询条件，业务有关，有什么查询条件就加什么参数。也可以在searchForm上设置属性rel=”pagerForm”， js框架会自动把searchForm搜索条件复制到pagerForm中 -->
<input type="hidden" name="name" value="xxx" /> <input type="hidden" name="status" value="active" />
</form>
注释:
targetType: navTab 或 dialog，用来标记是 navTab 上的分页还是 dialog 上的分页
totalCount: 总条数
numPerPage: 每页显示多少条
pageNumShown: 页标数字多少个
currentPage: 当前是第几页
7.Excel表格导出
<a class="icon" href="doc/dwz-team.xls" target="dwzExport" targetType="navTab" title=" 实要导出这些记录吗?">导出 EXCEL</a>
8.A 按钮组件的使用
<a class="button" href="javascript:;"><span>按钮</span></a>
9.文本框 扩展(多行文本框结构相似)
1.提示信息
<input name="field2" type="text" alt="提示信息" />
2.必填
<input name="field2" type="text" class="required" alt="提示信息" />
3.错误
<input class="error" name="field4" type="text" />
4.只读
<input readonly="true" name="field5" type="text" />
5.禁用
<input disabled="true" name="field5" type="text" />
10.Tree 组件
<ul class="tree treeFolder treeCheck expand collapse" oncheck="kkk">
<li>
<a>框架面板</a>
<ul>
<li><a tname="name" tvalue="value1" checked="true">我的主页</a></li>
<li><a tname="name" tvalue="value2">页面一</a></li>
<li><a tname="name" tvalue="value3">替换页面一</a></li>
<li><a tname="name" tvalue="value4">页面二</a></li>
<li><a tname="name" tvalue="value5">页面三</a></li>
</ul>
</li>
<li>
<a tname="name" tvalue="test1">Test 1</a>
<ul>
<li><a tname="name" tvalue="test1.1">Test 1.1</a>
<ul>
<li><a tname="name" tvalue="test1.1.1" checked="true">Test1.1.1</a></li>
<li><a tname="name" tvalue="test1.1.2" checked="false">Test1.1.2</a></li>
</ul>
</li>
<li><a tname="name" tvalue="test1.2" checked="true">Test1.2</a></li>
</ul>
</li>
</ul>
注释: 座位普通的Tree组件class="tree"即可
treeFolder 枝干前带文件夹图标
treeCheck 枝干前带checkbox选择框
expand 树为折展开状态
collapse 树为折叠状态(默认为展开状态)
11.panel 组件
<div class="panel close collapse" [defH="200"|minH=”100”] >
<h1>标题</h1>
<div>内容</div>
</div>
12.日历控件
<input type="text" name="date7" class="date" pattern="yyyy年MM月dd日" /> //只能读取到年月日
<input type="text" name="date7" class="date" dateFmt="yyyy年MM月dd日 HH:mm:ss" /> //能精确到时分秒
<a class="inputDateButton" href="javascript:;">选择</a>
13.全选/反选
<label><input type="checkbox" name="c1" value="1" />选择1</label>
<label><input type="checkbox" name="c1" value="2" />选择2</label>
<label><input type="checkbox" name="c1" value="3" />选择3</label>
<input type="checkbox" class="checkboxCtrl" group="c1" />全选
<button type="button" class="checkboxCtrl" group="c1" selectType="invert">反选</button>
<a class="delete" target="ajaxTodo" href="${ctx}/subscribe/delete/{slt_objId}" title="你确定要删除吗?"><span>单个删除</span></a>
<a class="delete" target="aselectedTodo" href="${ctx}/subscribe/delete" rel="ids" title="你确定要删除吗?"><span>批量删除</span></a>
14.上传组件的使用
<input id="testFileInput2" type="file" name="image2"
uploaderOption="{
swf:'static/dwz/uploadify/scripts/uploadify.swf',
uploader:'doc/ajaxDone.html',
formData:{PHPSESSID:'xxx', ajax:1},
queueID:'fileQueue',
buttonImage:'static/dwz/uploadify/img/add.jpg',
buttonClass:'my-uploadify-button',
width:102,
auto:false
}"
/>
<div id="fileQueue" class="fileQueue"></div>
<input type="image" src="static/dwz/uploadify/img/upload.jpg" onclick="$('#testFileInput2').uploadify('upload', '*');"/>
<input type="image" src="static/dwz/uploadify/img/cancel.jpg" onclick="$('#testFileInput2').uploadify('cancel', '*');"/>
15.查找带回的使用
<label>部门名称：</label>
<input type="hidden" name="orgLookup.id" value="${orgLookup.id}"/>
<input type="text" class="required" name="orgLookup.orgName" value="" suggestFields="orgNum,orgName" suggestUrl="demo/database/db_lookupSuggest.html" lookupGroup="orgLookup" />
<a class="btnLook" href="demo/database/dwzOrgLookup.html" lookupGroup="orgLookup">查找带回</a>
<input type="hidden" name="userId" id="userId" value="${address.userId }"/>
<input type="text" name="userName" id="userName" readonly="readonly" value="${user.userName }" style="float:left;"/>
<a class="btnLook" href="${ctx}/user/list?type=lookup" lookupGroup="" width="500" height="380">用户选择</a>
-1:取消按钮
<button type="button" class="close">取消</button>
-2:页面的内容区域
<div class="pageContent"></div>
1.A 链接扩展
<a href="w_alert.html" target="ajax" rel="container">提示窗口</a>
<a href="user.do?method=remove" target="ajaxTodo">删除</a>
<a href="user.do?method=remove" target="ajaxTodo" title=" 确定要删除吗?">删除</a>
<a href="w_dialog.html" target="dialog" rel="page2">弹出窗口</a> A所指向页面将会在dialog弹出层中打开,rel标识此弹出层的ID,rel为可选项。
href指向链接的地址
targer链接的显示方式
ajax为无刷新方式 ajaxTodo为无属性操作删除的时候提醒是否删除 dialog为以弹出框的形式显示链接的页面 navTab在当前的面板在增加一个tab
rel为 navtab 的 ID 值，后续可以用来重载该页面时使用
title为新弹出窗口的标题
Max 属性表示此dialog打开时默认最大化,
mask表示打开层后将背景遮盖.
maxable: dialog 是否可最大化，
minable: dialog 是否可最小化
resizable: dialog 是否可变大小
drawable: dialog 是否可拖动
width: dialog 打开时的默认宽度
height: dialog 打开时默认的高度
fresh: 重复打开dialog时是否重新载入数据，默认值true,
close: 关闭dialog时的监听函数，需要有boolean类型的返回值，
param: close监听函数的参数列表，以json格式表示，例{msg:’message’}
fresh: 表示重复打开 navTab 时是否重新加载数据
external: 为 external="true"或者 href 是外网连接时，以 iframe 方式打开 navTab 页面
2.Tab 组件
<div class="tabs">
<div class="tabsHeader"> <!-- tab头部内容 -->
<div class="tabsHeaderContent">
<ul>
<li class="selected"><a href="#"><span>标题1</span></a></li>
<li><a href="#"><span>标题2</span></a></li>
<li><a href="#"><span>标题3</span></a></li>
<li><a href="#"><span>标题4</span></a></li>
</ul>
</div>
</div>
<div class="tabsContent" style="height: 350px;"> <!-- tab所对应panel部分的内容 -->
<div>内容1</div>
<div>内容2</div>
<div>内容3</div>
<div>内容4</div>
</div>
<div class="tabsFooter"> <!-- tab脚部 -->
<div class="tabsFooterContent"></div>
</div>
</div>
3.Accordion 组件
<div class="accordion" [fillSpace=”xxxKey”]>
<div class="accordionHeader">
<h2>
<span>Folder</span>面板1
</h2>
</div>
<div class="accordionContent" layoutH="75px">内容1</div>
<div class="accordionHeader">
<h2>
<span>icon</span>面板2
</h2>
</div>
<div class="accordionContent" layoutH="75px">内容2</div>
<div class="accordionHeader">
<h2>
<span>icon</span>面板3
</h2>
</div>
<div class="accordionContent" layoutH="75px">内容3</div>
</div>
注释:容器高度自适应, 只要增加扩展属性 layoutH=”xx”, 单位是像素
4.CSS Table原生Table
<div layoutH="120">
<table class="list" width="100%">
<thead>
<tr>
<th colspan="2">客户信息</th>
<th colspan="2">基本信息</th>
<th colspan="3">资料信息</th>
</tr>
<tr>
<th width="80">客户号</th>
<th width="100">客户名称</th>
<th width="100">客户划分</th>
<th>证件号码</th>
<th width="100">信用等级</th>
<th width="100">企业性质</th>
<th width="100">建档日期</th>
</tr>
</thead>
<tbody>
<tr>
<td>iso127309</td>
<td>北京市政府咿呀哟</td>
<td>政府单位</td>
<td>0-0001027766351528</td>
<td>四等级</td>
<td>政府单位</td>
<td>2009-05-21</td>
</tr>
</tbody>
</table>
</div>
5.在线编辑器
<div class="unit">
<textarea class="editor" name="description" rows="8" cols="100"
upLinkUrl="upload.php" upLinkExt="zip,rar,txt"
upImgUrl="upload.php" upImgExt="jpg,jpeg,gif,png"
upFlashUrl="upload.php" upFlashExt="swf"
upMediaUrl="upload.php"upMediaExt:"avi">
<strong>xheditor + 文件上传</strong><br />
</textarea>
</div>
注释:
upLinkUrl:超链接上传接口地址
upLinkExt:超链接本地上传扩展限制 【可选】【默认值： zip,rar,txt】
upImgUrl:图片上传接口地址
upImgExt:图片本地上传扩展限制 【可选】【默认值：jpg,jpeg,gif,png】
upFlashUrl:动画上传接口地址
upFlashExt:动画本地上传扩展限制 【可选】【默认值： swf】
upMediaUrl:视频上传接口地址
upMediaExt:视频本地上传扩展限制 【可选】【默认值： avi】
tools工具栏的显示方式
mfull多行完全模式
simple简单模式
mini迷你模式
6.分页组件
<div class="pagination" targetType="navTab" totalCount="200"
numPerPage="20" pageNumShown="10" currentPage="1">
</div>
<form id="pagerForm" action="xxx" method="post">
<!--【必须】 value=1可以写死-->
<input type="hidden" name="pageNum" value="1" />
<!--【可选】每页显示多少条-->
<input type="hidden" name="numPerPage" value="20" />
<!--【可选】查询排序-->
<input type="hidden" name="orderField" value="xxx" />
<!--【可选】升序降序-->
<input type="hidden" name="orderDirection" value="asc" />
<!--【可选】其它查询条件，业务有关，有什么查询条件就加什么参数。也可以在searchForm上设置属性rel=”pagerForm”， js框架会自动把searchForm搜索条件复制到pagerForm中 -->
<input type="hidden" name="name" value="xxx" /> <input type="hidden" name="status" value="active" />
</form>
注释:
targetType: navTab 或 dialog，用来标记是 navTab 上的分页还是 dialog 上的分页
totalCount: 总条数
numPerPage: 每页显示多少条
pageNumShown: 页标数字多少个
currentPage: 当前是第几页
7.Excel表格导出
<a class="icon" href="doc/dwz-team.xls" target="dwzExport" targetType="navTab" title=" 实要导出这些记录吗?">导出 EXCEL</a>
8.A 按钮组件的使用
<a class="button" href="javascript:;"><span>按钮</span></a>
9.文本框 扩展(多行文本框结构相似)
1.提示信息
<input name="field2" type="text" alt="提示信息" />
2.必填
<input name="field2" type="text" class="required" alt="提示信息" />
3.错误
<input class="error" name="field4" type="text" />
4.只读
<input readonly="true" name="field5" type="text" />
5.禁用
<input disabled="true" name="field5" type="text" />
10.Tree 组件
<ul class="tree treeFolder treeCheck expand collapse" oncheck="kkk">
<li>
<a>框架面板</a>
<ul>
<li><a tname="name" tvalue="value1" checked="true">我的主页</a></li>
<li><a tname="name" tvalue="value2">页面一</a></li>
<li><a tname="name" tvalue="value3">替换页面一</a></li>
<li><a tname="name" tvalue="value4">页面二</a></li>
<li><a tname="name" tvalue="value5">页面三</a></li>
</ul>
</li>
<li>
<a tname="name" tvalue="test1">Test 1</a>
<ul>
<li><a tname="name" tvalue="test1.1">Test 1.1</a>
<ul>
<li><a tname="name" tvalue="test1.1.1" checked="true">Test1.1.1</a></li>
<li><a tname="name" tvalue="test1.1.2" checked="false">Test1.1.2</a></li>
</ul>
</li>
<li><a tname="name" tvalue="test1.2" checked="true">Test1.2</a></li>
</ul>
</li>
</ul>
注释: 座位普通的Tree组件class="tree"即可
treeFolder 枝干前带文件夹图标
treeCheck 枝干前带checkbox选择框
expand 树为折展开状态
collapse 树为折叠状态(默认为展开状态)
11.panel 组件
<div class="panel close collapse" [defH="200"|minH=”100”] >
<h1>标题</h1>
<div>内容</div>
</div>
12.日历控件
<input type="text" name="date7" class="date" pattern="yyyy年MM月dd日" /> //只能读取到年月日
<input type="text" name="date7" class="date" dateFmt="yyyy年MM月dd日 HH:mm:ss" /> //能精确到时分秒
<a class="inputDateButton" href="javascript:;">选择</a>
13.全选/反选
<label><input type="checkbox" name="c1" value="1" />选择1</label>
<label><input type="checkbox" name="c1" value="2" />选择2</label>
<label><input type="checkbox" name="c1" value="3" />选择3</label>
<input type="checkbox" class="checkboxCtrl" group="c1" />全选
<button type="button" class="checkboxCtrl" group="c1" selectType="invert">反选</button>
<a class="delete" target="ajaxTodo" href="${ctx}/subscribe/delete/{slt_objId}" title="你确定要删除吗?"><span>单个删除</span></a>
<a class="delete" target="aselectedTodo" href="${ctx}/subscribe/delete" rel="ids" title="你确定要删除吗?"><span>批量删除</span></a>
14.上传组件的使用
<input id="testFileInput2" type="file" name="image2"
uploaderOption="{
swf:'static/dwz/uploadify/scripts/uploadify.swf',
uploader:'doc/ajaxDone.html',
formData:{PHPSESSID:'xxx', ajax:1},
queueID:'fileQueue',
buttonImage:'static/dwz/uploadify/img/add.jpg',
buttonClass:'my-uploadify-button',
width:102,
auto:false
}"
/>
<div id="fileQueue" class="fileQueue"></div>
<input type="image" src="static/dwz/uploadify/img/upload.jpg" onclick="$('#testFileInput2').uploadify('upload', '*');"/>
<input type="image" src="static/dwz/uploadify/img/cancel.jpg" onclick="$('#testFileInput2').uploadify('cancel', '*');"/>
15.查找带回的使用
<label>部门名称：</label>
<input type="hidden" name="orgLookup.id" value="${orgLookup.id}"/>
<input type="text" class="required" name="orgLookup.orgName" value="" suggestFields="orgNum,orgName" suggestUrl="demo/database/db_lookupSuggest.html" lookupGroup="orgLookup" />
<a class="btnLook" href="demo/database/dwzOrgLookup.html" lookupGroup="orgLookup">查找带回</a>
<input type="hidden" name="userId" id="userId" value="${address.userId }"/>
<input type="text" name="userName" id="userName" readonly="readonly" value="${user.userName }" style="float:left;"/>
<a class="btnLook" href="${ctx}/user/list?type=lookup" lookupGroup="" width="500" height="380">用户选择</a>
-1:取消按钮
<button type="button" class="close">取消</button>
-2:页面的内容区域
<div class="pageContent"></div>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jpct基本使用框架
- 使用express.js框架一步步实现基本应用以及构建可扩展的web应用
- Caffe使用step by step：caffe框架下的基本操作和分析
- 图片加载框架简单介绍<三> Glide的基本使用
- 使用ssm框架在web.xml中的基本配置信息
- Caffe使用step by step：caffe框架下的基本操作和分析
- 【干货】Laravel框架的基本使用教程之安装和配置！
- JQueryEasyUI datagrid框架的基本使用
- Junit框架使用（1）--基本使用
- 黑马程序员---OC学习笔记之Foundation框架：NSString的基本使用
- iOS 第三方框架－MJRefresh的基本使用
- MultipeerConnectivity框架，近场通信的基本使用
- Foundation框架: 11.NSDate的基本认识和使用
- 线程基础：多任务处理（12）——Fork/Join框架（基本使用）
- MapKit框架的基本使用1
- YII+DWZ框架，使用swfupload实现上传
- 使用dwz框架搭建网站后台
- 微信开发准备(三)——框架以及工具的基本使用
- 详解Android之图片加载框架Fresco基本使用(二)
- Android SQLite轻量框架LitePal基本使用