-
Notifications
You must be signed in to change notification settings - Fork 263
/
miscDragScreen1.html
135 lines (109 loc) · 7.44 KB
/
miscDragScreen1.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!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.12.4.js" type="text/javascript"></script><![endif]-->
<!--[if gte IE 9]><!--><script src="js/jquery-3.4.1.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>