jquery ui对话框实例代码


Posted in Javascript onMay 10, 2013

目前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上,这样当表单提交时,服务端就无法获取到对话框中的服务器控件相关的值了。
Javascript 相关文章推荐
(推荐一个超好的JS函数库)S.Sams Lifexperience ScriptClassLib
Apr 29 Javascript
编写简单的jQuery提示插件
Dec 21 Javascript
jQuery stop()用法实例详解
Jul 28 Javascript
js中常用的Math方法总结
Jan 12 Javascript
jQuery插件echarts去掉垂直网格线用法示例
Mar 03 Javascript
webpack教程之webpack.config.js配置文件
Jul 05 Javascript
js通过Date对象实现倒计时动画效果
Oct 27 Javascript
js 取消页面可以选中文字的功能方法
Jan 02 Javascript
layui实现checkbox的目录树tree的例子
Sep 12 Javascript
微信小程序关键字变色实现代码实例
Dec 13 Javascript
Vue.js的模板语法详解
Feb 16 Javascript
通过实例解析javascript Date对象属性及方法
Nov 04 Javascript
javascrip关于继承的小例子
May 10 #Javascript
jQuery ReferenceError: $ is not defined 错误的处理办法
May 10 #Javascript
解析瀑布流布局:JS+绝对定位的实现
May 08 #Javascript
JavaScript 对任意元素,自定义右键菜单的实现方法
May 08 #Javascript
深入document.write()与HTML4.01的非成对标签的详解
May 08 #Javascript
使用JavaScript 实现各种跨域的方法
May 08 #Javascript
jQuery根据纬度经度查看地图处理程序
May 08 #Javascript
You might like
深入解析php中的foreach函数
2013/08/31 PHP
Zend Framework入门之环境配置及第一个Hello World示例(附demo源码下载)
2016/03/21 PHP
在CentOS系统上从零开始搭建WordPress博客的全流程记录
2016/04/21 PHP
PHP7 新特性详细介绍
2016/09/06 PHP
php写入文件不覆盖的实例讲解
2019/09/17 PHP
文本框获得焦点和失去焦点的判断代码
2012/03/18 Javascript
基于JavaScript实现百叶窗动画效果不只单纯flas可以实现
2016/02/29 Javascript
常用原生JS兼容性写法汇总
2016/04/27 Javascript
jQuery和hwSlider实现内容响应式可触控滑动切换效果附源码下载(二)
2016/06/22 Javascript
jQuery ajax的功能实现方法详解
2017/01/06 Javascript
Vue数据驱动模拟实现1
2017/01/11 Javascript
Vue中计算属性computed的示例解读
2017/07/26 Javascript
jQuery插件DataTables分页开发心得体会
2017/08/22 jQuery
BootStrap实现文件上传并带有进度条效果
2017/09/11 Javascript
JavaScript重复元素处理方法分析【统计个数、计算、去重复等】
2017/12/14 Javascript
微信小程序登录换取token的教程
2018/05/31 Javascript
浅谈VUE防抖与节流的最佳解决方案(函数式组件)
2019/05/22 Javascript
详解vue-cli3开发Chrome插件实践
2019/05/29 Javascript
layer.open的自适应及居中及子页面标题的修改方法
2019/09/05 Javascript
JS实现随机抽取三人
2019/11/06 Javascript
[52:31]VP vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
用Python实现一个简单的能够上传下载的HTTP服务器
2015/05/05 Python
Python Socket编程详细介绍
2017/03/23 Python
tensorflow 获取模型所有参数总和数量的方法
2018/06/14 Python
new_zeros() pytorch版本的转换方式
2020/02/18 Python
Python csv文件记录流程代码解析
2020/07/16 Python
HTML5拖拽文件到浏览器并实现文件上传下载功能代码
2013/06/06 HTML / CSS
标签和贴纸印刷:Lightning Labels
2018/03/22 全球购物
2014年秋季开学典礼主持词
2014/08/02 职场文书
2015年乡镇科普工作总结
2015/05/13 职场文书
论文致谢词范文
2015/05/14 职场文书
CAD实训总结范文
2015/08/03 职场文书
Python 内置函数速查表一览
2021/06/02 Python
Vue图片裁剪组件实例代码
2021/07/02 Vue.js
Redis如何实现分布式锁
2021/08/23 Redis
讨论nginx location 顺序问题
2022/05/30 Servers