Dialog.js 7.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188
  1. //#region alert弹窗代码、confirm对话框
  2. //UI窗体区域
  3. Namespace.register("U.UF.UI") //窗体的命名空间
  4. //#region 对话框
  5. /**
  6. * 创建对话框
  7. * @content {string/elemnet} 内容
  8. * @determineFun {function} 确认回调函数
  9. * @cancelFun {function} 取消回调函数
  10. */
  11. U.UF.UI.Confirm = U.UF.UI.confirm = function (content, determineFun, cancelFun) {
  12. //创建对话框主体元素
  13. var _confirm = $$("div", { "style": { "cssText": "width: 100%; background: rgb(255,255,255);overflow:hidden; "} });
  14. //创建内容区域
  15. var _content = $$("div", { "style": { "cssText": "width: 100%;"} }, _confirm);
  16. //判断内容是否为元素
  17. if (U.UF.C.isElement(content)) {
  18. //如果为元素则动态添加到对话框中
  19. U.selectEl(_content).append(content);
  20. } else {
  21. _content.style.cssText = "text-align: center; margin: 10px;";
  22. //如果为文字则修改inerHTML。
  23. _content.innerHTML = content || '内容';
  24. }
  25. //创建页脚部分
  26. var _footer = $$("div", { "style": { "cssText": "height:28px; margin:14px 0;"} }, _confirm);
  27. //创建确定按钮 绑定点击事件,默认点击后执行关闭窗体函数
  28. $$("div", {
  29. "style": {
  30. "cssText": "text-align: center; color: rgb(255,255,255); width: 92px; line-height:28px; background: rgb(48,126,208); border-radius: 5px;float: right; margin-right:29px; "
  31. },
  32. innerHTML: "确定",
  33. onclick: function () {
  34. var _bool = true;
  35. if (U.UF.C.isFunction(determineFun)) {
  36. _bool = determineFun(); //判断是否存在回调 有则执行。
  37. }
  38. if (_bool !== false) {
  39. U.UF.F.closeWindow(_form.form); //关闭窗口函数
  40. }
  41. }
  42. }, _footer);
  43. //创建取消按钮 绑定点击事件,默认点击后执行关闭窗体函数
  44. $$("div", {
  45. "style": {
  46. "cssText": "text-align: center; color: rgb(255,255,255); width: 92px; line-height:28px; background: rgb(48,126,208); border-radius: 5px;background: rgb(170,170,170); float: right; margin-right:21px;margin-left:29px;"
  47. },
  48. "innerHTML": "取消",
  49. "onclick": function () {
  50. U.UF.C.isFunction(cancelFun) && cancelFun(); //判断是否存在回调 有则执行。
  51. U.UF.F.closeWindow(_form.form); //关闭窗口函数
  52. }
  53. }, _footer);
  54. //调用Uform窗体创建函数将主体内容添加到窗体中
  55. var _form = new U.UF.UI.form(
  56. "提示",
  57. _confirm,
  58. {
  59. "style": {
  60. "cssText": "font-size: 14px; background: rgb(255,255,255); width: 310px; position: fixed; box-shadow: 0 0 10px 3px rgb(0,0,0); border-radius: 5px;"
  61. }
  62. },
  63. {
  64. "istop": true,
  65. "isenlarge": false,
  66. "isstretching": false,
  67. "isnarrow": false
  68. },
  69. {
  70. "style": {
  71. "cssText": " background: rgb(59,88,120); padding: 5px; color: rgb(255,255,255); "
  72. }
  73. });
  74. return _form;
  75. }
  76. /**
  77. * 创建提示框
  78. * @content {string/elemnet} 内容
  79. * @callBackFun {function} 回调函数
  80. */
  81. U.UF.UI.Dialog = U.UF.UI.Dialog = function (content, callBackFun) {
  82. var _dialog = $$("div", { "style": { "cssText": "width: 100%; background: #fff; overflow:hidden; "} }); //创建提示框主体
  83. var _content = $$("div", { "style": { "cssText": "text-align: center; margin: 30px 20px 30px 20px; "} }, _dialog); //创建内容区域
  84. //判断内容是否为元素
  85. if (U.UF.C.isElement(content)) {
  86. U.selectEl(_content).append(content); //如果为元素则动态添加到对话框中
  87. } else {
  88. _content.innerHTML = content || '内容'; //如果为文字则修改inerHTML。
  89. }
  90. //创建页脚部分
  91. var footer = $$("div", { "style": { "cssText": "height:45px;"} }, _dialog);
  92. //调用Uform窗体创建函数将主体内容添加到窗体中
  93. var _form = new U.UF.UI.form("提示框", _dialog,
  94. {
  95. "style": {
  96. "cssText": "font-size: 14px; width: 300px; background:#fff; position: fixed; top: 100px; left: 40%; box-shadow: 0 0 10px 3px black; border-radius: 5px;"
  97. }
  98. },
  99. null,
  100. {
  101. "style": { "cssText": "background: #3b5878; padding: 10px; color:#fff;" }
  102. });
  103. //创建确定按钮 并绑定点击函数,默认点击后执行关闭窗体函数
  104. $$("div", {
  105. "style": {
  106. "cssText": "text-align: center; color: #fff; width: 30%; padding: 5px; background: #307ed0; border-radius: 5px;float: right; margin: 0 12px 12px 0;"
  107. },
  108. innerHTML: "确定", // 绑定innerHTML
  109. onclick: function () {
  110. U.UF.C.isFunction(callBackFun) && callBackFun(); //判断是否存在回调 有则执行。
  111. U.UF.F.closeWindow(_form.form); //关闭窗口函数
  112. }
  113. }, footer);
  114. }
  115. //#endregion
  116. //#region alert
  117. /*
  118. 创建点击确认对话框
  119. */
  120. U.UF.UI.alertClick = function (content, attr) {
  121. //创建点击确认对话框的主体区域
  122. var _content = $$("div", { "class": "USBalert_text", "style": { width: "100%"} });
  123. //判断内容是否为元素
  124. if (U.UF.C.isElement(content)) {
  125. //如果为元素则动态添加到对话框中
  126. U.selectEl(_content).append(content);
  127. }
  128. else {
  129. $$("div", { "style": { cssText: "text-align:center;padding:10px; margin:10px auto; word-break:break-word;" }, innerHTML: content || '内容' }, _content);
  130. }
  131. //创建页脚
  132. var _footer = $$("div", { "class": "USBalert_onclicks", style: { height: "43px"} }, _content);
  133. //调用Uform窗体创建函数将主体内容添加到窗体中
  134. var _form = new U.UF.UI.form("提示框", _content,
  135. {
  136. "style": {
  137. "cssText": "font-size: 16px; width:320px; background: rgb(255,255,255);box-shadow: 0 0 10px 3px rgb(0,0,0); border-radius: 5px;"
  138. }
  139. },
  140. {
  141. "isnarrow": false,
  142. "isenlarge": false,
  143. isstretching: false
  144. },
  145. {
  146. "style": {
  147. "cssText": "background: rgb(59,88,120); padding: 10px; color: rgb(255,255,255);"
  148. }
  149. });
  150. //创建确定按钮 并绑定点击函数,默认点击后执行关闭窗体函数
  151. $$("div", { "style": { "cssText": "text-align: center; color: #fff; width: 30%;max-width:150px; padding: 5px; background: #307ed0; border-radius: 5px;float: right; margin: 0 12px 12px 0;" }, innerHTML: "确定", onclick: function () { U.UF.F.closeWindow(_form.form); } }, _footer);
  152. }
  153. /**
  154. * 创建对话框
  155. */
  156. U.Alert = U.alert = function (c, t) {
  157. !t ? t = 3000 : "";
  158. var bg = $$("div", {
  159. "style": {
  160. "cssText": "padding: 12px 25px 12px 25px;font-size: 16px;max-width:300px;min-width:100px;color: rgba(255,255,255,1);background: rgba(0,0,0,0.75);border-radius: 10px;position: fixed;top:20%;left:0px;right:0px;margin:0px auto;text-align:center; word-break: break-word; "
  161. //white-space: nowrap; -o-text-overflow: ellipsis; text-overflow: ellipsis;
  162. },
  163. innerHTML: c
  164. }, document.body);
  165. U.UF.F.topWindow(bg);
  166. setTimeout(function () {
  167. bg.parentNode.removeChild(bg);
  168. }, t);
  169. }
  170. //#endregion
  171. //#endregion