公共弹框插件,模块化

xxl-job-admin/src/main/webapp/WEB-INF/template/common/common.macro.ftl

@@ -44,10 +44,14 @@
     <script src="${request.contextPath}/static/plugins/scrollup/jquery.scrollUp.min.js"></script>
     <!-- pace -->
     <script src="${request.contextPath}/static/plugins/pace/pace.min.js"></script>
-    <script src="${request.contextPath}/static/plugins/jquery/jquery.cookie.js"></script>
+    <#-- jquery cookie -->
+	<script src="${request.contextPath}/static/plugins/jquery/jquery.cookie.js"></script>
+
+	<#-- common -->
+    <script src="${request.contextPath}/static/js/xxl.alert.1.js"></script>
     <script src="${request.contextPath}/static/js/common.1.js"></script>
-    
     <script>var base_url = '${request.contextPath}';</script>
+
 </#macro>
 
 <#macro commonHeader>
@@ -175,110 +179,4 @@
 			<a href="http://my.oschina.net/xuxueli/blog/690978" target="_blank" >oschina</a>
 		</strong><!-- All rights reserved. -->
 	</footer>
-</#macro>
-
-<#macro comAlert >
-	<!-- ComAlert.模态框Modal -->
-	<div class="modal fade" id="ComAlert" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
-		<div class="modal-dialog">
-			<div class="modal-content">
-				<!--	<div class="modal-header"><h4 class="modal-title"><strong>提示:</strong></h4></div>	-->
-	         	<div class="modal-body"><div class="alert alert-success"></div></div>
-	         	<div class="modal-footer">
-	         		<div class="text-center" >
-	            		<button type="button" class="btn btn-default ok" data-dismiss="modal" >确认</button>
-	            	</div>
-	         	</div>
-			</div>
-		</div>
-	</div>
-	<!-- ComConfirm.模态框Modal -->
-	<div class="modal fade" id="ComConfirm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
-		<div class="modal-dialog">
-			<div class="modal-content">
-	         	<div class="modal-body"><div class="alert alert-success"></div></div>
-	         	<div class="modal-footer">
-	         		<div class="text-center" >
-	            		<button type="button" class="btn btn-primary ok" data-dismiss="modal" >确认</button>
-	            		<button type="button" class="btn btn-default cancel" data-dismiss="modal" >取消</button>
-	            	</div>
-	         	</div>
-			</div>
-		</div>
-	</div>
-	<!-- ComAlertTec.模态框Modal-科技感 -->
-	<div class="modal fade" id="ComAlertTec" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
-		<div class="modal-dialog">
-			<div class="modal-content-tec">
-	         	<div class="modal-body"><div class="alert" style="color:#fff;"></div></div>
-	         	<div class="modal-footer">
-	         		<div class="text-center" >
-	            		<button type="button" class="btn btn-info ok" data-dismiss="modal" >确认</button>
-	            	</div>
-	         	</div>
-			</div>
-		</div>
-	</div>
-	<script>
-		// 通用提示
-		var ComAlert = {
-			show:function(type, msg, callback){
-				// 弹框初始
-				if (type == 1) {
-					$('#ComAlert .alert').attr('class', 'alert alert-success');
-				} else {
-					$('#ComAlert .alert').attr('class', 'alert alert-warning');
-				}
-				$('#ComAlert .alert').html(msg);
-				$('#ComAlert').modal('show');
-				
-				$('#ComAlert .ok').click(function(){
-					$('#ComAlert').modal('hide');
-					if(typeof callback == 'function') {
-						callback();
-					}
-				});
-				
-				// $("#ComAlert").on('hide.bs.modal', function () {	});	// 监听关闭
-			}
-		};
-		// 通用确认弹框
-		var ComConfirm = {
-			show:function(msg, callback){
-				// 弹框初始
-				$('#ComConfirm .alert').attr('class', 'alert alert-warning');
-				$('#ComConfirm .alert').html(msg);
-				$('#ComConfirm').modal('show');
-				
-				$('#ComConfirm .ok').unbind("click");	// 解绑陈旧事件
-				$('#ComConfirm .ok').click(function(){
-					$('#ComConfirm').modal('hide');
-					if(typeof callback == 'function') {
-						callback();
-						return;
-					}
-				});
-				
-				$('#ComConfirm .cancel').click(function(){
-					$('#ComConfirm').modal('hide');
-					return;
-				});
-			}
-		};
-		// 提示-科技主题
-		var ComAlertTec = {
-			show:function(msg, callback){
-				// 弹框初始
-				$('#ComAlertTec .alert').html(msg);
-				$('#ComAlertTec').modal('show');
-				
-				$('#ComAlertTec .ok').click(function(){
-					$('#ComAlertTec').modal('hide');
-					if(typeof callback == 'function') {
-						callback();
-					}
-				});
-			}
-		};
-	</script>
 </#macro>

