jQuery對話框 - 從中心移動到右上角的動畫對話框

我有一個帶有驗證插件設置的窗體。當表單被提交併且有錯誤時，我在對話框（不是模態）中顯示錯誤的字段。jQuery對話框 - 從中心移動到右上角的動畫對話框

表單可能真的很快很長（業務需求不斷添加字段），並且我使對話框中的錯誤字段可點擊以將窗口滾動到from字段並突出顯示字段。此時對話框並未被解除。

該對話框以居中開始，一旦用戶開始點擊鏈接，我需要將對話框移出用戶的方式並突出顯示（jQuery效果）下面的字段。

要做到這一點，我想出了下面的代碼，對話框似乎頂部動畫，但不是在右邊。當我將'右'改爲'左'時，它工作正常。

下面是代碼和jsbin一起玩 - http://jsbin.com/avigi3/4/

$('a.field').click(function(){ 
    $(this).closest('.ui-dialog').animate({ 
     right : '0', /*left:'0' works fine here*/ 
     top : $(window).scrollTop() 
    }, 'slow'); 
});

我調試的代碼jQuery.animate，這裏是我的筆記：

jQuery.animate（） '開始'與該屬性的當前值並逐漸動畫到傳入的目標值。例如：在調用中，頂部從任何當前頂層值開始，然後減小到窗口的scrollTop（這是可見的頂部）瀏覽器的視口）。
現在，這裏存在的問題。儘管對話框是居中對齊的，但它的'right'屬性並不存在，因爲jQuery-ui使用'left'屬性來對齊（絕對定位）對話框。由於'right'不存在，'right'的動畫序列似乎不起作用。

有沒有人遇到過這個問題？無論如何，我可能會重置對話框的「正確」位置，使其具有「某些」價值？或者我可以配置jQuery對話框，以便在以編程方式更改位置時進行動畫處理，而不是通過拖動進行手動處理。

感謝，
-Syam

來源

2011-04-11 sbhimavarapu

對於未來的讀者，Shrikant的答案會是更快的修復和特定的調用，它工作正常。只需改變寬度以使用offsetWidth（）來考慮填充/邊距。

我結束了通過jQuery UI代碼到最後，並找到了一個通用的實現。這是爲jquery-ui 1.8.10。

通過計算{left：xxx，top：xxx}找出移動對話框的位置後，jQuery對話框使用Position實用程序定位和重新定位ui-dialog div。 Position的選項之一是'使用'功能。如果定義了'using'，它將觸發該函數並傳遞一個{left：xxx，top：xxx}對象。如果沒有定義，它只會更新ui-dialog上的css。Here這將code的a snippet：

line number 9977 in jquery-ui version 1.8.10: 
      if ('using' in options) { 
       options.using.call(elem, props); 
      } else { 
       curElem.css(props); 
      }

您可以override上的Position defaults的 'using' property，but since my usage是only爲dialogs，我overwrote it上的dialog prototype：

$.extend($.ui.dialog.prototype.options, { 
    position : { 
     using : function(props) { 
      $(this).animate({ 
       left : props.left, 
       top : props.top 
      }, 'slow'); 
     } 
    } 
});

我希望這有助於！

感謝， -Syam

來源

2011-04-12 18:01:31 sbhimavarapu

這個答案是超級有用 - 感謝把它。然而，只是將道具參數直接傳遞給.animate，以免重複自己： $（this）.animate（props）; 再次感謝！ – 2011-12-15 11:16:10

它改變了全球行爲，在實踐中不太適用。看看這個，http://stackoverflow.com/questions/6849352/animating-jquery-dialog-to-different-position – albert 2012-12-05 01:52:56

試試這個

$('a.field').click(function(){ 
    dialog = $(this).closest('.ui-dialog') 
    dialog.animate({ 
     left: document.width - dialog.width(), // or you might want to use .outerWidth() 
     top: $(window).scrollTop() 
    }, 'slow'); 
});

來源

2011-04-11 05:49:36

jQuery對話框 - 從中​​心移動到右上角的動畫對話框

回答

相關問題

jQuery對話框 - 從中心移動到右上角的動畫對話框