2010-05-10 55 views
0

我一直在使用jQuery UI很長一段時間了。這是第一次使用1.8,但我不知道爲什麼,但在我看來這個插件已採取步驟倒退。Jquery UI 1.8.1有很多問題Dialog.js

我從來沒有像現在那樣使用Jquery UI這麼困難。

首先,文檔已過時。

依賴

* UI Core 
* UI Draggable (Optional) 
* UI Resizable (Optional) 

的嘗試和錯誤後收到錯誤行20分鐘後(如對話的是不是一個函數),我意識到,你需要一些其他的JavaScript文件名爲「widget.js」

所以現在我有

Jquery 1.4.2.js 
UI Core.js UI 
Widget.js 
UI Dialog.js 

所有我的網頁上。

然後我做了這樣的事情

$('#Delete').click(function() 
    { 
     var dialogId = "DeleteDialogBox"; 
     var createdDialog = MakeDialogBox(dialogId, "Delete Conformation"); 

     $('#tabConent').after(createdDialog); 
     dialogId = String.format('#{0}', dialogId); 

     $(dialogId).dialog({ 
      resizable: true, 
      height: 500, 
      width: 500, 
      modal: true, 
      buttons: { 
       'Delete all items': function() { 
        $(this).dialog('close'); 
       }, 
       Cancel: function() { 
        $(this).dialog('close'); 
       } 
      } 
     }); 
    }); 

     function MakeDialogBox(id, title) 
    { 
     var dialog = String.format('<div id="{0}" title="{1}"></div>', id, title); 
     return dialog; 
    } 

現在這是什麼應該做的是它使一個地方的對話框應該去。之後,它應該放在我的標籤後面。

所以當看着它與螢火蟲它這樣做。然而,一旦.dialog()方法移動了它生成的所有東西,並將其放在我的頁腳之後。

所以,現在我的對話框在我的頁腳下隱藏在右下角。我希望它死在中心。在以前的版本中,我不認爲它對你的頁面上的對話代碼的重要性,它永遠是死的中心。

那麼我錯過了什麼? center.js(我不知道這是否存在,但似乎你現在需要100個JavaScript文件才能正常工作)。

+0

Btw ...對於正確使用dialog.js,您還必須具有position.js,以便您的對話框顯示中心。 – Cristian 2010-05-11 01:33:09

回答

1

嘗試構建一個「即時」對話框。

$('<div>test</div>').dialog({/* your options here */}); 

也得到jQ-UI源的非壓縮版本並查看dialog.js - 所有的依賴關係都寫在它的標題註釋中。

+0

這是一個好主意,在dialog.js文件中查找。似乎他們有很多依賴。 * \t jquery.ui.core.js * \t jquery.ui.widget.js * jquery.ui.button.js * \t jquery.ui.draggable.js * \t jquery.ui.mouse.js * \t jquery.ui.position.js * \t jquery.ui.resizable.js – chobo2 2010-05-11 22:36:50

+0

檢查對話框源文件中的依賴關係也解決了我的問題。我錯過了我的自定義構建可調整大小。謝謝你的提示 :) – chrismacp 2011-01-04 12:44:36

1

我認爲這裏的問題是缺少CSS。但是,您可以使這一切變得更簡單:)所有這些腳本文件在發佈時都會進行組合和縮小,例如here's the full versionhere's the minified one(此答案時是1.8.1版)。通過這種方式,您可以包含1個腳本文件,而不用關心哪個UI腳本按照什麼順序。

總的來說,你可以通過他們提供的機制下載jQuery UI來大大簡化生活,看看the jQuery UI download page。你可以自定義任何你想要的並下載一個壓縮文件,然後你需要包括的是這3個文件:jQuery,jQuery UI,和jQuery UI CSS(它指向它需要的圖像)。或者您可以使用一個CDN所有3,像這樣:

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css" type="text/css" /> 

如果您熟悉的一個內置的主題,您可以使用CDN的一切就像上面,只是主題名稱替換baseyou can find a full list here(只是將1.7.2更改爲當前版本的URL)