Question

在我的aspx页面中，我在我放置的表格中有3个td div显示我的内容。我用ajax加载里面的数据在我显示我的内容div的同一个td中的每个div 我还放置了一个div来显示数据div时的加载指示负载。我的问题是当看到它时定位加载指示器div 具有不同分辨率或屏幕尺寸的不同机器。目前我的加载指示器div是绝对类型的。任何人都可以建议一种优雅的方法来定位我的装载三个td中的指示符div使得它正确居中无论屏幕尺寸或分辨率如何。我正在使用c＃web应用程序。

以下是其中一个标记的标记，

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

Answer 1

将指示器显示为背景图像，以便以任何分辨率为中心。

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

您可以将背景图像分配给表格或显示它的td。

加载后，您可以使用jQuery删除loader类，例如：

if (is_loaded) {
  $('table td').removeClass('loader')
}

无论屏幕尺寸或分辨率如何，都将加载指示器div定位在位置

1 个答案: