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滚动条插件slimScroll使用方法

    jquery滚动条插件slimScroll使用方法

    这篇文章主要为大家详细介绍了jquery滚动条插件slimScroll的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-02-02
  • jQuery 删除/替换DOM元素的几种方式

    jQuery 删除/替换DOM元素的几种方式

    在结果集后链式调用remove()方法即可删除也可以通过向remove传参的形式来过滤选择结果再执行remove操作
    2014-05-05
  • jQuery实现立体式数字滚动条增加效果

    jQuery实现立体式数字滚动条增加效果

    这篇文章主要介绍了jQuery立体式数字滚动条增加的相关资料,代码简单易懂,非常不错,需要的朋友可以参考下
    2016-12-12
  • 滚动图片效果 jquery实现回旋滚动效果

    滚动图片效果 jquery实现回旋滚动效果

    jquery滚动图片效果,有些新手朋友可能不是很清楚,今天在网上找到一款回旋滚动效果,拿出来和大家一起分享,感兴趣的朋友可以了解下哦
    2013-01-01
  • 基于jquery的表格排序

    基于jquery的表格排序

    看了《javascript高级程序设计》里面有个表格排序的例子;觉得很有意思,所以自己用jquery的基本库做了一个,里面的概念基本和书里面的差不多
    2010-09-09
  • jQuery的观察者模式详解

    jQuery的观察者模式详解

    本文主要是介绍了jQuery中on方法及trigger方法,以及围绕这个方法来体验的观察者模式,是篇非常不错的文章,对我们理解观察者模式很有帮助。
    2014-12-12
  • jQuery对底部导航进行跳转并高亮显示的实例代码

    jQuery对底部导航进行跳转并高亮显示的实例代码

    这篇文章主要介绍了jQuery对底部导航进行跳转并高亮显示的实例代码,代码简单易懂,非常不错,具有一定的参考借鉴价值 ,需要的朋友可以参考下
    2019-04-04
  • jQuery实现图片跟随效果

    jQuery实现图片跟随效果

    这篇文章主要为大家详细介绍了jQuery实现图片跟随效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • JQuery控制Radio选中方法分析

    JQuery控制Radio选中方法分析

    这篇文章主要介绍了JQuery控制Radio选中方法,涉及jQuery表单操作及鼠标事件响应的方法,需要的朋友可以参考下
    2015-05-05
  • JQUERY 获取IFrame中对象及获取其父窗口中对象示例

    JQUERY 获取IFrame中对象及获取其父窗口中对象示例

    经常会用到iframe,难免会碰到需要在父窗口中使用iframe中的元素、或者在iframe框架中使用父窗口的元素,下面为大家简单介绍下本人的使用心得
    2013-08-08

最新评论