繁体   English   中英

与屏幕大小或分辨率无关,将加载指示器div定位在位置

[英]Positioning loading indicator div at position irrespective of the screen size or resolution

在我的aspx页面中,我在一个表中放置了3个td,其中放置了div来显示我的内容。我正在使用ajax在每个div中加载数据。在显示我的内容div的同一td中还放置了一个div以在数据div加载时显示加载指示器。 我的问题是当通过不同分辨率或屏幕尺寸的不同机器查看加载指示器div时,将其放置。 目前,我的加载指示器div是绝对类型。 任何人都可以提出一种优雅的方法来将我的加载指示器div放置在三个TD中,以便无论屏幕大小或分辨率如何,都可以将其正确居中。 我正在使用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>

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

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

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

加载后,您可以使用jQuery删除加载器类,例如:

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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM