封装 jquery ui 的dialog
程序员文章站
2022-06-14 15:21:07
...
(function ($) {
var default1={
titleText:"提示对话框",
submitBtnText:"确 认",
cancelBtnText:"取 消",
width:"200",
height:"200",
openCall:function(){},
closeCall:function(){},
submitCall:function(){},
position:["middle","center"],
jq:"" ,//jquery对象 $("#alert")
jqMsg:"", //存放提示文字信息的jquery对象 $("#alertMsg")
msg:""//提示内容
};
$.alertNoButton=function(option){
var opt= $.extend(default1,option);
opt.jq.dialog("destroy" );
opt.jq.dialog({
modal:true,
title:opt.titleText,
width:opt.width,
height:opt.height,
position:opt.position,
resizable:false,
draggable:false,
open:function(even,ui){
if ($.isFunction(opt.openCall)) {
opt.openCall();
}
}
});
};
$.alertDialogs=function(option){
var opt= $.extend(default1,option);
opt.jq.dialog("destroy" );
opt.jq.dialog({
modal:true,
title:opt.titleText,
width:opt.width,
height:opt.height,
position:opt.position,
resizable:false,
draggable:false,
buttons: [
{
text: opt.submitBtnText,
click: function() {
if ($.isFunction(opt.submitCall)) {
opt.submitCall();
}
}
},
{
text:opt.cancelBtnText,
click: function() {
opt.jq.dialog("close");
}
}
],
open:function(even,ui){
$(".ui-dialog-buttonset button").eq(1).css({"margin-left":"40px"});
if ($.isFunction(opt.openCall)) {
opt.openCall();
}
},
close:function(){
if ($.isFunction(opt.closeCall)) {
opt.closeCall();
}
}
});
};
$.alertDialog = function (option){
var opt= $.extend(default1,option);
opt.jq.dialog( "destroy" );
opt.jq.dialog({
modal:true,
title:opt.titleText,
width:opt.width,
height:opt.height,
position:opt.position,
resizable:false,
draggable:false,
buttons: [
{
text: opt.submitBtnText,
click: function() {
if ($.isFunction(opt.submitCall)) {
opt.submitCall();
}
}
}
],
open:function(even,ui){
if(opt.jqMsg){
opt.jqMsg.text(opt.msg);
}
if ($.isFunction(opt.openCall)) {
opt.openCall();
}
},
close:function(even,ui){
if ($.isFunction(opt.closeCall)) {
opt.closeCall();
}
}
});
};
$.confirmDialog = function (option) {
var opt= $.extend(default1,option);
opt.jq.dialog("destroy");
opt.jq.dialog({
resizable:false,
draggable:false,
title:opt.titleText,
position:opt.position,
width:opt.width,
height:opt.height,
modal:true,
buttons: [
{
text: opt.submitBtnText,
click: function() {
if ($.isFunction(opt.submitCall)) {
opt.submitCall();
}
}
},
{
text:opt.cancelBtnText,
click: function() {
opt.jq.dialog("close");
}
}
],
open:function(){
opt.jqMsg.text(opt.msg);
}
});
}
})(jQuery);
调用实例:
$.alertDialog({titleText:"错误信息提示",height:"150",width:"300",jq:$("#alert"),jqMsg:$("#alertMsg") ,msg:"您不同意万事达服务条款,不能预定",
submitCall:function(){
$("#alert").dialog("close");
}
});
上一篇: 你知道在springboot中如何使用WebSocket吗
下一篇: Ajax实现跨域访问的三种方法
推荐阅读
-
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
-
在Vue项目中引入JQuery-ui插件的讲解
-
JQuery Dialog对话框 不能通过Esc关闭的原因分析及解决办法
-
在vue项目里怎么正确地引用 jquery 和 jquery-ui的插件?
-
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
-
jQuery封装的获取Url中的Get参数示例
-
jQuery Mobile 和 Kendo UI 的比较
-
使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框
-
jquery封装插件时匿名函数形参和实参的写法解释
-
基于Vue+element-ui 的Table二次封装的实现