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