我如何使用JQuery UI创建表单对话框？

这可能看起来很明显，但我一直在研究这整个夜晚无济于事。我喜欢JQuery，但我无法掌握JQuery UI。也许我错过了一些基本的东西。我试图让一个盒子在包含表单的屏幕上弹出，当我点击提交时，我需要做一些Ajax魔术来将用户输入提交到数据库。这很好，但实际上让盒子出现是另一回事。我跟着几十个教程，它恨我。基本上，这是击穿：我如何使用JQuery UI创建表单对话框？

我的网站（在Linux上开发）已经/mysite/includes/jquery.js绝对根路径/ mysite的

我把jQuery和JQuery用户界面（除其他事项外）和/ mysite/includes/jquery-ui/...其中“...”是所有JQuery UI源文件。

页面的主要“身体”有点复杂。基本上，所有事情都是通过我在一个名为“内容”的div中使用Ajax制作的选项卡系统进行交换的。这个div包含我需要点击的可点击链接，以弹出一个对话框输入窗体，如JQuery UI示例站点上演示的那样。

我试着做几个品种下面......下面所有的代码都是在“内容” div元素：

<link rel="stylesheet" href="/mysite/includes/jquery-ui/themes/base/ui.all.css" type="text/css"> 
    <script src="/mysite/includes/jquery-ui/jquery-1.6.2.js"></script> 
    <script src="/mysite/includes/jquery-ui/ui/ui.draggable.js"></script> 
    <script src="/mysite/includes/jquery-ui/ui/ui.resizable.js"></script> 
    <script src="/mysite/includes/jquery-ui/ui/ui.core.js"></script> 
    <script src="/mysite/includes/jquery-ui/ui/ui.dialog.js"></script> 
    <script src="/mysite/includes/jquery-ui/external/jquery.bgiframe-2.1.2.js"></script> 
    <link type="text/css" href="/mysite/includes/jquery-ui/demos/demos.css" rel="stylesheet" />

在这一点上，我已经试过几乎所有的例子来获得弹出式窗口，我已经在网上找到，没有任何工作。我怎样才能真正打开它？所有的JQuery UI脚本都必须包含在“head”标签中吗？或者我必须以某种方式告诉JQuery引用主窗口而不是“内容”元素？

任何帮助将不胜感激。谢谢！

来源

2011-12-27 Sefu

你试过http://jqueryui.com/demos/dialog/#modal-form？另外，在JS文件之前包含CSS文件。 – Virendra 2011-12-27 04:22:10

这是我的目标，让它工作。不知何故，即使是复制粘贴的源代码也不适合我。我在猜测一些事实，即我的网站的结构使用加载的内容HTML页面，将所有内容混淆。 – Sefu 2011-12-27 04:25:44

另外，不要为jQueryUI调用如此多的js文件，而是需要从http://jqueryui.com/download/下载一个包含所需功能代码的组合js文件。 – Virendra 2011-12-27 04:27:13

我知道这是不是一个jQuery对话框，但它吨少臃肿的好去处：http://jsfiddle.net/cadkJ/125/

如果你想有一个表单提交后弹出，你可以添加此$(document).ready();内部的代码：

$("#form").submit(function(){ 
     $("#modal-background, #modal-content").toggleClass("active"); 
     $.ajax({ 
      type: "POST", 
      url: "http://www.example.com/form.php", 
      data: {name: "John Smith", address: "3 Tree Street"}, 
      success: function(data){}, 
      dataType: "json"}); 
     return false; 
    });

希望这可以帮助您，或者至少有人在寻找更轻量级的jQuery UI对话框解决方案。

来源

2011-12-27 04:45:54

该文档通常是一个很好的开始...然后可能读到关于DOM（“表单”）在DOM中，顺便说一下，你有太多的HTTP请求，在实时模式下压缩它们， html5bolierplate建设是启动

来源

2011-12-27 04:21:15 Philip

我如何使用JQuery UI创建表单对话框？

回答

相关问题