1

読み込みのインジケーター用に次の CSS コードがあります。

.indicator {
    display:none;
    margin:0px;
    paddingLeft:0px;
    paddingRight:0px;
    paddingTop:0px;
    paddingBottom:0px;
}

インジケータ HTML コード:

<img class='indicator' id='ajaxBusy' src='/ajax-loader.gif'>

そして、インジケータを表示するための次のコード:

$('.page_button').live('click',function() {

    $('#ajaxBusy').show();
    $.post("url",
        function(data)
        {
            if (data != "") 
            {
                //some actions      
            }
            $('#ajaxBusy').hide();
        });
});

このコードはうまく機能しますが、細かい点がいくつかあります。インジケーターが表示されると、その下のページの他のコンテンツが 1 行下に移動します。インジケーターが消えると、この行も消えます。削除したいです。どうすればいいですか？

4

2 に答える 2

1

クラスにposition:absolute;&z-index:99;を追加します。.indicator

.indicator {
  display:none;
  margin:0px;
  paddingLeft:0px;
  paddingRight:0px;
  paddingTop:0px;
  paddingBottom:0px;
  position:absolute; /* Add This */
  z-index:99;  /* Add This */
}
于 2012-07-11T06:25:02.330 に答える
0

HTMLを次のように変更します

<span id='ajaxBusy' style="z-index:99999;"><img class='indicator'  src='/ajax-loader.gif'>
</span>

そしてあなたのjQueryは：

$('body').delegate('.page_button','click',function() {

                $('#ajaxBusy').show();
                $.post("url",
                    function(data)
                    {
                        if (data != "") 
                        {
                            //some actions      
                        }
                        $('#ajaxBusy').hide();
                    });
            });
于 2012-07-11T06:09:07.657 に答える