DWZ样式规范

列表页面:
1.查询
<form id="pagerForm" method="post" action="#">
<input type="hidden" name="totalCount"
value="${page.totalRowCount}" />
<input type="hidden" name="pageNo" value="${page.pageNo}" />
<input type="hidden" name="numPerPage"
value="${page.rowsDisplayed}" />
</form>
<div class="pageHeader">
<form rel="pagerForm"onsubmit="return ajaxSearch(this);"action="#"
method="post">
<div class="searchBar">
<table class="searchContent">
<tr>
<td>员工名称： <input type="text" name="name"
value="${}"/></td>
<td><button class="button" type="submit"><span>查询</span></button></td>
</tr>
</table>
</div>
</form>
</div>
说明:蓝色部分可以直接拷贝,这是分页的参数,没有什么难的;红色部分的是查询的容器,它主要要注意的是””下浪线的部分,样式都按照上面来就可以了;按钮都用class=”button”,注意还要在文字的外边用<span>抱起来
2.多选
<table class="table" width="1500" layoutH="138">
<thead>
<tr>
<th><input type="checkbox" group="ids" class="checkboxCtrl"></th> </tr>
</thead>
<tbody>
<tr target="sid_user" rel="1">
<td><input name="ids" value="xxx" type="checkbox"></td> </tr>
</tbody>
</table>
说明:多选主要要注意的是红色””的部分
(1)在class=”table”或class=”list”的table中,在table头部<th>里要定义一个group=”ids” ,
class=”checkboxCtrl”;
(2)在<tbody>下的<td>要定义name=”ids”,type=”checkbox
(3)name=”ids”是和group=”ids”对应的,就是说,name的属性值要跟group的属性值一样,ids是
自定义的,也可换成其他的;
3.操作
<a href="url"class="button" rel=”boxId”><span>库内</span></a>
说明:按钮都用class=button”
4.列表
<div class="pageContent">
<div class="panelBar">
<ul class="toolBar" style="float:right;">
<li><a class="add" href="url"target="ajax"><span>新增
</span></a></li>
</ul>
</div>
<table class="list" width="100%"layoutH="130">
<thead>
<tr>
<th width="20%">项目名称</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center">XXXX</td>
</tr>
</tbody>
</table>
<div class="panelBar">
<div class="pages"><span>每页显示${page.rowsDisplayed}条，共${page.totalRowCount}条</span></div>
<div class="pagination" targetType="navTab"
totalCount=${page.totalRowCount} numPerPage="${page.rowsDisplayed}" pageNumShown="10" currentPage=${page.pageNo}></div>
</div>
</div>
说明: 蓝色部分可以直接拷贝,这是分页的固定写法,没有什么难的;红色区域是列表区域很重
要的一些写法;现在需要特别说明的是,<th>里面的width一定要定义,这是给表头定义宽度的,它会影响下面列表内容的展现;列表内容的对齐方式可以用align来定义
5.table头部的工具栏
<div class="panelBar">
<h3>项目列表</h3>
<ul class="toolBar" style="float:right;">
<li><a class="add" href="url"target="ajax"><span>新增</span></a> <li><a class="edit" href="url"target="ajax"><span>新增</span></a> <li><a class="delete"href="url"target="ajax"><span>新增</span></a> <li><a class="" href="url"target="ajax"><span>新增</span></a>
</li>
</ul>
</div>
6.table
7.分页的效果
<div class="panelBar">
<div class="pages"><span>每页显示${page.rowsDisplayed}条，共${page.totalRowCount}条</span></div>
<div class="pagination" targetType="navTab"
totalCount=${page.totalRowCount}
numPerPage="${page.rowsDisplayed}" pageNumShown="10"
currentPage=${page.pageNo}></div>
</div>
8.整个页面的效果
9.有tab页的列表写法
<div class="tabs" currentIndex="0" eventType="click">
<div class="tabsHeader">
<div class="tabsHeaderContent">
<ul>
<li><a href="url" target=”ajax”rel=”tabOne”><span>待抽取项目</span></a></li>
<li><a href="url" target=”ajax”rel=”tabTwo”><span>已抽取项目</span></a></li>
</ul>
</div>
</div>
<div class="tabsContent">
<div id=”tabOne”style="background-color:#ffffff">
这里就把上面的整个列表页面丢进这里就行了
</div>
<div id=”tabTwo”style="background-color:#ffffff">
这里的内容可以省略
</div>
</div><div class ="tabsFooter">
<div class ="tabsFooterContent"></div>
</div>
</div>
说明:有需要tab页效果的就按照这个死规定来做就行了,结构不用变,一套用就行;现在重要说说红色字体的用处,currentIndex=0指定的是页面加载后会选择显示出来的第一个tab页, currentIndex=1的指定的是第二个tab页;rel是用来局部加载的,所以我们定义rel=”tabOne”,那么点击这个tab的话,就会在id=”tabOne”相对应的div里面加载进请求返回的页面
10.有tab页的整个页面的效果
11.单独列表
<div class="divider"></div>
<div class="columnBox">
<h2class="contentTitle">有下滑线--有背景的头部样式</h2>
说明: class="divider"是下划线;定义<div class="columnBox">下面的<h2>这样就能有背景色了
<div class="columnBox">
<h5>有背景的头部样式</h5>
<div class="pointInfo">
<h5>有背景并且有底色的头部样式</h5>
<table class="list"width="80%">
<tbody>
<tr>
<th width="25%">
<label>工作单位</label>
</th>
<td width="25%">珠海政采</td>
<th width="25%">
<label>所在部门</label>
</th>
<td width="25%">产品开发部</td>
</tr>
<tr>
<th>
<label>职务</label>
</th>
<td>产品经理</td>
<th>
<label>负责项目</label>
</th>
<td>公共服务平台</td>
</tr>
</tbody>
</table>
</div>
组合效果:
12.弹出层
<a class="button" rel="dlg_page2" target="dialog" href="demo_page1
.html">
<span>打开窗口2</span>
</a>
说明:在标签里定义target=”dialog”就能实现弹出层;href里面的路径是弹出页面的路径表单页:
1. 表单的基本结构
<form action="url " method="post" class="pageForm required-validate"
onsubmit="return validateCallback(this, ajaxDone)">
<div class="pageContent">
<h2 class="contentTitle">新增页面</h2>
<!—输入的区域开始-->
<div class="pageFormContent" layoutH="84">
<p>
<label>字符串：</label>
<input name="master.devString" value="test" type="text" size="30"/>
<p>
<label>整数：</label>
<input name="master " size="30" class="integer" alt="请输入整数" type="text"/>
</p>
</div>
<!—输入的区域结束-->
<!—提交的区域开始-->
<div class="formBar">
<ul>
<li>
<button type="submit" class="button"><span>保存</span></button>
</li>
<li> <a class="button" href="url" target="ajax" rel=”XXX”><span>关闭</span></a>
</li>
</ul>
</div>
<!—提交的区域结束-->
</div>
</form>
说明:以上就是表单页面的结构,我们只需要改动”蓝色”的内容就行了;class=”XXX”的验证可以到dwz.regional.zh.js里面找到相对应的验证.
表单头部:<h2 class="contentTitle">新增页面</h2>
表单体:
<div class="pageFormContent" layoutH="84">
<p>
<label>字符串：</label>
<input name="master.devString" value="test" type="text" size="30"/>
</p>
<p>
<label>整数：</label>
<input name="master " size="30" class="integer" alt="请输入整数" type="text"/>
</p>
</div>
<div class="formBar">
<ul>
<li>
<button type="submit" class="button"><span>保存</span></button>
</li>
<li> <a class="button" href="url" target="ajax" rel=”XXX”><span>关闭</span></a> </li> </ul>
</div>
2.弹出框
<p>
<label>弹出框：</label>
<i nput type="hidden" value="" name="master.id">
<input class="required textInput" type="text" size="30" value="" name="Name"> <a class="btnLook" lookupname="master " lookupgroup="" href="dwzOrgLookup.jsp">查找带回</a>
</p>
dwzOrgLookup.jsp页面里面需要定义的回带事件
<a class="btnSelect" href="javascript:$.bringBack({id:'1', orgName:'技术部’})" title="查找带回">选择</a>
说明:针对与name=”XXX.xxx”的情况,我们需要在<a>里面定义的 lookupname="master ",然后弹出页面回带函数
3.整行的输入框
第一种方式:
<p class="nowrap">
<label>工作时间：</label>
<input name="idcards"type="text"size="30"class="date"value=""/> <a class="inputDateButton"href="javascript:;">选择</a>
<span class="info">至</span>
<input name="idcard"type="text"size="30"class="date"value=""/><a class="inputDateButton"href="javascript:;">选择</a></p>
第二种方式:
<dl class="nowrap">
<dt>工作时间：</dt>
<dd><input name="idcard"type="text"size="30"class="date">
<span class="info">至</span>
<input name="idcard"type="text"size="30"class="date"/></dd></dl>
注意他们的不同之处在于:第一个是用<P class=”nowrap”>,第二个用的是<dl class=”nowrap”>
样式拓展
1.表单拓展
在需要拓展的页面上引入一下样式
<link href="styles/themes/css/skin/skin07/css/main.css" type="text /css" rel="stylesheet">
<link href="styles/themes/css/skin/skin07/css/register.css" type="
text/css" rel="stylesheet">
然后定义一下class就行
<h3 class="title" align="left">
<span style="color: blue;">基本资料</span>
</h3>
例子:
<h3 class="title">
<span>列表占满的情况</span>
<span class="eleRequired">（带*号的为必填项）</span>
</h3>
<table class="list"width="100%">
<thead>
<tr>
<th width="20%">项目名称</th>
<th width="20%">评审地点</th>
<th width="20%">评审开始时间</th>
<th width="20%">状态</th>
<th width="20%">操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>iso127309</td>
<td>北京市政府</td>
<td>0-0001027766351528</td>
<td>2009-05-21</td>
<td><a class="button"href="javascript:;"><span>查看历史</span></a></td>
</tr>
</tbody>
</table>
总体的效果:
其他的列表。