当前位置: 代码迷 >> 综合 >> 实现项目中的通用弹框的类
  详细解决方案

实现项目中的通用弹框的类

热度:8   发布时间:2024-01-21 03:43:18.0

需要注意的是function里面的function函数的this指针发生改变,用了临时变量var _this= this来保存


var dialog_html= '\
<img alt="点击可以关闭" src="/static/images/disk.png" width="40px" height="30px;">\
<div class="title"></div>\
<div class="loadgif"><img alt="Loading..." src="/static/images/load.gif"/></div>\
<div class="content"><span class="active"></span></div>\
<div class="partparam"></div>\
<div class="bottom">\<input type="button" class="btnok" value="OK">\<input type="button" class="btnnoOk" value="CANCEL">\
</div>';function  Dialog(select,store_name) {this.select = select;//原来选择器this.status = "";   //对话框状态this.div = $(this.select); //jquery对象this.store_name = store_name
}Dialog.prototype.get_div = function () {return this.div;
};//弹框
Dialog.prototype.open = function(){this.close();//防止连续创建对话框this.div.append(dialog_html);this.div.find(".loadgif").hide();this.div.css("display",'block');this.div.css("left", window.scrollX+(window.innerWidth - this.div.width()) / 2).css("top", window.scrollY+(window.innerHeight - this.div.height()) / 2);
};//关闭并清理
Dialog.prototype.close= function(){this.div.empty();this.div.css("display",'none');this.status = "";
};//点击取消,鼠标点击和回车键盘都可以用
Dialog.prototype.register_cancel = function (fn) {this.div.on("click keyup",".btnnoOk",function (event) {if(event.type =="keyup" && event.keyCode != 13){return;}fn();});
};//点击确定,鼠标点击和回车键盘都可以用
Dialog.prototype.register_ok = function (fn, status) {var _this = this;//在回调的this会变;this.div.on("click keyup", ".btnok", function (event) {if (event.type == "keyup" && event.keyCode != 13) {return;}if (!_this.check_status(status)) {return;}fn();});
};Dialog.prototype.set_status = function (status) {this.status = status;
};
//检查对话框状态
Dialog.prototype.check_status = function (status) {if(this.status != status){this.close();return false;}else{return true}
};
//保存对话框输入的文本
Dialog.prototype.param_add_input = function (desc, key) {var uuid = sessionStorage.getItem(this.store_name+key) ? sessionStorage.getItem(this.store_name+key):'';this.div.find(".partparam").append('<li><span><no>'+desc+'</no><input type="text" name="'+key+'" width="200px"  value="'+uuid+'"></span></li>');
};
Dialog.prototype.param_get_input = function (key) {var uuid = this.div.find("input[name='"+key+"']").val();sessionStorage.setItem(this.store_name+key, uuid);return uuid;
};//请求结果输出
Dialog.prototype.success_output=function (text) {this.div.find(".content span").removeClass("active").text(text);this.div.find(".partparam").css("display", "none");
};
Dialog.prototype.fail_output=function (text) {this.div.find(".content span").addClass("active").text(text);this.div.find(".partparam").css("display","none");
};

使用这个类:弹出的时候open一下,然后注册上ok和cancel按钮

var mountdialog = new Dialog("#mountdialog","");
$(".parts").on("click",".part",function () {if($(this).hasClass("active2")){var part = $(this).text().split('/')[0];mountdialog.close();var div = mountdialog.get_div();div.attr("part", part);objstoredialog.open();div.find(".title").text($.i18n.prop('Osd_start_mount_prompt1'));div.find(".content span").removeClass("active").text($.i18n.prop('Osd_start_mount_text1'));}
});
mountdialog.register_cancel(function () {mountdialog.close();
});mountdialog.register_ok(function () {var div = mountdialog.get_div();var part = div.attr("part");$.ajax({url: "/osd/opt/mount",type: "POST",datatype: 'json',data: {"server_ip": get_cur_server(),"part": part},beforeSend: function (xhr, settings) {xhr.setRequestHeader("X-CSRFToken", getCookie2('csrftoken'));},success: function (arg) {mountdialog.close();}});
},'');

 

  相关解决方案