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

来源:互联网 发布:北京宽带哪个好 知乎 编辑:程序博客网 时间:2024/06/04 20:05

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

0 0
原创粉丝点击