dwz框架在网站群项目中的应用(3)—html拓展之控件组件篇

每个页面中由不同的控件和组件提供不同的功能，在“dwz框架”下应用框架的规则只要写简单的html代码就可以写出实用的控件或组件，在项目中用的比较多的有：文本框、日历控件、combox组件、分页组件，下面将继续以项目中的实例介绍这些组件和控件在项目中的应用：

文库框

在项目中用于输入文本信息

示例

<input type="text" id="Title" name="Title" value="" runat="server" />

此示例用于在页面中输入文章标题信息

 

属性介绍

由name属性值获取前台值

runat="server":将控件定义为服务器控件，方便后台代码对此控件的操作（下同）

type="text":将控件定义问文本控件，用于输入文本信息

 

日历控件

在项目中用于快捷的输入日期信息

示例：

<input type="text" name="startdate" id="startdate" class="date" size="30" value="<%# Startime %>" runat="server" /><a class="inputDateButton" href="javascript:;">选择</a>

属性

class="date":应用框架的时间输入框规则

name:定义name属性，用于后台获取时间值

value=“<%#starttime%>”:绑定开始时间的值

 

combox组件

在项目中用于下拉列表的选择

示例：

<select class="combox" name="status"">

   <option value="3" >已审核</option>

   <option value="2">待审核</option>

   <option value="4">被退回</option>

   <option value="1">草稿</option>

</select>

属性

class="combox"：此处应用框架的combox规则，规范下拉选项的样式

name:在后台由name属性获取前台的文章状态值

 

分页组件

在项目中用于分页，分页思路为服务器返回当前页的数据，总条数，再由js来生成分页标签。分页是配合服务器端来处理的, 不是存js做的分页。因为如果数据量很大，比如有好几百页，存js分页就是悲剧了，存js分页是必须一次载入所有数据，性能很慢。pagerForm中缓存了当前的查询条件，加上一个pageNum字段，点击分页时动态修改pageNum,重新提交pagerForm.

示例：

<div class="pages">

        <span>显示</span>

        <select class="combox" name="numPerPage" οnchange="navTabPageBreak({numPerPage:this.value})">

            <option value="16" <% if (numPerPage == 16) {%> selected <%} %>>16</option>

            <option value="50" <% if (numPerPage == 50) {%> selected <%} %>>50</option>

            <option value="100" <% if (numPerPage == 100) {%> selected <%} %>>100</option>

            <option value="200" <% if (numPerPage == 200) {%> selected <%} %>>200</option>

        </select>

        <span>条，共<%=totalCount %>条</span>

    </div>

    <div class="pagination" targettype="navTab" totalcount="<%=totalCount %>" numperpage="<%=numPerPage %>"

        pagenumshown="<%=numPerPage %>" currentpage="<%=pageNum %>">

    </div>

分页思路：

分页组件参数要由服务器传过来targetType，totalCount，numPerPage，pageNumShown，currentPage框架会自动把下面的form中pageNum修改后，ajax重新发请求。下面这个form是用来存查询条件的:

<form id="pagerForm" method="post" action="/content/contentlist.aspx">

<input type="hidden" name="pageNum" value="<% = pageNum %>" />

<input type="hidden" name="numPerPage" value="<%=numPerPage %>" />

<input type="hidden" name="orderField" value="${param.orderField}" />

<input type="hidden" name="orderDirection" value="${param.orderDirection}" />

</form>

orderField:查询排序，用于绑定后台的查询条件

orderDirection:排序规则，升序或降序，绑定后台定义的排序规则

属性

class：应用框架的pagination规则

targettype：以navTab的形式打开新的页面

totalcount：绑定后台的总页码的值

numperpage:绑定后台定义的每一页的数目

pagenumshown：页标数字多少个

currentpage:绑定后台获取的当前的页面

 panel：

简单的将一个区块框起来以分别于其他的区块

示例

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

<h1>标题</h1>

<div>

内容

</div>

</div>

属性拓展

class：close定义面板默认为关闭状态，collapse定义为打开状态

defH:定义面板最大高度

minH：定义面板最小高度

 

Tree扩展

在项目中应用于菜单，因为是动态菜单所以只要在后台编写代码，并应用框架的规则。

示例

前台代码

<ul class="tree treeFolder treeCheck expand" oncheck="kkk">
            <%=CateHtml %>
            <%=ParentHtml %>
</ul>

后台代码

 CateHtml.Append("<li><a href=\"#\" tname=\"\" tvalue=\"\">" + this.site.Name+ "</a>");

树结构是按<ul>,<li>的嵌套格式构成，将最顶级的<ul>以class=”tree”标识即可。treeFolder, treeCheck, expand|collapse则为可选的。

属性拓展

treeFolder:在所有树节点前加上Icon图标

treeCheck:在所有树节点前加上checkbox，此时需要在<a> 加上三个扩展属性tname=””, tvalue=””, checked, 其中tname与tvalue对应该checkbox的name 与value属性

checked表示checkbox的默认状态是否checked.

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

转载于:https://www.cnblogs.com/exodus/archive/2013/01/09/2853209.html