Question

我的图片标签有id属性。我想在特定的html表单中心显示这个加载图像（我有该html表单的id）。我正在使用jquery。我不知道该怎么做？

 <img id="loading" src="loading.gif" />

这样做的原因我可以在一个页面内有多个表单。我想在特定表格边界的中心显示图像而不是完整的页面边界

Answer 1

你可以使用这样的东西......

$('#form-id').submit(
  function(e) {
    $(this).children().hide();
    $(this).append('<img id="loading" src="loading.gif" />');
  }
);

Answer 2

随着CSS的到来，我们来到这个非常基本的结构（将这个HTML放在一个表单中并将CSS添加到样式叠加层）

<div class="loader">
    <img src="http://cdn1.iconfinder.com/data/icons/duesseldorf/32/process.png">
</div>

http://jsfiddle.net/aG3DP/

Answer 3

您可能应该将表单包装在DIV中，然后只需将img放在边距处，以便它显示在DIV的中心（包含您的表单）

img#loading {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

您可能希望默认使用javascript或其他东西隐藏它。

编辑：关于表单中的现有内容，我会使用position:absolute;指定图片的位置。

Answer 4

您需要这些jQuery方法：

offset()
width()
height()

一些数学，您可以轻松地将元素放在表单上。请注意，表单的默认宽度为100％。

检查我的解决方案：http://jsfiddle.net/3pbkV/

Answer 5

如果您使用position:absolute;将加载程序放在表单的中心，请记住在表单上使用position: relative;，因为绝对定位元素相对于其第一个定位的父元素定位。

实施例： HTML：

<form id="myform">
    <div class="loader"><img src="loading.gif"></div>
</form>

CSS：

form#myform {
    position: relative;
}
div.loader {
   width: 60px;
   height: 60px;
   position: absolute;
   left: 50%;
   top: 50%;
   margin-top: -30px;
   margin-left: -30px;
   display: none;
}

jQuery的：

$(function() {
   $('form#myform').submit(function() {
      $(this).find('.loader').show();
   });
});

在特定html表单的中心显示加载图像？

5 个答案: