需要注意的是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();
}
});
},'');