2012-07-10 329 views
5

解釋我的問題有點困難,但我會嘗試使用圖像。jQuery對話框的同位素問題

演示:http://jsfiddle.net/H8Qbn/13/

我嘗試自動安排使用同位素jQuery的對話框。

  • 第一張照片顯示,一切工作正常。

enter image description here

  • 第二圖爲試圖調整第一個jQuery的對話框時發生了什麼。它正在調整大小,所有其他對話框自動排列。

enter image description here

  • 當我嘗試安排第二對話它首先移動,根據它的位置(頂部,左邊),然後調整大小和所有其它對話框不會自動地佈置。

enter image description here

  • 第三對話行爲完全相同2.根據移動其位置(頂部,左)和不自動地佈置。

enter image description here

有什麼建議?

+0

有一些代碼? – 2012-07-10 16:14:27

+0

我會嘗試複製它在jsfiddle – glarkou 2012-07-10 16:15:32

+0

請檢查http://jsfiddle.net/H8Qbn/13/ – glarkou 2012-07-10 16:28:28

回答

3

同位素不適用於可拖動對話框;有關這種類型的功能,請參見what the plugin author says

編輯Fiddled around with a few more things並得到佈局重新排列時關閉對話框.remove();然而,拖拽不支持(見上文)並且手動調整大小也不起作用。爲什麼需要手動調整對話框的大小?不能以編程方式完成?

2

當您調整對話框的大小或添加或刪除項目後,jquery masonry插件可以在周圍容器上使用砌體(「重新加載」)函數調用它時計算新位置。我在我的Javascript中使用它時,我添加或刪除圖像到我周圍的容器。您可以在我的主頁上查看砌體插件,網址爲http://www.chihoang.de

這是我在最後前插和追加砌築(「刷新」)功能:

  if (ele.Additem == "Append") { 
      container.append($j("#brickTemplate").tmpl(ele).css({ 
      "display": "block" 
      })).masonry('reload'); 
     } else if (ele.Additem == "Prepend") { 
      container.prepend($j("#brickTemplate").tmpl(ele).css({ 
      "display": "block" 
      })).masonry('reload'); 
     } 

這是我刪除功能:

 $j('.brick').remove(":contains('" + ele.Headline + "')"); 
     container.masonry('reload'); 
+0

看不到您網站上的手動調整大小,它是如何工作的? – Systembolaget 2012-07-20 18:48:38

+0

我已經添加了一些代碼。 – Bytemain 2012-07-20 19:03:27