学习--jquery 自定义插件 面向对象 -- 模拟 jquery EasyUi的 自定义 alert + confirm

(function ($) {

/**
* 窗口外框
* @returns {*}
*/
function my_window() {
var win = $('<div class="m-layer z-display"></div>').appendTo('body');
return win;
};

function my_table() {
var table = $('<table></table>');
return table;
};

function my_tr() {
var tr = $('<tr></tr>');
return tr;
};

function my_td() {
var td = $('<td></td>');
return td;
};

function my_lywrap() {
var div = $('<div class="lywrap"></div>');
return div;
};

/**
* 标题
* @returns {*}
*/
function my_title(text) {
var lytt = $('<div class="lytt"></div>');
var title = $('<h2 class="clx-font-bold clx-article-fontColor clx-font-xl">标题</h2>').appendTo(lytt);
title.html(text);
return lytt
};

function my_lyct(text) {
var lyct = $('<div class="lyct"></div>');
lyct.html(text);
return lyct;
};

/**
* 文本内容
* @returns {*}
*/
function my_content(text) {
var content = $('<p class="warring-text">确定要执行此操作？</p>');
content.html(text);
return content;
};

/**
* 关闭 X 按钮
* @returns {*}
*/
function my_close() {
var close = $('<span class="lyclose">×</span>');
close.click(function () {
$('body').css({overflow: ''});
$('body > div.z-show').remove();
});
return close;
};

/**
* 按钮区域组
* @returns {*}
*/
function my_lybt() {
var lybt = $('<div class="lybt"></div>');
return lybt;
};

/**
* 按钮区域组
* @returns {*}
*/
function my_buttonGroup() {
var group = $('<div class="check-btn-group"></div>');
return group;
};

/**
* 确定按钮
* @returns {*}
*/
function my_ok(callback) {
var ok = $('<a class="clx-sure-btn">确定</a>');
ok.click(function () {
if (callback) {
callback(true);
}
my_close().click();
});
return ok;
};

/**
* 取消按钮
* @returns {*}
*/
function my_cancel(callback) {
var cancel = $('<a class="clx-default-btn">取消</a>');
cancel.click(function () {
if (callback) {
callback(false);
}
my_close().click();
});
return cancel;
};

/**
* $.messager 相当于定义一个java的 类对象
* $.messager.alert,$.messager.confirm 相当于 类中的方法
*
* @param options
* @returns {boolean}
*/
$.messager = {
alert: function (tt, message) {
// 动态拼接模块
var win = my_window();
var table = my_table().appendTo(win);
var table_tr = my_tr().appendTo(table);
var table_tr_td = my_td().appendTo(table_tr);
var table_tr_td_lywrap = my_lywrap().appendTo(table_tr_td);
var table_tr_td_lywrap_title = my_title(tt).appendTo(table_tr_td_lywrap);
my_lyct(message).appendTo(table_tr_td_lywrap);
my_close().appendTo(table_tr_td_lywrap_title);
win.removeClass('z-display').addClass('m-layer z-show');
$('body').css({overflow: 'hidden'});
},
confirm: function (tt, message, callBack) {
// 动态拼接模块
var win = my_window();
var table = my_table().appendTo(win);
var table_tr = my_tr().appendTo(table);
var table_tr_td = my_td().appendTo(table_tr);
var table_tr_td_lywrap = my_lywrap().appendTo(table_tr_td);
var table_tr_td_lywrap_title = my_title(tt).appendTo(table_tr_td_lywrap);
var table_tr_td_lywrap_lyct = my_lyct(my_content(message)).appendTo(table_tr_td_lywrap);
var table_tr_td_lywrap_lybt = my_lybt().appendTo(table_tr_td_lywrap);
var table_tr_td_lywrap_lybt_buttonGroup = my_buttonGroup().appendTo(table_tr_td_lywrap_lybt);
my_close().appendTo(table_tr_td_lywrap_title);
my_ok(callBack).appendTo(table_tr_td_lywrap_lybt_buttonGroup);
my_cancel(callBack).appendTo(table_tr_td_lywrap_lybt_buttonGroup);
win.removeClass('z-display').addClass('m-layer z-show');
$('body').css({overflow: 'hidden'});
}
};
// 类对象的扩展属性
$.messager.defaults = {ok: "Ok", cancel: "Cancel"};
})(jQuery);

/**
* 调用方法
*/
$(function () {
$('#alert').click(function () {
$.messager.alert("操作提示", "您确定要执行操作吗？");
});
$('#confirm').click(function () {
$.messager.confirm("操作提示", "您确定要执行操作吗？", function (data) {
if (data) {
alert("确定");
}
else {
alert("取消");
}
});
});
});