0

ProgressBar プラグインを使用する代わりに、以下のスクリプトを使用して非同期の進行状況バーを表示しました。ページ上のリクエスト。ブラウザと互換性があるかどうかなど、フィードバックを提供してもらえますか。先週、codereview でこの質問をしましたが、応答がなかったので、ここで試してみてください。

<div class="overlay">
    <div class="progress">
       <img src="@Url.Content("~/content/images/loading.gif")" />Loading...
    </div>
</div>

//displays progress bar
$('.overlay').ajaxStart(function () {
       $(this).css({ height: $(document).height(), width: $(document).width() }).show();
       $(this).find(".progress").css({ top: $(window).height() / 2, left: $(window).width() / 2 });
       }).ajaxStop(function () {
       $(this).hide();
});


.overlay
{
    position: fixed !important;
    position: absolute; /*ie6*/
    width: 100%;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: #000;
    filter: alpha(opacity=20);
    opacity: 0.2;
    -moz-opacity: 0.2;
    -khtml-opacity: 0.2;
    -webkit-opacity: 0.2;
    z-index: 10004;
    display: none;
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=20); /*ie6*/
}
.overlay .progress
{
    position: absolute;
    z-index: 10005;
    background: #fff;
    color: #000;
}
4

1 に答える 1

0

jQuerywidthとheight関数は IE 7-9 でゼロを返すため (古いバージョンはチェックできません)、ここwindowで object をthisobject に置き換えることができます:

$(this)
    .find('.progress')
    .css({
        top: $(this).height() / 2 + 'px',
        left: $(this).width() / 2  + 'px'
    });

this.overlay ブロックにはウィンドウの幅と高さがあるため、計算に使用できます。

また、@Url.Content最新のブラウザーでは失敗します。パスを直接設定する代わりに、なぜそれを使用するのですか?

于 2013-05-03T17:15:09.463 に答える