jquery ui对话框实例代码

 更新时间:2013年05月10日 11:05:48   作者:  
在网页设计中,不论是为了减少于由于页面跳转而带来的不友好用户体验,还是为了维持桌面应用程序的使用习惯,对话框的设计都是不可或缺的。

目前JqueryUI提供的对话框支持使用相对比较的方便,示例代码如下所示:

复制代码 代码如下:

<body>
    <form id="form1" runat="server">

    <div id="dlg">

        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

    </div>

       <asp:Button ID="Showdlg" runat="server" Text="..." />

    </form>

    <script type="text/javascript" language="javascript">

      $(function () {

             $("#dlg").dialog({

                autoOpen: false,

                closed: true,

                width: 450,

                modal: true,

                appendTo: "form",

                buttons: {

                    "OK": function () {

                        $("form").submit();

                    },

                    "Cancle": function () {

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

                    }

                },

                close: function () {

                }

            });

            $("#<%=Showdlg.ClientID%>").button().click(function() { $("#dlg").dialog("open"); return false });

         }

        );

    </script>

</body>


其中值得注意的是appendTo: "form"选项, JqueryUI Dialog默认情况向会将表示对话框的<div id="dlg">添加到Body上,这样当表单提交时,服务端就无法获取到对话框中的服务器控件相关的值了。

相关文章

  • jquery实现简单的表单验证

    jquery实现简单的表单验证

    这篇文章主要介绍了jquery实现简单的表单验证,思路大概是先为每一个required添加必填的标记,用each()方法来实现,感兴趣的小伙伴们可以参考一下
    2015-11-11
  • IE下支持文本框和密码框placeholder效果的JQuery插件分享

    IE下支持文本框和密码框placeholder效果的JQuery插件分享

    这篇文章主要介绍了IE下支持文本框和密码框placeholder效果的JQuery插件分享,本文给出插件源码和使用示例,需要的朋友可以参考下
    2015-01-01
  • jQuery实现的分页插件完整示例

    jQuery实现的分页插件完整示例

    这篇文章主要介绍了jQuery实现的分页插件,结合完整实例形式分析了jQuery分页插件的定义与使用相关操作技巧,需要的朋友可以参考下
    2020-05-05
  • EasyUi datagrid 实现表格分页

    EasyUi datagrid 实现表格分页

    这篇文章主要介绍了EasyUi datagrid 实现表格分页的方法和示例分享,需要的朋友可以参考下
    2015-02-02
  • JQuery Ajax跨域调用和非跨域调用问题实例分析

    JQuery Ajax跨域调用和非跨域调用问题实例分析

    这篇文章主要介绍了JQuery Ajax跨域调用和非跨域调用问题,结合具体实例形式分析了jQuery基于ajax的非跨域请求及跨域请求相关实现技巧与操作注意事项,需要的朋友可以参考下
    2019-04-04
  • jQuery实现获取绑定自定义事件元素的方法

    jQuery实现获取绑定自定义事件元素的方法

    这篇文章主要介绍了jQuery实现获取绑定自定义事件元素的方法,涉及jQuery方法重载、事件绑定及元素操作的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-12-12
  • jQuery实现异步上传一个或多个文件

    jQuery实现异步上传一个或多个文件

    这篇文章主要为大家详细介绍了jQuery异步上传一个或多个文件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-08-08
  • jQuery中:contains选择器用法实例

    jQuery中:contains选择器用法实例

    这篇文章主要介绍了jQuery中:contains选择器用法,以实例形式分析了:contains选择器的功能、定义及匹配给定元素文本时的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2014-12-12
  • jquery实现页面加载效果

    jquery实现页面加载效果

    本文主要介绍了jquery实现页面加载效果的实例,具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • jQuery中bind()方法用法实例

    jQuery中bind()方法用法实例

    这篇文章主要介绍了jQuery中bind()方法用法,实例分析了bind()方法的功能、定义及为匹配元素的特定事件绑定事件处理方法的技巧,需要的朋友可以参考下
    2015-01-01

最新评论