123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136 |
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>简单实用国产jQuery UI框架 - DWZ富客户端框架(J-UI.com)</title>
- <link href="themes/default/style.css" rel="stylesheet" type="text/css" media="all"/>
- <link href="themes/css/core.css" rel="stylesheet" type="text/css" media="all"/><link href="themes/css/print.css" rel="stylesheet" type="text/css" media="print"/>
- <!--[if IE]>
- <link href="themes/css/ieHack.css" rel="stylesheet" type="text/css" media="screen"/>
- <![endif]-->
- <!--[if lt IE 9]><script src="js/speedup.js" type="text/javascript"></script><script src="js/jquery-1.11.3.min.js" type="text/javascript"></script><![endif]-->
- <!--[if gte IE 9]><!--><script src="js/jquery-2.1.4.js" type="text/javascript"></script><!--<![endif]-->
- <script src="js/dwz.core.js" type="text/javascript"></script>
- <script src="js/dwz.drag.js" type="text/javascript"></script>
- <script src="js/dwz.sortDrag.js" type="text/javascript"></script>
- <script src="js/dwz.miscDrag.js" type="text/javascript"></script>
- <!-- 可以用dwz.min.js替换前面全部dwz.*.js (注意:替换时下面dwz.regional.zh.js还需要引入)
- <script src="bin/dwz.min.js" type="text/javascript"></script>
- -->
- <script src="js/dwz.regional.zh.js" type="text/javascript"></script>
- <script type="text/javascript">
- $(function(){
- DWZ.init("dwz.frag.xml", {
- loginUrl:"login_dialog.html", loginTitle:"登录", // 弹出登录对话框
- // loginUrl:"login.html", // 跳到登录页面
- statusCode:{ok:200, error:300, timeout:301}, //【可选】
- pageInfo:{pageNum:"pageNum", numPerPage:"numPerPage", orderField:"orderField", orderDirection:"orderDirection"}, //【可选】
- keys: {statusCode:"statusCode", message:"message"}, //【可选】
- ui:{hideMode:'offsets'}, //【可选】hideMode:navTab组件切换的隐藏方式,支持的值有’display’,’offsets’负数偏移位置的值,默认值为’display’
- debug:false, // 调试模式 【true|false】
- callback:function(){
- $("dl.miscSortDrag").miscSortDrag();
- $("div.sortDrag").sortDrag();
- }
- });
- });
- </script>
- <link href="themes/miscDrag/screen.css" rel="stylesheet" type="text/css" media="all"/>
- <style type="text/css">
- html,body { height:auto; overflow-y: auto; background: none}
- </style>
- </head>
- <body>
- <div class="page unitBox">
- <!--<h2 class="contentTitle">炉门 Furnace door</h2>-->
- <!-- start自定义拖拽示例 -->
- <div class="pageContent" style="padding: 10px;">
- <dl id="myMiscSortDrag" class="miscSortDrag" drag-rel="dd .sortDrag" data-duplicate="1">
- <dt>
- <fieldset>
- <legend>显示单元(Element)</legend>
- <div class="itemBox">
- <div class="dragItem" data-sn="element-11" data-name="室外 PM2.5">室外 PM2.5<label class="ctl-label"><input type="checkbox" name="fullSize">撑满</label><span class="close">X</span></div>
- <div class="dragItem" data-sn="element-12" data-name="样板间1 PM2.5">样板间1 PM2.5<label class="ctl-label"><input type="checkbox" name="fullSize">撑满</label><span class="close">X</span></div>
- <div class="dragItem" data-sn="element-13" data-name="样板间2 PM2.5">样板间2 PM2.5<label class="ctl-label"><input type="checkbox" name="fullSize">撑满</label><span class="close">X</span></div>
- <div class="dragItem" data-sn="element-21" data-name="过滤前水质">过滤前水质<label class="ctl-label"><input type="checkbox" name="fullSize">撑满</label><span class="close">X</span></div>
- <div class="dragItem" data-sn="element-22" data-name="过滤后水质">过滤后水质<label class="ctl-label"><input type="checkbox" name="fullSize">撑满</label><span class="close">X</span></div>
- <div class="dragItem" data-sn="element-32" data-name="样板间1噪音">样板间1噪音<label class="ctl-label"><input type="checkbox" name="fullSize">撑满</label><span class="close">X</span></div>
- <div class="dragItem" data-sn="element-33" data-name="样板间2噪音">样板间2噪音<label class="ctl-label"><input type="checkbox" name="fullSize">撑满</label><span class="close">X</span></div>
- <div class="dragItem" data-sn="element-41" data-name="样板间1温度">样板间1温度<label class="ctl-label"><input type="checkbox" name="fullSize">撑满</label><span class="close">X</span></div>
- <div class="dragItem" data-sn="element-42" data-name="样板间1湿度">样板间1湿度<label class="ctl-label"><input type="checkbox" name="fullSize">撑满</label><span class="close">X</span></div>
- <div class="dragItem" data-sn="element-51" data-name="样板间1照度">样板间1照度<label class="ctl-label"><input type="checkbox" name="fullSize">撑满</label><span class="close">X</span></div>
- <div class="dragItem" data-sn="element-61" data-name="样板间1风速">样板间1风速<label class="ctl-label"><input type="checkbox" name="fullSize">撑满</label><span class="close">X</span></div>
- </div>
- </fieldset>
- </dt>
- <dd>
- <fieldset>
- <legend>屏幕布局配置(Screen)</legend>
- <div class="row" style="padding: 0 10px;">
- <div class="col-lg-4 col-md-12 col-sm-12">
- <p class="title">空气质量(Panel)</p>
- <div class="sortDrag" data-sn="panel-1" data-name="空气质量" data-over-sort="false">
- <div class="dragItem" data-sn="element-11" data-name="室外 PM2.5">室外 PM2.5<label class="ctl-label"><input type="checkbox" name="fullSize">撑满</label><span class="close">X</span></div>
- <div class="dragItem" data-sn="element-12" data-name="样板间1 PM2.5">样板间1 PM2.5<label class="ctl-label"><input type="checkbox" name="fullSize">撑满</label><span class="close">X</span></div>
- <div class="dragItem" data-sn="element-13" data-name="样板间2 PM2.5">样板间2 PM2.5<label class="ctl-label"><input type="checkbox" name="fullSize">撑满</label><span class="close">X</span></div>
- </div>
- <p class="title">热舒适度(Panel)</p>
- <div class="sortDrag" data-sn="panel-6" data-name="热舒适度">
- </div>
- </div>
- <div class="col-lg-4 col-md-6 col-sm-12">
- <p class="title">水质(Panel)</p>
- <div class="sortDrag" data-sn="panel-2" data-name="水质" data-over-sort="false">
- <div class="dragItem" data-sn="element-21" data-name="过滤前水质">过滤前水质<label class="ctl-label"><input type="checkbox" name="fullSize">撑满</label><span class="close">X</span></div>
- <div class="dragItem" data-sn="element-22" data-name="过滤后水质">过滤后水质<label class="ctl-label"><input type="checkbox" name="fullSize">撑满</label><span class="close">X</span></div>
- </div>
- <p class="title">风速(Panel)</p>
- <div class="sortDrag" data-sn="panel-4" data-name="风速" data-over-sort="false">
- </div>
- </div>
- <div class="col-lg-4 col-md-6 col-sm-12">
- <p class="title">噪音(Panel)</p>
- <div class="sortDrag" data-sn="panel-3" data-name="噪音">
- </div>
- <p class="title">照度(Panel)</p>
- <div class="sortDrag" data-sn="panel-5" data-name="照度" data-over-sort="false">
- </div>
- </div>
- </div>
- </fieldset>
- </dd>
- </dl>
- <button type="button" onclick="alert( JSON.stringify($('#myMiscSortDrag').miscSortDragData()) )">获取数据</button>
- </div>
- <!-- end自定义拖拽示例 -->
- </div>
- </body>
- </html>
|