xxl-job-admin/src/main/webapp/WEB-INF/template/help.ftl

@@ -52,6 +52,5 @@
 	<@netCommon.commonFooter />
 </div>
 <@netCommon.commonScript />
-<@netCommon.comAlert />
 </body>
 </html>

xxl-job-admin/src/main/webapp/WEB-INF/template/jobcode/jobcode.index.ftl

@@ -88,7 +88,6 @@
 		<@netCommon.commonFooter />
 	</div>
 	
-<@netCommon.comAlert />
 <@netCommon.commonScript />
 <script src="${request.contextPath}/static/plugins/codemirror/lib/codemirror.js"></script>
 <script src="${request.contextPath}/static/plugins/codemirror/mode/clike/clike.js"></script>

xxl-job-admin/src/main/webapp/WEB-INF/template/jobinfo/jobinfo.index.ftl

@@ -250,7 +250,6 @@ public class DemoJobHandler extends IJobHandler {
 </div>
 
 <@netCommon.commonScript />
-<@netCommon.comAlert />
 <!-- DataTables -->
 <script src="${request.contextPath}/static/adminlte/plugins/datatables/jquery.dataTables.min.js"></script>
 <script src="${request.contextPath}/static/adminlte/plugins/datatables/dataTables.bootstrap.min.js"></script>

xxl-job-admin/src/main/webapp/WEB-INF/template/joblog/joblog.index.ftl

@@ -104,7 +104,6 @@
 </div>
 
 <@netCommon.commonScript />
-<@netCommon.comAlert />
 <!-- DataTables -->
 <script src="${request.contextPath}/static/adminlte/plugins/datatables/jquery.dataTables.min.js"></script>
 <script src="${request.contextPath}/static/adminlte/plugins/datatables/dataTables.bootstrap.min.js"></script>

xxl-job-admin/src/main/webapp/WEB-INF/template/login.ftl

@@ -38,7 +38,6 @@
 		</form>
 	</div>
 <@netCommon.commonScript />
-<@netCommon.comAlert />
 <script src="${request.contextPath}/static/plugins/jquery/jquery.validate.min.js"></script>
 <script src="${request.contextPath}/static/plugins/iCheck/icheck.min.js"></script>
 <script src="${request.contextPath}/static/js/login.1.js"></script>

xxl-job-admin/src/main/webapp/static/js/xxl.alert.1.js

@@ -0,0 +1,132 @@
+/**
+ * Created by xuxueli on 16/8/12.
+ *
+ * dependency, jquery + bootstrap
+ */
+
+// 通用提示
+var ComAlert = {
+    html:function(){
+        var html =
+            '<div class="modal fade" id="ComAlert" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">' +
+                '<div class="modal-dialog">' +
+                    '<div class="modal-content">' +
+                        '<div class="modal-header hidden"><h4 class="modal-title"><strong>提示:</strong></h4></div>' +
+                        '<div class="modal-body"><div class="alert alert-success"></div></div>' +
+                        '<div class="modal-footer">' +
+                            '<div class="text-center" >' +
+                                '<button type="button" class="btn btn-default ok" data-dismiss="modal" >确认</button>' +
+                            '</div>' +
+                        '</div>' +
+                    '</div>' +
+                '</div>' +
+            '</div>';
+        return html;
+    },
+    show:function(type, msg, callback){
+        // dom init
+        if ($('#ComAlert').length == 0){
+            $('body').append(ComAlert.html());
+        }
+
+        // 弹框初始
+        if (type == 1) {
+            $('#ComAlert .alert').attr('class', 'alert alert-success');
+        } else {
+            $('#ComAlert .alert').attr('class', 'alert alert-warning');
+        }
+        $('#ComAlert .alert').html(msg);
+        $('#ComAlert').modal('show');
+
+        $('#ComAlert .ok').click(function(){
+            $('#ComAlert').modal('hide');
+            if(typeof callback == 'function') {
+                callback();
+            }
+        });
+
+        // $("#ComAlert").on('hide.bs.modal', function () {	});	// 监听关闭
+    }
+};
+
+// 通用确认弹框
+var ComConfirm = {
+    html:function(){
+        var html =
+            '<div class="modal fade" id="ComConfirm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">' +
+                '<div class="modal-dialog">' +
+                    '<div class="modal-content">' +
+                        '<div class="modal-body"><div class="alert alert-success"></div></div>' +
+                            '<div class="modal-footer">' +
+                            '<div class="text-center" >' +
+                                '<button type="button" class="btn btn-primary ok" data-dismiss="modal" >确认</button>' +
+                                '<button type="button" class="btn btn-default cancel" data-dismiss="modal" >取消</button>' +
+                            '</div>' +
+                        '</div>' +
+                    '</div>' +
+                '</div>' +
+            '</div>';
+        return html;
+    },
+    show:function(msg, callback){
+        // dom init
+        if ($('#ComConfirm').length == 0){
+            $("body").append(ComConfirm.html());
+        }
+
+        // 弹框初始
+        $('#ComConfirm .alert').attr('class', 'alert alert-warning');
+        $('#ComConfirm .alert').html(msg);
+        $('#ComConfirm').modal('show');
+
+        $('#ComConfirm .ok').unbind("click");	// 解绑陈旧事件
+        $('#ComConfirm .ok').click(function(){
+            $('#ComConfirm').modal('hide');
+            if(typeof callback == 'function') {
+                callback();
+                return;
+            }
+        });
+
+        $('#ComConfirm .cancel').click(function(){
+            $('#ComConfirm').modal('hide');
+            return;
+        });
+    }
+};
+// 提示-科技主题
+var ComAlertTec = {
+    html:function(){
+        var html =
+            '<div class="modal fade" id="ComAlertTec" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">' +
+                '<div class="modal-dialog">' +
+                    '<div class="modal-content-tec">' +
+                        '<div class="modal-body"><div class="alert" style="color:#fff;"></div></div>' +
+                        '<div class="modal-footer">' +
+                            '<div class="text-center" >' +
+                                '<button type="button" class="btn btn-info ok" data-dismiss="modal" >确认</button>' +
+                            '</div>' +
+                        '</div>' +
+                    '</div>' +
+                '</div>' +
+            '</div>';
+        return html;
+    },
+    show:function(msg, callback){
+        // dom init
+        if ($('#ComAlertTec').length == 0){
+            $('body').append(ComAlertTec.html());
+        }
+
+        // 弹框初始
+        $('#ComAlertTec .alert').html(msg);
+        $('#ComAlertTec').modal('show');
+
+        $('#ComAlertTec .ok').click(function(){
+            $('#ComAlertTec').modal('hide');
+            if(typeof callback == 'function') {
+                callback();
+            }
+        });
+    }
+};