jquery - 如何在单击的任何 HTML 元素中放置微调器

Question

每当用户在我的网站上执行操作时，我想显示一个微调器图标。这主要发生在通过 AJAX 提交表单(例如评论回复、图片上传等)时。当用户单击需要通过 AJAX 加载内容的内容时，也可能发生这种情况。

目前我有一个单独的 div 来保存我的微调器图标，例如<div id="ajax-spinner"></div> .它固定在屏幕顶部，使用 JQuery 的 beforeSend() 显示/隐藏。和 success ajax() 方法中的选项。有点像这样:

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< 中进行显示和隐藏调用，点击定位即可。

希望这对您有所帮助!

super 基本标记

<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>

super 基础的 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);  
});