как я могу показать разделение нагрузки относительно элемента управления, на который я нажал?

Question

Я с трудом нахожу способ отображения загружаемого изображения в правом элементе рядом с элементом управления, на котором они щелкнули, ожидая запроса. Я использую панель UpdateProgress, но она должна быть размещена в определенном месте на странице. Я хочу отобразить его рядом с любым выбранным элементом управления. Как и в Facebook.

Answer 1

Ближайшая вещь, о которой я могу подумать, это абсолютный позиционный div, который помещается рядом с каждым элементом. Однако это не кажется слишком корректным, поскольку, если загружаемый файл находится справа от каждой ссылки прогресса, он может перекрываться и т. Д.

Я совершенно уверен, что Facebook сделал все эти индикаторы прогресса предустановленными и скрытыми, а не только один div для всех них.

Я думаю, вы могли бы попробовать что-то вроде:

<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> нажатии и использовать эти позиции для деления прогресса.

Просто вызовите javascript-функцию progress_thingie () и отправьте ей значение ИСТИНА или ЛОЖЬ, в зависимости от того, загружается он или нет.