0

id 属性を持つイメージタグがあります。この読み込み中の画像を特定の html フォームの中央に表示したい (私はその html フォームの ID を持っています)。私はjqueryを使用しています。私はこれに行く方法がわかりませんか？

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

これを行う理由は、1 つのページ内に複数のフォームを含めることができるためです。完全なページ境界ではなく、特定のフォーム境界の中央に画像を表示したい

4

5 に答える 5

1

CSSが登場すると、この非常に基本的な構造になります（このHTMLをフォーム内に配置し、CSSをスタイルオーバーレイに追加します）

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

http://jsfiddle.net/aG3DP/

于 2013-01-08T13:17:16.710 に答える
1

このようなものを使用できます...

$('#form-id').submit(
  function(e) {
    $(this).children().hide();
    $(this).append('<img id="loading" src="loading.gif" />');
  }
);
于 2013-01-08T13:14:22.313 に答える
0

次の jQuery メソッドが必要です。

  • offset()
  • width()
  • height()

いくつかの計算を行うと、要素をフォームの中央に簡単に配置できます。フォームのデフォルト幅は 100% であることに注意してください。

私のソリューションを確認してください：http://jsfiddle.net/3pbkV/

于 2013-01-08T13:20:02.973 に答える
0

おそらく、フォームを DIV 内にラップし、imgマージンを付けて配置して、DIV の中央に表示されるようにする必要があります (フォームを含む)。

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

JavaScript などを使用してデフォルトで非表示にすることもできます。

編集: フォーム内の既存のコンテンツに関しては、画像の位置を で指定しますposition:absolute;。

于 2013-01-08T13:00:37.007 に答える
0

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();
   });
});
于 2013-01-08T13:21:24.843 に答える