Question

我很难找到一种在Div中显示加载图像的方法，他们在等待请求时点击了一个控件。我正在使用UpdateProgress Bar但它应该放在某个地方在页面上。我想在他们选择的任何控件旁边显示它。就像它在Facebook上一样。

Answer 1

我能想到的最近的事情是一个绝对定位的div，它放在每个元素的旁边。但是它似乎不太有效，因为如果加载东西在每个进度链接的右边，它可能会重叠等。

我很确定Facebook将所有这些进度条预先设置并隐藏起来，而不仅仅是所有这些进度条。

我猜你可以试试像：

<div id="progress_bar"></div>
<style type="text/css">
    div#progress_bar {
        background: url('the_url_for_your_gif.gif') no-repeat center;
        display: none;
        height: 20px; /* Adjust yourself */
        position: absolute;
        width: 30px; /* Adjust yourself */
    }
</style>
<script type="text/javascript">
    var extra = 10; /* 10px extra for space */
    var prog_top = 0;
    var prog_left = 0;
    $(function() {
        $('a').live('click', function() {
            var h = $(this).offset();
            prog_top = h.top;
            prog_left = (h.left + $(this).width() + extra);
        });
    });

    function progress_thingie(loading) {
        if (loading)
            $('div#progress_bar').css({
                'top' : prog_top,
                'left' : prog_left
            });
        $('div#progress_bar').showToggle(loading);
    }
</script>

基本上，这可以保存您按下的每个<a>的位置，并将这些位置用于进度div。

只需调用javascript函数progress_thingie（）并向其发送TRUE或FALSE，具体取决于它是否正在加载或完成。

如何根据我点击的控件显示加载Div？

1 个答案: