5

ajax.action リンクをクリックすると、ページの中央に読み込み中の画像を背景の不透明度で表示したい。

<img id="image_loading" alt="" src="../../images/site/loading.gif" style="position: fixed;     
     display: none;" />

これが私のコードです

<nav class="ust_menu">
    <ul>
         <li>@Ajax.ActionLink("Home", "Index", "Home", new AjaxOptions { UpdateTargetId = "article_site", LoadingElementId = "image_loading" })</li>
         <li>@Ajax.ActionLink("Contact Us", "Contact", "Home", new AjaxOptions { UpdateTargetId = "article_site", LoadingElementId = "image_loading" })</li>
         <li>@Ajax.ActionLink("About", "About", "Home", new AjaxOptions { UpdateTargetId = "article_site", LoadingElementId = "image_loading" })</li>    
    </ul>
</nav>

希望する位置ではなく、背景の不透明度なしで画像を表示できます。背景が不透明なページの真ん中に読み込み中の画像を表示するにはどうすればよいですか。

ありがとう。

4

1 に答える 1

6

画像を中央に配置するには:

<img id="image_loading" alt="" src="@Url.Content("~/content/loading.gif")" class="progress" />

そしてCSSファイルで：

.progress {
    display: none;
    position: fixed;
    top: 50%;
    left : 50%;
    margin-top: -50px;
    margin-left: -100px;
}

より派手なエフェクトを実行したい場合は、OnBeginおよびOnCompleteコールバックをサブスクライブして、画像の表示方法をより詳細に制御できます。

@Ajax.ActionLink("Home", "Index", "Home", new AjaxOptions { 
    OnBegin = "onBegin",
    OnComplete = "onComplete",
    UpdateTargetId = "article_site"
})

その後：

function onBegin() {
    // TODO: show the progress image
}

function onComplete() {
    // TODO: hide the progress image
}
于 2012-04-04T05:42:09.990 に答える