如何在點擊任意HTML元素時放置微調器

Question

我想在用戶在我的網站上執行操作時顯示微調器圖標。這主要是通過AJAX提交表單時發生的，例如評論回覆，圖片上傳等。當用戶點擊需要內容被AJAX加載的內容時，也可能發生這種情況。

目前我有一個div來保存我的微調圖標，例如<div id="ajax-spinner"></div>。這是固定在屏幕的頂部，它使用ajax（）方法中的JQuery的beforeSend()和success選項顯示/隱藏。像這樣的位：

jQuery.ajax({ 
      type: "POST", 
      url: 'some_url_that_processes_this_form', 
      data:'data_to_send', 

      beforeSend: function(){ 
      $("#ajax-spinner").show(); 
      }, 

      success: function(data) 
      { 
      $("#ajax-spinner").hide(); 
      } 

      }); 

的問題是，它不是很方便，因爲其中顯示的微調是無處靠近按鈕他們實際上點擊。它甚至不在他們點擊的地方。

我想要做的是在他們點擊的每個元素旁顯示微調框。因此，如果他們點擊「贊」鏈接，那麼我希望該鏈接旁邊的微調器。如果他們上傳圖片，那麼我希望微調框出現在包含圖片的框中。

建議使用何種設計模式來實現此目的？而不是在每個HTML標籤中都有可用的微調器副本，是否有一些方法可以動態定位微調器並動態調整其大小，以便可以在我想要的任何位置重新使用該頁面？如果你想要一個我試圖實現的例子，Facebook已經掌握了這一點。

Answer 1

這裏的東西，應該讓你開始一個CodePen：http://codepen.io/trevanhetzel/pen/GsEuI

基本上，你需要在表單提交捕捉當前鼠標的位置。不幸的是，我找不到一種方法來處理.on('submit')事件，但它可以用.on('click')事件實現，因爲您可以將參數傳遞給一個函數，以使用pageX和pageY方法捕獲剛點擊的位置。

這是不理想的，因爲你想成爲一個beforeSend動作中完成的，但你仍然可以做的顯示和隱藏beforeSend和success電話裏面，只是做點擊定位。

希望這會有所幫助！

超級基本標記

<div id="ajax-spinner"></div> 

<form> 
    <button type="submit">Submit</button> 
</form> 

<form> 
    <button type="submit">Submit</button> 
</form> 

<form> 
    <button type="submit">Submit</button> 
</form> 

超級基本CSS

form { 
    margin: 20px; 
} 

#ajax-spinner { 
    display: none; 
    position: absolute; 
    width: 50px; 
    height: 50px; 
    background: grey; 
    border-radius: 50%; 
} 

JS

jQuery('button').on('click', function (e) { 
    var mousePosX = e.pageX, 
     mousePosY = e.pageY; 

    jQuery('#ajax-spinner') 
    .show() 
    .css('top', mousePosY, 'left', mousePosX); 
}); 

Answer 2

充分利用DIV微調位置絕對和它的位置點擊控制接近：

$("myselector").click(function() { 
    $("#ajax-spinner").css("top", $(this).position().top); 
    $("#ajax-spinner").css("left", $(this).position().left); 

    //make the size you want it to be 
    $("#ajax-spinner").css("width", "500px"); 
    $("#ajax-spinner").css("height", "500px"); 

}); 

可以ajust上邊和左邊來完成你想要的東西。