Home Explore Help
Sign In
chengwenliang
/
Queenabby
2
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Tree: 1a9a6304b9
Branches Tags
Queenabby
/
vendor
/
fancyecommerce
/
fec_admin
/
myassets
/
dwz_jui-master
/
miscDragScreen1.html

miscDragScreen1.html 7.4 KB
History Raw

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. 

  2. <html xmlns="http://www.w3.org/1999/xhtml">
    3. 

  3. <head>
    4. 

  4. 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    5. 

  5. 	<title>简单实用国产jQuery UI框架 - DWZ富客户端框架(J-UI.com)</title>
    6. 

  6. 

  7. 	<link href="themes/default/style.css" rel="stylesheet" type="text/css" media="all"/>
    8. 

  8. 	<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"/>
    9. 

  9. 

  10. 	<!--[if IE]>
    11. 

  11. 	<link href="themes/css/ieHack.css" rel="stylesheet" type="text/css" media="screen"/>
    12. 

  12. 	<![endif]-->
    13. 

  13. 

  14. 	<!--[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]-->
    15. 

  15. 	<!--[if gte IE 9]><!--><script src="js/jquery-2.1.4.js" type="text/javascript"></script><!--<![endif]-->
    16. 

  16. 

  17. 

  18. 	<script src="js/dwz.core.js" type="text/javascript"></script>
    19. 

  19. 	<script src="js/dwz.drag.js" type="text/javascript"></script>
    20. 

  20. 	<script src="js/dwz.sortDrag.js" type="text/javascript"></script>
    21. 

  21. 	<script src="js/dwz.miscDrag.js" type="text/javascript"></script>
    22. 

  22. 

  23. 	<!-- 可以用dwz.min.js替换前面全部dwz.*.js (注意：替换时下面dwz.regional.zh.js还需要引入)
    24. 

  24. 	<script src="bin/dwz.min.js" type="text/javascript"></script>
    25. 

  25. 	-->
    26. 

  26. 	<script src="js/dwz.regional.zh.js" type="text/javascript"></script>
    27. 

  27. 

  28. 	<script type="text/javascript">
    29. 

  29. 		$(function(){
    30. 

  30. 			DWZ.init("dwz.frag.xml", {
    31. 

  31. 				loginUrl:"login_dialog.html", loginTitle:"登录",	// 弹出登录对话框
    32. 

  32. //		loginUrl:"login.html",	// 跳到登录页面
    33. 

  33. 				statusCode:{ok:200, error:300, timeout:301}, //【可选】
    34. 

  34. 				pageInfo:{pageNum:"pageNum", numPerPage:"numPerPage", orderField:"orderField", orderDirection:"orderDirection"}, //【可选】
    35. 

  35. 				keys: {statusCode:"statusCode", message:"message"}, //【可选】
    36. 

  36. 				ui:{hideMode:'offsets'}, //【可选】hideMode:navTab组件切换的隐藏方式，支持的值有’display’，’offsets’负数偏移位置的值，默认值为’display’
    37. 

  37. 				debug:false,	// 调试模式 【true|false】
    38. 

  38. 				callback:function(){
    39. 

  39. 					$("dl.miscSortDrag").miscSortDrag();
    40. 

  40. 					$("div.sortDrag").sortDrag();
    41. 

  41. 				}
    42. 

  42. 			});
    43. 

  43. 

  44. 		});
    45. 

  45. 

  46. 	</script>
    47. 

  47. 

  48. 	<link href="themes/miscDrag/screen.css" rel="stylesheet" type="text/css" media="all"/>
    49. 

  49. 	<style type="text/css">
    50. 

  50. 		html,body { height:auto; overflow-y: auto; background: none}
    51. 

  51. 	</style>
    52. 

  52. </head>
    53. 

  53. 

  54. <body>
    55. 

  55. 

  56. <div class="page unitBox">
    57. 

  57. 	<!--<h2 class="contentTitle">炉门 Furnace door</h2>-->
    58. 

  58. 	<!-- start自定义拖拽示例 -->
    59. 

  59. 	<div class="pageContent" style="padding: 10px;">
    60. 

  60. 

  61. 

  62. 		<dl id="myMiscSortDrag" class="miscSortDrag" drag-rel="dd .sortDrag" data-duplicate="1">
    63. 

  63. 			<dt>
    64. 

  64. 				<fieldset>
    65. 

  65. 					<legend>显示单元(Element)</legend>
    66. 

  66. 					<div class="itemBox">
    67. 

  67. 						<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>
    68. 

  68. 						<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>
    69. 

  69. 						<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>
    70. 

  70. 						<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>
    71. 

  71. 						<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>
    72. 

  72. 						<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>
    73. 

  73. 						<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>
    74. 

  74. 

  75. 						<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>
    76. 

  76. 						<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>
    77. 

  77. 						<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>
    78. 

  78. 						<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>
    79. 

  79. 					</div>
    80. 

  80. 				</fieldset>
    81. 

  81. 

  82. 			</dt>
    83. 

  83. 			<dd>
    84. 

  84. 				<fieldset>
    85. 

  85. 					<legend>屏幕布局配置(Screen)</legend>
    86. 

  86. 					<div class="row" style="padding: 0 10px;">
    87. 

  87. 						<div class="col-lg-4 col-md-12 col-sm-12">
    88. 

  88. 							<p class="title">空气质量(Panel)</p>
    89. 

  89. 							<div class="sortDrag" data-sn="panel-1" data-name="空气质量" data-over-sort="false">
    90. 

  90. 								<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>
    91. 

  91. 								<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>
    92. 

  92. 								<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>
    93. 

  93. 							</div>
    94. 

  94. 

  95. 							<p class="title">热舒适度(Panel)</p>
    96. 

  96. 							<div class="sortDrag" data-sn="panel-6" data-name="热舒适度">
    97. 

  97. 							</div>
    98. 

  98. 						</div>
    99. 

  99. 						<div class="col-lg-4 col-md-6 col-sm-12">
    100. 

  100. 							<p class="title">水质(Panel)</p>
    101. 

  101. 							<div class="sortDrag" data-sn="panel-2" data-name="水质" data-over-sort="false">
    102. 

  102. 								<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>
    103. 

  103. 								<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>
    104. 

  104. 							</div>
    105. 

  105. 

  106. 							<p class="title">风速(Panel)</p>
    107. 

  107. 							<div class="sortDrag" data-sn="panel-4" data-name="风速" data-over-sort="false">
    108. 

  108. 							</div>
    109. 

  109. 						</div>
    110. 

  110. 						<div class="col-lg-4 col-md-6 col-sm-12">
    111. 

  111. 							<p class="title">噪音(Panel)</p>
    112. 

  112. 							<div class="sortDrag" data-sn="panel-3" data-name="噪音">
    113. 

  113. 							</div>
    114. 

  114. 

  115. 							<p class="title">照度(Panel)</p>
    116. 

  116. 							<div class="sortDrag" data-sn="panel-5" data-name="照度" data-over-sort="false">
    117. 

  117. 							</div>
    118. 

  118. 						</div>
    119. 

  119. 

  120. 					</div>
    121. 

  121. 				</fieldset>
    122. 

  122. 			</dd>
    123. 

  123. 

  124. 		</dl>
    125. 

  125. 

  126. 

  127. 		<button type="button" onclick="alert( JSON.stringify($('#myMiscSortDrag').miscSortDragData()) )">获取数据</button>
    128. 

  128. 

  129. 

  130. 	</div>
    131. 

  131. 	<!-- end自定义拖拽示例 -->
    132. 

  132. 

  133. </div>
    134. 

  134. 

  135. </body>
    136. 

  136. </html>
    137.