天天看點

jquery ui dialog自定義

//dialog腳本定義

define(['jquery', 'jqueryUI'], function($) {

    var self = function(options) {

        var msg;

        if (!self.uiDialog) {

            self.uiDialog = $('<div title="提示"></div>').appendTo('body');

            self.uiDialog.dialog({

                autoOpen : false

            });

        }

       if (self.callback && !(self.callback.state() == "resolved"||self.callback.state()=="rejected")) {

            return false;

        }

        clearTimeout(self._timer);

        self.uiDialog.dialog("close");

        if ( typeof options === 'string') {

            msg = options;

            options = {

                "modal" : false,

                "open" : function(event, ui) {

                    self._timer = setTimeout(function() {

                        self.uiDialog.dialog('close');

                    }, 1800);

                },

                "buttons" : {},

                "closeOnEscape" : true

            };

        } else if ( typeof options === 'object') {

            msg = options["text"];

            if (!options["buttons"]) {

                self.callback = $.Deferred();

                $.extend(options, {

                dialogClass: "my_point_dialog",

                    open : $.noop,

                    modal : true,

                    buttons : {

                        '确定' : function() {

                            self.callback.resolveWith(options);

                            $(this).parent().removeClass('my_point_dialog');

                            $(this).dialog("close");

                        },

                        '取消' : function() {

                        $(this).parent().removeClass('my_point_dialog');

                            $(this).dialog("close");

                        }

                    },

                    closeOnEscape : false,

                    close:function(){

                    self.callback.rejectWith(options);

                    }

                });

            }else if(options['buttons'] === '确定'){

self.callback = $.Deferred();

$.extend(options, {

                    open : $.noop,

                    modal : true,

                    buttons : {

                    '确定': function() {

                    $(this).parent().removeClass('my_point_dialog');

                            $(this).dialog("close");

                        }

                    },

                    closeOnEscape : false,

                    close:function(){

                    self.callback.resolveWith(options);

                    }

                });

};

        }

        self.uiDialog.html('<p>' + msg + '</p>');

        self.uiDialog.dialog("option", options).dialog('open');

        return self.callback;

    };

    $.msg = self;

    return self;

}); 

js調用:

1、

$.msg({

       text:"密碼修改成功,是否重新登入?",

}).done(function(){

    $.ajax({

           url : "logout",

           type: 'post' 

       }).done(function(){

           location.href="index" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" ;

           return false;

       });

}).fail(function(){

        location.href="index" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" ;

});//類似與confirm()彈出框 ;

2、

$.msg({

    text:"個人資訊修改成功!",

    buttons:'确定'

}).done(function(){

    location.href="index" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" ;

});類似與alert()

3、

msg(‘請先選擇終端!’);