公共弹框插件,模块化

v1.4
xueli.xue 8 years ago
parent 70a12160b2
commit 8e2d6d8dac

@ -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>

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

@ -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>

@ -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>

@ -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>

@ -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>

@ -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();
}
});
}
};
Loading…
Cancel
Save