zoukankan      html  css  js  c++  java
  • jquery实现代替alert网页提示框代码封装

    windows的alert不好修改,一丑二难用,我常用2种, 一种layer,另一种dialog,以下为dialog部分js封装

    //前台调用方法封装。
    //通用弹出提示文本信息
    
    jQuery.extend(jQuery, {
    
        // jQuery UI alert弹出提示
        jqalert: function (text, title, fn) {
            var html =
        '<div class="dialog" id="dialog-message">' +
        '  <p>' +
        '    <span class="ui-icon ui-icon-circle-check" style="float: left; margin: 0 7px 0 0;"></span>' + text +
        '  </p>' +
        '</div>';
            return $(html).dialog({
                //autoOpen: false,
                resizable: false,
                modal: true,
                show: {
                    effect: 'fade',
                    duration: 300
                },
                title: title || "提示信息",
                buttons: {
                    "确定": function () {
                        var dlg = $(this).dialog("close");
                        fn && fn.call(dlg);
                    }
                }
            });
        },
    
        // jQuery UI alert弹出提示,一定间隔之后自动关闭
        jqtimeralert: function (text, title, fn, timerMax) {
            var dd = $(
        '<div class="dialog" id="dialog-message">' +
        '  <p>' +
        '    <span class="ui-icon ui-icon-circle-check" style="float: left; margin: 0 7px 0 0;"></span>' + text +
        '  </p>' +
        '</div>');
            dd[0].timerMax = timerMax || 3;
            return dd.dialog({
                //autoOpen: false,
                resizable: false,
                modal: true,
                show: {
                    effect: 'fade',
                    duration: 300
                },
                open: function (e, ui) {
                    var me = this,
              dlg = $(this),
              btn = dlg.parent().find(".ui-button-text").text("确定(" + me.timerMax + ")");
                    --me.timerMax;
                    me.timer = window.setInterval(function () {
                        btn.text("确定(" + me.timerMax + ")");
                        if (me.timerMax-- <= 0) {
                            dlg.dialog("close");
                            fn && fn.call(dlg);
                            window.clearInterval(me.timer); // 时间到了清除计时器
                        }
                    }, 1000);
                },
                title: title || "提示信息",
                buttons: {
                    "确定": function () {
                        var dlg = $(this).dialog("close");
                        fn && fn.call(dlg);
                        window.clearInterval(this.timer); // 清除计时器
                    }
                },
                close: function () {
                    window.clearInterval(this.timer); // 清除计时器
                }
            });
        },
    
        // jQuery UI confirm弹出确认提示
        jqconfirm: function (text, title, fn1, fn2) {
            var html =
        '<div class="dialog" id="dialog-confirm">' +
        '  <p>' +
        '    <span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>' + text +
        '  </p>' +
        '</div>';
            return $(html).dialog({
                //autoOpen: false,
                resizable: false,
                modal: true,
                show: {
                    effect: 'fade',
                    duration: 300
                },
                title: title || "提示信息",
                buttons: {
                    "确定": function () {
                        var dlg = $(this).dialog("close");
                        fn1 && fn1.call(dlg, true);
                    },
                    "取消": function () {
                        var dlg = $(this).dialog("close");
                        fn2 && fn2(dlg, false);
                    }
                }
            });
        },
    
        // jQuery UI 弹出iframe窗口
        jqopen: function (url, options) {
            var html =
        '<div class="dialog" id="dialog-window" title="提示信息">' +
        ' <iframe src="' + url + '" frameBorder="0" style="border: 0; " scrolling="auto" width="100%" height="100%"></iframe>' +
        '</div>';
            return $(html).dialog($.extend({
                modal: true,
                closeOnEscape: false,
                draggable: false,
                resizable: false,
                close: function (event, ui) {
                    $(this).dialog("destroy"); // 关闭时销毁
                }
            }, options));
        },
    
        // jQuery UI confirm提示
        confirm: function (evt, text, title) {
            evt = $.event.fix(evt);
            var me = evt.target;
            if (me.confirmResult) {
                me.confirmResult = false;
                return true;
            }
            jQuery.jqconfirm(text, title, function (e) {
                me.confirmResult = true;
                if (e) {
                    if (me.href && $.trim(me.href).indexOf("javascript:") == 0) {
                        $.globalEval(me.href);
                        me.confirmResult = false;
                        return;
                    }
                    var t = me.type && me.type.toLowerCase();
                    if (t && me.name && (t == "image" || t == "submit" || t == "button")) {
                        __doPostBack(me.name, "");
                        me.confirmResult = false;
                        return;
                    }
                    if (me.click) me.click(evt);
                }
                return false;
            });
            return false;
        }
    });
  • 相关阅读:
    java 递归函数
    iOS安全攻防(三):使用Reveal分析他人app
    mapreduce任务失败、重试、猜測式运行机制小结
    javascript UniqueID属性
    弧度和角度的转换
    批处理批量创建90个用户
    【设计模式】状态模式
    【.NET进程通信】初探.NET中进程间通信的简单的实现
    天将降大任于斯人也,必先苦其心志,劳其筋骨,饿其体肤,空乏其身,行拂乱其所为,所以动心忍性,增益其所不能
    冷门却使用的 javascript 技巧
  • 原文地址:https://www.cnblogs.com/hegx/p/6053439.html
Copyright © 2011-2022 走看看