0

私のaspxページでは、コンテンツを表示するためにdivを配置したテーブル内に3 tdがあります.ajaxを使用して、コンテンツdiviを表示しているのと同じtd内の各div内のデータをロードしていますまた、データdivがロードされたときにロードインジケーターを表示するためにdivを配置しました。私の問題は、解像度や画面サイズが異なるさまざまなマシンを通して見たときに、読み込みインジケーターdivを配置することです。現在、私のローディングインジケータdivは絶対型です。画面サイズや解像度に関係なく、ローディングインジケーターdivを3つのtdに配置して、正しく中央に配置するためのエレガントな方法を提案できますか？私はc＃Webアプリケーションを使用しています。

以下は、tdの1つのマークアップです。

<table width="100%" border="0" cellpadding="0" cellspacing="0" class="Box">
                    <tr>
                        <td class="Box_TopLeftCurve">
                            &nbsp;
                        </td>
                        <td valign="top" class="Box_TopRep">
                        </td>
                        <td class="Box_TopRightCurve">
                            &nbsp;
                        </td>
                    </tr>
                    <tr>
                        <td class="Box_LeftRep">
                            &nbsp;
                        </td>
                        <td align="left" valign="top">
                            <div class="Box_GridArea">
                               Data Here
                            </div>
                            <div style="position: absolute; top: 347px; left: 207px; width: 134px;display:none;">
                                Loading Indicator
                            </div>
                        </td>
                        <td class="Box_RightRep">
                            &nbsp;
                        </td>
                    </tr>
                    <tr>
                        <td class="Box_BaseLeftCurve">
                            &nbsp;
                        </td>
                        <td class="Box_BaseRep">
                            &nbsp;
                        </td>
                        <td class="Box_BaseRightCurve">
                            &nbsp;
                        </td>
                    </tr>

4

1 に答える 1

0

インジケーターを背景画像として表示して、どの解像度でも簡単に中央に配置できるようにします。

.loader { background: url('/images/loader.gif') center center no-repeat; }

背景画像を、それが表示されるテーブルまたはtdに割り当てることができます。

ロードすると、jQueryを使用してローダークラスを削除できます。例：

if (is_loaded) {
  $('table td').removeClass('loader')
}
于 2012-07-24T09:33:44.233 に答える