学习--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("取消");
            }
        });
    });
});