如何在点击任意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上边和左边来完成你想要的东西。