DWZ框架的基本使用

痛定思痛。 2022-08-07 13:46 341阅读 0赞

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">      
                <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;">          
                <div>内容1</div>  
                <div>内容2</div>  
                <div>内容3</div>  
                <div>内容4</div>  
            </div>  
            <div class="tabsFooter">          
                <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">  
              
            <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" />  
              
            <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>