jquery與碰撞的位置。檢測到碰撞時添加類

我正在使用jquery-ui的帶有碰撞的自動填充框來在輸入的上方或下方顯示自動填充。我想要的是添加一個類到自動完成元素，如果檢測到碰撞，所以我可以自定義css一點，如果它高於vs下面。這似乎應該很簡單，但我似乎無法找到任何方法來實現它。jquery與碰撞的位置。檢測到碰撞時添加類

來源

2012-11-08 Doug H.

更好的解決方案是在回調中使用第二個參數。從jQueryUI的文檔：

第二提供了有關位置和兩元件的尺寸，以及它們的相對位置計算反饋。 target和element都具有這些屬性：元素，左，頂部，寬度和高度。此外，還有橫向，縱向和重要的，給你12個潛在的方向，如{horizontal：「center」，vertical：「left」，important：「horizontal」}。

，因爲它說，有一個水平和第二個參數，你可以用它來找出元素是否翻轉或不內垂直屬性。所以，你可能寫的是這樣的：

$("#someId").dialog({ 
     position: { 
     my: 'left top', 
     at: 'right top', 
     collision: 'flip flip', 
     of: $('#' + someElementID), 
     using: function (obj,info) { 
      if (info.vertical != "top") { 
       $(this).addClass("flipped"); 
      } else { 
       $(this).removeClass("flipped"); 
      } 
      if (info.horizontal != "left") { 
       $(this).addClass("flipped"); 
      } else { 
       $(this).removeClass("flipped"); 
      } 
      $(this).css({ 
      left: obj.left + 'px', 
      top: obj.top + 'px' 
      }); 
     } 
},

來源

2014-03-06 02:36:31

我在文檔中閱讀這個，但當我嘗試它，我沒有得到第二個在我使用回調的論點。你知道這是在更新版本的jQuery UI中添加的東西嗎？不幸的是，我們現在被困在相對古老的1.8.2。 – Elezar

我不確定，但我想我已經用1.8.12或1.10.3測試了它。但是，它看起來並不像是一個小版本的改動！ –

不適合我。當翻轉它仍然遇到其他情況.. –

，您應該使用using回調position

這裏是一個可能的解決方案，假設你打開一個對話框......

$("#someId").dialog({ 
position: { 
    my: 'left top', 
    at: 'right top', 
    collision: 'flip flip', 
    of: $('#' + someElementID), 
    using: function (obj) { 
     if (obj.left < $('#' + someElementID).offset().left) { 
      $(this).addClass("flipped"); 
     } else { 
      $(this).removeClass("flipped"); 
     } 
     //decide if dialog is being opened flipped from buttom to top 
     if ((obj.top + 50) < $('#' + someElementID).offset().top) { 
      $(this).addClass("flipped_top"); 
     } else { 
      $(this).removeClass("flipped_top"); 
     } 
     $(this).css({ 
      left: obj.left + 'px', 
      top: obj.top + 'px' 
     }); 
    } 
}, 
    ...

而是添加/刪除類來$(this)這是對話本身，你可以添加/刪除類到其他元素...

來源

2013-01-17 10:01:16 Daniel

什麼是有些元素？ –

任何其他元素，你想反映的事實，對話框翻轉（不能想到一個場景atm） – Daniel

而不是使用2級的解決方案在這裏mentionned，我喜歡創造出使用默認的自定義翻轉處理程序，並檢測是否有改變。

這裏是我如何做它：

$.ui.position.custom = { 
    left: function(position, data) { 
     var initPos = position.left; 
     $.ui.position.flip.left(position, data); 
     if (initPos != position.left) { 
      data.elem.addClass('tooltipFlipLeft'); 
     } else { 
      data.elem.removeClass('tooltipFlipLeft'); 
     } 
    }, 
    top: function(position, data) { 
     var initPos = position.top; 
     $.ui.position.flip.top(position, data); 
     if (initPos != position.top) { 
      data.elem.addClass('tooltipFlipTop'); 
     } else { 
      data.elem.removeClass('tooltipFlipTop'); 
     } 
    } 
};

然後我使用位置功能時使用它：

me.position({ 
    of: opener, 
    my: 'right bottom', 
    at: 'center top', 
    collision: 'custom' 
});

這裏唯一的相關行是一個與碰撞。

來源

2015-01-27 16:05:19

這是唯一的工作解決方案。除此之外，似乎還有一種擴展現有邏輯的好方法。用這個！ –

這個答案對我來說非常合適。這是我可以開始工作的唯一解決方案，您可以知道翻蓋發生的方向。謝謝！ – corbin

jquery與碰撞的位置。檢測到碰撞時添加類

回答

相關問題