`

jquery UI diloag

阅读更多

官网地址:http://api.jqueryui.com/dialog/#option-hide

 

1.简单的采用div加载

<div id="dialog">
  <form id="dialogForm" method="post" action="user/add">
   <table>
    <tr>
     <td>名字:</td>
     <td>
      <input type="text" name="name"/>
     </td>
    </tr>
    <tr>
     <td>年龄:</td>
     <td>
      <input type="text" name="age"/>
     </td>
    </tr>
   </table>
  </form>
 </div>

$("#dialog").dialog({
   modal: true,
   autoOpen: false,
   buttons:{
    "确定":function(){
     var form = $("#dialogForm");
     $.ajax({
            url:form.attr('action'),
            type:form.attr('method'),
            data:form.serialize(),
            dataType:"json",
            success:function(data){
             $("#dialog").dialog("close");
             alert("成功啦");
            },
            error:function(){
             $("#dialog").dialog("close");
             alert("出错了哦");
            }
     }
    },
    "关闭": function() {
     $("#dialog").dialog("close");
    }
   }
  });


2.jquery diloag采用动态URL的方式,需要使用iframe

  eg:

var html =
              '<div style="width:800px;height:600px;" id="dialogtest" title="Item Query">' +
              ' <iframe id="iframe" src="/app/fditemmaster/entryFdQuery" frameBorder="0" style="border:0;" scrolling="no" width="100%" height="100%"></iframe>' +
              '</div>';


                $(html).dialog({
                 bgiframe: true,
                 resizable: true,
                 width :800,
                 height:600,
                 modal: true,
                 overlay: {
                     backgroundColor: '#000',
                     opacity: 0.5
                 },
                 close:function()
                 {
                      //彻底删除div标签
                  $(this).remove();
                 }
             });

a.父窗口调用iframe中的方法

   window.frames["iframe1"].contentWindow.test();

b.iframe中调用父窗口中的方法

    window.parent.closeDialog();

c.iframe中查找父窗口中的元素

    $("body", parent.document).find('#itemId_autocomplete').attr("value",
    data);
d.父窗口中查找子窗口元素

    $('iframe').contents().find('.c_div').html();


3.相关网站链接
   http://www.cnblogs.com/mybest/archive/2011/12/02/2271940.html

分享到:
评论

相关推荐

    jquery ui messager 消息框

    jQuery UI Messager是一款基于jQuery和jQuery UI库的插件,用于在Web应用程序中创建美观、功能丰富的消息框。它提供了一种优雅的方式来显示各种类型的通知,如警告、错误、信息和成功消息,增强了用户交互体验。这个...

    JQuery UI 中文帮助文档

    **jQuery UI 中文帮助文档详解** jQuery UI 是一个基于 jQuery JavaScript 库的开源项目,它提供了丰富的用户界面组件,使得开发者能够轻松创建交互性强、视觉效果美观的网页应用。这个中文帮助文档是针对jQuery UI...

    bootstrap&jQueryUI例子

    Bootstrap 和 jQuery UI 是两个非常流行的前端开发框架,用于构建用户界面和交互效果。它们各自具有独特的优势,并在网页设计和开发领域中广泛使用。 Bootstrap 是一个由 Twitter 开发的开源 CSS 框架,它提供了...

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

    《jQuery UI:深入理解与应用》 jQuery UI是基于JavaScript库jQuery的一个扩展,它提供了一系列丰富的用户界面组件,包括但不限于对话框(Dialogs)、日期选择器(Datepickers)、拖放功能(Drag and Drop)、排序...

    jQuery UI组件 jQuery UI

    **jQuery UI组件详解** jQuery UI 是一个强大的前端开发框架,基于流行的JavaScript库jQuery构建,它提供了丰富的用户界面组件,能够帮助开发者快速构建交互性、视觉吸引力强的网页应用。jQuery UI 包含了大量的...

    jQuery UI Multiselect (jQuery UI 多选框)

    首先,确保在项目中引入了jQuery和jQuery UI的核心库,然后引入jQuery UI Multiselect的CSS和JS文件。接下来,可以按照以下步骤创建和初始化多选框: ```html &lt;!-- HTML结构 --&gt; &lt;option value="1"&gt;Option 1 ...

    JQueryUI,EasyUI一些控件的使用

    在本文中,我们将深入探讨JQueryUI和EasyUI这两个JavaScript库在创建用户界面时的一些关键控件和功能,包括表单、Tab切换以及样式切换。它们都是为了提升Web应用程序的用户体验和交互性而设计的。 首先,让我们了解...

    JQuery UI包括(1.0.5、1.2、1.3、1.7、1.8、1.9)等版本另附文档

    2.jQuery and jQuery UI Reference 1.2 API.zip; 3.jQuery UI 1.9带给我们的惊喜.zip; 4.jQuery.ui.docs.rar; 5.jquery-easyui-1.0.5.zip; 6.jquery-easyui-1.2.ZIP; 7.jQuery-easyui-docs.rar; 8.jquery-ui-...

    jQueryUI jQueryUI插件 键盘插件

    jQueryUI 是一个强大的JavaScript库,它扩展了流行的jQuery框架,为开发者提供了丰富的用户界面组件。在Web开发中,jQueryUI提供了诸如对话框、拖放、排序、日期选择器等多种交互式元素,极大地提升了用户体验。而...

    jquery ui & themes

    《jQuery UI与主题设计详解》 在Web开发领域,jQuery UI是一个强大且广泛使用的JavaScript库,它基于jQuery核心库,提供了丰富的用户界面组件和交互效果。jQuery UI的主要目标是简化前端开发,通过提供一系列可定制...

    jQuery、jQueryUI及jQueryMobile技巧与示例

    资源名称:jQuery、jQuery UI及jQuery Mobile技巧与示例内容简介:《jQuery、jQuery UI及jQuery Mobile技巧与示例》包括jQuery、jQuery UI、jQuery Mobile以及jQuery插件四部分内容。第一部分介绍jQuery核心库,从...

    jQueryUI参考手册中文CHM版

    资源名称:jQuery UI参考手册 中文CHM版内容简介:jQuery UI是一个建立在jQuery Javascript 库上的小部件和交互库,您可以使用它创建高度交互的Web应用程序。本教程将向您讲解 jQuery UI 是如何工作的。本文给...

    jquery-ui-1.12.1.custom_jqueryui_

    在标题"jquery-ui-1.12.1.custom_jqueryui_"中,"custom"一词暗示了这是一个自定义版本,意味着开发者可能根据需求选择了特定的组件和主题,以优化项目中的性能和功能。 描述中的"jquery ui 1.12.1 for html"进一步...

    前端项目-jqueryui-touch-punch.zip

    在前端开发领域,jQuery UI 和 Touch Punch 是两个重要的工具,它们极大地丰富了用户与Web页面的交互体验。这里我们将深入探讨这两个技术以及它们如何协同工作。 **jQuery UI** 是一个强大的JavaScript库,它基于...

    jQuery UI Autocomplete是jQuery UI的自动完成组件

    jQuery UI Autocomplete是一款基于jQuery UI库的插件,专门用于实现自动完成功能。这个组件在网页表单中尤其有用,它可以为用户提供实时的搜索建议,提升用户输入体验,节省用户时间并减少输入错误。在网页应用中,...

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

    **jQuery UI:一个强大的前端开发工具包** jQuery UI是一个基于jQuery JavaScript库的扩展,它提供了一整套可交互的用户界面组件,包括对话框、拖放功能、日期选择器、进度条、排序列表等。这个名为"jquery-ui-...

    jQuery UI Datepicker插件timepicker时分秒

    《jQuery UI Datepicker插件与timepicker时分秒扩展详解》 在Web开发中,日期和时间的选择常常是一项必不可少的功能,jQuery UI Datepicker插件是一个非常流行的选择工具,它为用户提供了直观、易于使用的日期选择...

    最新jQueryUI组件下载

    jQuery UI 是一个强大的开源库,它是基于 jQuery JavaScript 库构建的,提供了丰富的用户界面组件,如日期选择器、对话框、拖放功能、排序列表等。这个“最新jQueryUI组件下载”应该指的是版本号为1.10.0的jQuery UI...

    jQueryUI MetroUI WindowUI 主题

    《jQueryUI MetroUI WindowUI 主题详解》 在Web开发领域,jQuery UI 是一个非常流行的JavaScript库,它为HTML提供了丰富的交互式用户界面组件。jQuery UI 的魅力在于其可定制性和丰富的主题系统,使得开发者可以...

    jQuery UI仿webqq桌面系统WebOS界面操作

    在本项目中,“jQuery UI仿webqq桌面系统WebOS界面操作”是一个利用jQuery UI库创建的,模拟WebQQ桌面系统风格的Web操作系统界面。这个系统旨在提供一种类似于桌面环境的用户体验,用户可以通过浏览器进行交互,享受...

Global site tag (gtag.js) - Google Analytics