(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,我们可以创建一个更加友好的API,简化代码,提高可维护性。这个过程不仅展示了如何优化现有的工具,也鼓励开发者思考如何根据项目需求定制和扩展库的功能。如果你在实际工作中遇到...
这个“封装JQuery Dialog实现Dialog、Tip、alert和confirm”的主题聚焦于如何通过自定义代码来封装jQuery Dialog的功能,以便更好地适应项目需求。下面将详细介绍这个主题中的关键知识点。 首先,jQuery Dialog是...
总结起来,JQueryUI和EasyUI都是强大的前端开发工具,它们提供了一系列预封装的UI控件,帮助开发者快速构建美观且交互性强的Web应用。无论你是选择JQueryUI的丰富组件和主题定制,还是EasyUI的轻量级和易用性,都...
1. **部件(Widgets)**:jQuery UI提供了多种UI部件,如日期选择器(Datepicker)、对话框(Dialog)、滑块(Slider)、进度条(Progressbar)、标签页(Tabs)和下拉菜单(Selectmenu)等。这些部件都封装了复杂的...
1. **组件(Widgets)**:jQuery UI的核心在于它的组件,这些组件是预先封装好的UI元素,如Accordion(手风琴)、Autocomplete(自动完成)、Button(按钮)、Calendar(日历,即日期选择器)、Dialog(对话框)、...
1. **部件(Widgets)**:jQueryUI提供了许多预先封装好的UI部件,如日期选择器(Datepicker)、滑块(Slider)、对话框(Dialog)、进度条(Progressbar)、下拉菜单(Autocomplete)等。这些部件都具有高度可定制...
jQuery UI 可以与其他JavaScript库和框架如AngularJS、React、Vue等配合使用,通过适当的封装和适配,实现更复杂的交互功能。 总之,jQuery UI 是一个强大且灵活的前端开发工具,它的丰富组件和强大的交互能力使得...
jQuery UI则是一个基于jQuery JavaScript库的用户界面插件集合,提供了丰富的交互效果和可自定义的主题,如对话框、拖放功能、日期选择器等,用于提升Web应用的用户体验。 在这个项目中,SSH框架主要负责后端业务...
4. **封装Ajax(AJAX Wrapping)**:jQuery如何对XMLHttpRequest对象进行封装,提供了一致且易于使用的接口。 5. **动画实现(Animation Queue)**:理解jQuery如何处理动画队列,确保动画顺序执行。 通过学习...
jQuery UI Dialog 是一个基于 jQuery 的组件,用于创建交互式的弹出对话框。它提供了一种简单的方法来增强网站的用户体验,允许用户与页面上的内容进行更深入的交互。以下是关于如何使用 jQuery UI Dialog 的详细...
1. **部件(Widgets)**:jQuery UI提供了一系列的部件,如日期选择器(Datepicker)、对话框(Dialog)、下拉菜单(Autocomplete)等,这些部件都是预封装好的,开发者可以直接使用,极大地提高了开发效率。...
总结来说,jQuery UI是一个功能丰富的Web UI开发包,它提供了多种预先封装的组件,简化了复杂的交互实现,为开发者带来了高效和便捷。通过其强大的定制能力和易用的API,jQuery UI在众多Web开发工具中占据了一席之地...
jQuery UI 的核心理念是简化前端开发,它包含了一系列预先封装好的组件,如对话框(Dialog)、日期选择器(Datepicker)、拖放功能(Draggable)、可排序列表(Sortable)等。这些组件不仅可以节省开发时间,还能...
2. **部件(Widgets)**: jQuery UI 包含多个预先封装好的UI部件,如`Dialog`(对话框)、`Accordion`(手风琴)、`Slider`(滑块)、`Datepicker`(日期选择器)、`Tabs`(标签页)等。每个部件都有一套完整的API,...
JQuery.UI.Dialog的封装,方便开发时的使用,供大家一起共同分享学习。
4. **事件处理**:jQuery UI的组件封装了大量的事件处理函数,如start、stop、change等,使得开发者能轻松控制组件的行为。 二、jQuery UI 1.8.17的亮点 1. **性能优化**:1.8.17版本对代码进行了深度优化,提高了...
3. **UI组件**: 提供了如对话框(Dialog)、日历(Datepicker)、进度条(Progressbar)、下拉菜单(Selectmenu)、滑块(Slider)、可折叠面板(Accordion)、tabs(选项卡)等常见UI元素,这些组件都封装了复杂的...
jQuery UI 包含了一系列的可定制、可交互的界面元素,如对话框(Dialog)、日历(Datepicker)、拖放(Draggable)、可排序(Sortable)和可堆叠(Resizable)等,这些都极大地简化了前端开发工作。 在深入讲解...
为了减少页面加载时间,可以通过在线构建工具(如 http://jqueryui.com/download/)选择需要的组件和主题,只加载必要的资源。此外,利用CDN服务可加快文件的加载速度。 五、jQuery UI与现代前端框架的结合 虽然...
jQuery UI 的 `dialog()` 函数可以轻松创建对话框,但在 Ember 中,我们需要确保对话框的显示和关闭与 Ember 的状态管理相协调。可以创建一个对话框组件,并使用服务来管理对话框的状态,这样可以在整个应用中方便地...