我如何使用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創建表單對話框？

回答

相關問題