`

封装 jquery ui 的dialog

 
阅读更多
(function ($) {
    var default1={
        titleText:"提示对话框",
        submitBtnText:"确 认",
        cancelBtnText:"取 消",
        width:"200",
        height:"200",
        openCall:function(){},
        closeCall:function(){},
        submitCall:function(){},
        position:["middle","center"],
        jq:"" ,//jquery对象 $("#alert")
        jqMsg:"", //存放提示文字信息的jquery对象 $("#alertMsg")
        msg:""//提示内容
    };
    $.alertNoButton=function(option){
        var opt= $.extend(default1,option);
        opt.jq.dialog("destroy" );
        opt.jq.dialog({
            modal:true,
            title:opt.titleText,
            width:opt.width,
            height:opt.height,
            position:opt.position,
            resizable:false,
            draggable:false,
            open:function(even,ui){
                if ($.isFunction(opt.openCall)) {
                    opt.openCall();
                }
            }
        });
    };
    $.alertDialogs=function(option){
        var opt= $.extend(default1,option);
        opt.jq.dialog("destroy" );
        opt.jq.dialog({
            modal:true,
            title:opt.titleText,
            width:opt.width,
            height:opt.height,
            position:opt.position,
            resizable:false,
            draggable:false,
            buttons: [
                {
                    text: opt.submitBtnText,
                    click: function() {
                        if ($.isFunction(opt.submitCall)) {
                            opt.submitCall();
                         }
                    }
                },
                {
                    text:opt.cancelBtnText,
                    click: function() {
                        opt.jq.dialog("close");
                    }
                }
            ],

            open:function(even,ui){
                $(".ui-dialog-buttonset button").eq(1).css({"margin-left":"40px"});
                 if ($.isFunction(opt.openCall)) {
                     opt.openCall();
                 }
                },
            close:function(){
                if ($.isFunction(opt.closeCall)) {
                    opt.closeCall();
                }
            }

        });
    };
    $.alertDialog = function (option){
        var opt= $.extend(default1,option);
        opt.jq.dialog( "destroy" );
        opt.jq.dialog({
            modal:true,
            title:opt.titleText,
            width:opt.width,
            height:opt.height,
            position:opt.position,
            resizable:false,
            draggable:false,
            buttons: [
                {
                    text: opt.submitBtnText,
                    click: function() {
                        if ($.isFunction(opt.submitCall)) {
                            opt.submitCall();
                        }
                    }
                }
            ],
            open:function(even,ui){
                if(opt.jqMsg){
                    opt.jqMsg.text(opt.msg);
                }
                if ($.isFunction(opt.openCall)) {
                    opt.openCall();
                }
            },
            close:function(even,ui){
                if ($.isFunction(opt.closeCall)) {
                    opt.closeCall();
                }
            }
        });
    };
    $.confirmDialog = function (option) {
        var opt= $.extend(default1,option);
        opt.jq.dialog("destroy");
        opt.jq.dialog({
            resizable:false,
            draggable:false,
            title:opt.titleText,
            position:opt.position,
            width:opt.width,
            height:opt.height,
            modal:true,
            buttons: [
                {
                    text: opt.submitBtnText,
                    click: function() {
                        if ($.isFunction(opt.submitCall)) {
                            opt.submitCall();
                        }
                    }
                },
                {
                    text:opt.cancelBtnText,
                    click: function() {
                        opt.jq.dialog("close");
                    }
                }
            ],
            open:function(){
              opt.jqMsg.text(opt.msg);
            }
        });
    }
})(jQuery);

  调用:

 

 $.alertDialog({titleText:"错误信息提示",height:"150",width:"300",jq:$("#alert"),jqMsg:$("#alertMsg") ,msg:"您不同意万事达服务条款,不能预定",
                submitCall:function(){
                    $("#alert").dialog("close");
                }
            });

  

 

分享到:
评论

相关推荐

    jQueryUI的Dialog的简单封装

    总之,通过封装jQueryUI Dialog,我们可以创建一个更加友好的API,简化代码,提高可维护性。这个过程不仅展示了如何优化现有的工具,也鼓励开发者思考如何根据项目需求定制和扩展库的功能。如果你在实际工作中遇到...

    封装JQuery Dialog实现Dialog、Tip、alert和confirm

    这个“封装JQuery Dialog实现Dialog、Tip、alert和confirm”的主题聚焦于如何通过自定义代码来封装jQuery Dialog的功能,以便更好地适应项目需求。下面将详细介绍这个主题中的关键知识点。 首先,jQuery Dialog是...

    JQueryUI,EasyUI一些控件的使用

    总结起来,JQueryUI和EasyUI都是强大的前端开发工具,它们提供了一系列预封装的UI控件,帮助开发者快速构建美观且交互性强的Web应用。无论你是选择JQueryUI的丰富组件和主题定制,还是EasyUI的轻量级和易用性,都...

    jquery ui & themes

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

    jQueryUI API文档资料

    1. **组件(Widgets)**:jQuery UI的核心在于它的组件,这些组件是预先封装好的UI元素,如Accordion(手风琴)、Autocomplete(自动完成)、Button(按钮)、Calendar(日历,即日期选择器)、Dialog(对话框)、...

    jQueryUI V1.12.1

    1. **部件(Widgets)**:jQueryUI提供了许多预先封装好的UI部件,如日期选择器(Datepicker)、滑块(Slider)、对话框(Dialog)、进度条(Progressbar)、下拉菜单(Autocomplete)等。这些部件都具有高度可定制...

    jquery UI(笔记)

    jQuery UI 可以与其他JavaScript库和框架如AngularJS、React、Vue等配合使用,通过适当的封装和适配,实现更复杂的交互功能。 总之,jQuery UI 是一个强大且灵活的前端开发工具,它的丰富组件和强大的交互能力使得...

    ssh+jquery ui

    jQuery UI则是一个基于jQuery JavaScript库的用户界面插件集合,提供了丰富的交互效果和可自定义的主题,如对话框、拖放功能、日期选择器等,用于提升Web应用的用户体验。 在这个项目中,SSH框架主要负责后端业务...

    jquery api, jquery ui api, jquery源码分析

    4. **封装Ajax(AJAX Wrapping)**:jQuery如何对XMLHttpRequest对象进行封装,提供了一致且易于使用的接口。 5. **动画实现(Animation Queue)**:理解jQuery如何处理动画队列,确保动画顺序执行。 通过学习...

    jQuery UI Dialog 创建友好的弹出对话框实现代码

    jQuery UI Dialog 是一个基于 jQuery 的组件,用于创建交互式的弹出对话框。它提供了一种简单的方法来增强网站的用户体验,允许用户与页面上的内容进行更深入的交互。以下是关于如何使用 jQuery UI Dialog 的详细...

    jquery-ui.js

    1. **部件(Widgets)**:jQuery UI提供了一系列的部件,如日期选择器(Datepicker)、对话框(Dialog)、下拉菜单(Autocomplete)等,这些部件都是预封装好的,开发者可以直接使用,极大地提高了开发效率。...

    jquery | UI 开发包

    总结来说,jQuery UI是一个功能丰富的Web UI开发包,它提供了多种预先封装的组件,简化了复杂的交互实现,为开发者带来了高效和便捷。通过其强大的定制能力和易用的API,jQuery UI在众多Web开发工具中占据了一席之地...

    jquery_ui很完整

    jQuery UI 的核心理念是简化前端开发,它包含了一系列预先封装好的组件,如对话框(Dialog)、日期选择器(Datepicker)、拖放功能(Draggable)、可排序列表(Sortable)等。这些组件不仅可以节省开发时间,还能...

    Jquery UI

    2. **部件(Widgets)**: jQuery UI 包含多个预先封装好的UI部件,如`Dialog`(对话框)、`Accordion`(手风琴)、`Slider`(滑块)、`Datepicker`(日期选择器)、`Tabs`(标签页)等。每个部件都有一套完整的API,...

    JQuery.UI.Dialog的封装,方便开发时的使用

    JQuery.UI.Dialog的封装,方便开发时的使用,供大家一起共同分享学习。

    jquery ui 1.8.17

    4. **事件处理**:jQuery UI的组件封装了大量的事件处理函数,如start、stop、change等,使得开发者能轻松控制组件的行为。 二、jQuery UI 1.8.17的亮点 1. **性能优化**:1.8.17版本对代码进行了深度优化,提高了...

    jquery-ui库

    3. **UI组件**: 提供了如对话框(Dialog)、日历(Datepicker)、进度条(Progressbar)、下拉菜单(Selectmenu)、滑块(Slider)、可折叠面板(Accordion)、tabs(选项卡)等常见UI元素,这些组件都封装了复杂的...

    jqueryUI

    jQuery UI 包含了一系列的可定制、可交互的界面元素,如对话框(Dialog)、日历(Datepicker)、拖放(Draggable)、可排序(Sortable)和可堆叠(Resizable)等,这些都极大地简化了前端开发工作。 在深入讲解...

    jquery ui 帮助文档

    为了减少页面加载时间,可以通过在线构建工具(如 http://jqueryui.com/download/)选择需要的组件和主题,只加载必要的资源。此外,利用CDN服务可加快文件的加载速度。 五、jQuery UI与现代前端框架的结合 虽然...

    ember中使用jquery ui的问题

    jQuery UI 的 `dialog()` 函数可以轻松创建对话框,但在 Ember 中,我们需要确保对话框的显示和关闭与 Ember 的状态管理相协调。可以创建一个对话框组件,并使用服务来管理对话框的状态,这样可以在整个应用中方便地...

Global site tag (gtag.js) - Google Analytics