`
不会永远是菜鸟
  • 浏览: 792 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

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";

           return false;

       });

}).fail(function(){

        location.href="index";

});//类似与confirm()弹出框 ;

 

2、

$.msg({

    text:"个人信息修改成功!",

    buttons:'确定'

}).done(function(){

    location.href="index";

});类似与alert()

3、

msg(‘请先选择终端!’);

  • 大小: 5.8 KB
  • 大小: 8.2 KB
  • 大小: 7.7 KB
分享到:
评论

相关推荐

    jquery ui Dialog 添加最大最小化按钮控制

    在IT领域,jQuery UI是一个非常流行的前端开发库,它提供了许多可交互的用户界面组件,如Dialog(对话框)就是其中之一。"jquery ui Dialog 添加最大最小化按钮控制"的主题涉及如何扩展jQuery UI Dialog的功能,使其...

    jquery ui dialog 扩展

    这篇内容将深入探讨jQuery UI Dialog的扩展,包括如何自定义行为、增强功能以及与其他技术(如Ajax)的集成。 首先,Dialog是jQuery UI库中的一个核心组件,它基于jQuery框架,提供了一种优雅的方式来创建可交互的...

    JQuery UI Dialog

    JQuery UI Dialog 是一个功能强大且灵活的对话框组件,它提供了许多有用的属性和方法来帮助开发者快速创建自定义的对话框。在本文中,我们将详细介绍 JQuery UI Dialog 的一些重要属性和方法,并提供实践中常见的...

    JQuery UI Dialog使用样例

    **jQuery UI Dialog 使用详解** jQuery UI 是一个基于 jQuery 的用户界面库,提供了丰富的交互组件,其中 Dialog(对话框)是一个非常实用的功能。Dialog 可以用于创建模态或非模态窗口,通常用于显示警告、确认...

    Jquery UI dialog 详解 (弹出层)

    ### Jquery UI Dialog 详解(弹出层) #### 一、引言 Jquery UI Dialog 是 jQuery UI 库中的一个重要组件,它提供了一个简洁而强大的界面来创建对话框或者弹出层。通过简单的配置和使用,开发人员可以轻松地集成...

    jquery ui中的dialog

    jQuery UI Dialog使用CSS来定义样式,允许开发者通过更改主题或添加自定义CSS来改变对话框的外观。默认情况下,jQuery UI提供了一些预设的主题,如`smoothness`、`ui-darkness`等。 6. **附加功能** Dialog还支持...

    jqueryUI_dialog实例

    本文将深入探讨“jqueryUI_dialog实例”,这是一个关于如何使用jQuery UI库创建对话框(Dialog)功能的实践案例。 jQuery UI的Dialog组件是网页应用中常见的一种交互元素,用于显示模态或非模态窗口,例如警告、...

    jquery-ui-dialog-demo

    `jquery-ui-dialog-demo` 是一个基于 jQuery UI 库的弹出窗口插件示例,它提供了丰富的交互式对话框功能,包括模拟原生 JavaScript 的 `alert` 和 `confirm` 对话框以及自定义的打开(open)模式。这个插件使得在...

    jquery_dialog jquery_dialog jquery_dialog

    $(".ui-dialog-titlebar-close").click(function() { // 自定义关闭操作 }); ``` 三、Dialog的使用场景 1. 提示信息:对于简单的消息提示,Dialog提供了一键式解决方案,如警告或确认消息: ```javascript $....

    浅析JQuery UI Dialog的样式设置问题

    在进行Web开发时,JQuery UI Dialog是一个非常实用的组件,它用于创建弹出式对话框。它不仅功能强大,而且拥有丰富的API可以定制对话框的外观和行为。但是,要让对话框的样式符合特定的设计要求,有时可能会遇到一些...

    jQuery UI Frame Dialog官方修正版(官方1.1.2版本上面有问题)

    jQuery UI Frame Dialog则是这个库的一个特定组件,专为构建具有边框和自定义样式的对话框而设计。在网页开发中,对话框通常用于显示警告、确认信息,或者作为轻量级的窗口来展示内容或进行交互。 该插件的主要功能...

    JQuery UI 中文帮助文档

    jQuery UI的自定义和主题 jQuery UI 提供了灵活的主题系统,允许开发者通过修改CSS样式来自定义组件的外观。默认提供了一套名为“smoothness”的主题,但开发者可以根据需求创建自己的主题,或者使用在线工具如...

    jquery ui-1.12.1.custom

    首先,jQuery UI 1.12.1 是一个稳定且广泛使用的版本,它包含了众多组件,如日期选择器(Datepicker)、对话框(Dialog)、拖放(Draggable)、可排序(Sortable)和可堆叠(Stackable)等。这些组件极大地提高了...

    jqueryUI dialog

    《jQuery UI Dialog详解及其应用实践》 jQuery UI Dialog是一款基于jQuery库的强大对话框组件,它为Web应用程序提供了灵活且功能丰富的交互式对话框。Dialog组件不仅支持基本的弹出框功能,还可以实现模态对话框、...

    ,jqueryui jquery ui包 效果不错,只是为了自己保存

    这个名为"jquery-ui-1.8.4.custom"的压缩包包含了jQuery UI的自定义版本,版本号为1.8.4,这意味着它是2010年左右的版本,因为jQuery UI的最新版本已经超过了1.13。 **jQuery UI的核心组件与功能** 1. **主题定制*...

    demo_jquery-dialog

    jQuery UI库中的Dialog组件则提供了丰富的功能和自定义选项,使得创建美观且功能强大的对话框变得简单易行。本篇将详细讲解jQuery UI Dialog的使用方法、特性以及实践中的应用。 **1. jQuery UI Dialog 的基本使用*...

    jQuery UI组件 jQuery UI

    3. **Dialog(对话框)**:对话框组件创建可自定义的模态或非模态窗口,用于提示、确认、警告等交互场景,可以设置大小、位置、按钮等属性。 4. **Draggable(拖放)**:拖放功能使得页面元素可以被用户轻松移动,...

    jquery-ui.css、jquery-ui.js下载

    例如,要创建一个对话框,只需简单调用`.dialog()`方法,jQuery UI会自动处理剩下的布局、事件绑定和动画效果。 jQuery UI的组件丰富多样,例如: 1. **Dialogs** - 提供模态和非模态对话框,用于展示信息、警告或...

    jquery ui & themes

    1. **部件(Widgets)**:jQuery UI提供了多种UI部件,如日期选择器(Datepicker)、对话框(Dialog)、滑块(Slider)、进度条(Progressbar)、标签页(Tabs)和下拉菜单(Selectmenu)等。这些部件都封装了复杂的...

    JQueryUI,EasyUI一些控件的使用

    JQueryUI提供了多种主题,如smoothness、redmond等,开发者可以根据项目需求选择或自定义主题,确保应用界面符合品牌风格。此外,ThemeRoller工具允许开发者在线定制主题,进一步个性化用户的视觉体验。 接下来转向...

Global site tag (gtag.js) - Google Analytics