miscDragScreen1.html 7.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>简单实用国产jQuery UI框架 - DWZ富客户端框架(J-UI.com)</title>
  6. <link href="themes/default/style.css" rel="stylesheet" type="text/css" media="all"/>
  7. <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"/>
  8. <!--[if IE]>
  9. <link href="themes/css/ieHack.css" rel="stylesheet" type="text/css" media="screen"/>
  10. <![endif]-->
  11. <!--[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]-->
  12. <!--[if gte IE 9]><!--><script src="js/jquery-2.1.4.js" type="text/javascript"></script><!--<![endif]-->
  13. <script src="js/dwz.core.js" type="text/javascript"></script>
  14. <script src="js/dwz.drag.js" type="text/javascript"></script>
  15. <script src="js/dwz.sortDrag.js" type="text/javascript"></script>
  16. <script src="js/dwz.miscDrag.js" type="text/javascript"></script>
  17. <!-- 可以用dwz.min.js替换前面全部dwz.*.js (注意:替换时下面dwz.regional.zh.js还需要引入)
  18. <script src="bin/dwz.min.js" type="text/javascript"></script>
  19. -->
  20. <script src="js/dwz.regional.zh.js" type="text/javascript"></script>
  21. <script type="text/javascript">
  22. $(function(){
  23. DWZ.init("dwz.frag.xml", {
  24. loginUrl:"login_dialog.html", loginTitle:"登录", // 弹出登录对话框
  25. // loginUrl:"login.html", // 跳到登录页面
  26. statusCode:{ok:200, error:300, timeout:301}, //【可选】
  27. pageInfo:{pageNum:"pageNum", numPerPage:"numPerPage", orderField:"orderField", orderDirection:"orderDirection"}, //【可选】
  28. keys: {statusCode:"statusCode", message:"message"}, //【可选】
  29. ui:{hideMode:'offsets'}, //【可选】hideMode:navTab组件切换的隐藏方式,支持的值有’display’,’offsets’负数偏移位置的值,默认值为’display’
  30. debug:false, // 调试模式 【true|false】
  31. callback:function(){
  32. $("dl.miscSortDrag").miscSortDrag();
  33. $("div.sortDrag").sortDrag();
  34. }
  35. });
  36. });
  37. </script>
  38. <link href="themes/miscDrag/screen.css" rel="stylesheet" type="text/css" media="all"/>
  39. <style type="text/css">
  40. html,body { height:auto; overflow-y: auto; background: none}
  41. </style>
  42. </head>
  43. <body>
  44. <div class="page unitBox">
  45. <!--<h2 class="contentTitle">炉门 Furnace door</h2>-->
  46. <!-- start自定义拖拽示例 -->
  47. <div class="pageContent" style="padding: 10px;">
  48. <dl id="myMiscSortDrag" class="miscSortDrag" drag-rel="dd .sortDrag" data-duplicate="1">
  49. <dt>
  50. <fieldset>
  51. <legend>显示单元(Element)</legend>
  52. <div class="itemBox">
  53. <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>
  54. <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>
  55. <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>
  56. <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>
  57. <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>
  58. <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>
  59. <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>
  60. <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>
  61. <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>
  62. <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>
  63. <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>
  64. </div>
  65. </fieldset>
  66. </dt>
  67. <dd>
  68. <fieldset>
  69. <legend>屏幕布局配置(Screen)</legend>
  70. <div class="row" style="padding: 0 10px;">
  71. <div class="col-lg-4 col-md-12 col-sm-12">
  72. <p class="title">空气质量(Panel)</p>
  73. <div class="sortDrag" data-sn="panel-1" data-name="空气质量" data-over-sort="false">
  74. <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>
  75. <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>
  76. <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>
  77. </div>
  78. <p class="title">热舒适度(Panel)</p>
  79. <div class="sortDrag" data-sn="panel-6" data-name="热舒适度">
  80. </div>
  81. </div>
  82. <div class="col-lg-4 col-md-6 col-sm-12">
  83. <p class="title">水质(Panel)</p>
  84. <div class="sortDrag" data-sn="panel-2" data-name="水质" data-over-sort="false">
  85. <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>
  86. <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>
  87. </div>
  88. <p class="title">风速(Panel)</p>
  89. <div class="sortDrag" data-sn="panel-4" data-name="风速" data-over-sort="false">
  90. </div>
  91. </div>
  92. <div class="col-lg-4 col-md-6 col-sm-12">
  93. <p class="title">噪音(Panel)</p>
  94. <div class="sortDrag" data-sn="panel-3" data-name="噪音">
  95. </div>
  96. <p class="title">照度(Panel)</p>
  97. <div class="sortDrag" data-sn="panel-5" data-name="照度" data-over-sort="false">
  98. </div>
  99. </div>
  100. </div>
  101. </fieldset>
  102. </dd>
  103. </dl>
  104. <button type="button" onclick="alert( JSON.stringify($('#myMiscSortDrag').miscSortDragData()) )">获取数据</button>
  105. </div>
  106. <!-- end自定义拖拽示例 -->
  107. </div>
  108. </body>
  109. </html>