DWZ框架的基本使用

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" οnclick="$('#testFileInput2').uploadify('upload', '*');"/>
        <input type="image" src="static/dwz/uploadify/img/cancel.jpg" οnclick="$('#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>