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

Разбираемся в CSS
Ответить Пред. темаСлед. тема
Anonymous
 Как расположить индикатор выполнения вокруг элемента, вызвавшего задачу?

Сообщение Anonymous »

Я разрабатываю динамический веб-сайт с использованием jQuery, который в значительной степени зависит от операций AJAX. Всякий раз, когда запускается операция AJAX, отображается индикатор выполнения, который я разместил в середине веб-страницы.
Мне утомительно, когда посетитель отвлекает взгляд от имеющегося у него элемента. нажали, чтобы посмотреть индикатор выполнения, который может находиться на расстоянии километров от элемента, а затем вернуться к элементу или вокруг него, когда индикатор выполнения исчезнет.
Как следует Я размещаю индикатор выполнения вокруг элемента?
До сих пор я пытался зарегистрировать обработчик, вызываемый при начале следующего запроса AJAX, следующим образом...

Код: Выделить всё

$(document).on('ajaxStart', ()=>{
$('#parentOfBar').append("");
$('#progressBarElem').html('A moment, please wait...');
$('#progressBarElem').progressbar({value: false});
$('#progressBarElem').show();
});
Когда начинается операция AJAX, в центре экрана появляется индикатор выполнения, как я указал с помощью CSS. Как я уже говорил, мне бы хотелось, чтобы он отображался рядом с элементом, который вызвал операцию AJAX (скажем, по клику).
Я только что понял, что вместо добавления div элемент (который становится индикатором выполнения, когда он становится дочерним элементом некоторого фиксированного элемента), я мог бы решить эту проблему, сделав его родственным элементом элемента, который имеет фокус, и удалив его свойство CSS позиции следующим образом...

Код: Выделить всё

$(document).on('ajaxStart', ()=>{
$fucusedElem = $( document.activeElement ) //the currently focused element
$fucusedElem.parent().append("");
$('#progressBarElem').html('A moment, please wait...');
$('#progressBarElem').progressbar({value: false});
$('#progressBarElem').show();
});
Теперь индикатор выполнения отображается рядом с элементом, из-за которого он (индикатор выполнения) всплывает. Это достигается путем добавления индикатора выполнения в качестве родственного элемента элемента, находящегося в фокусе. Таким образом, когда индикатор выполнения появляется, он мешает расположению соседних элементов.
Это лучшее решение или может быть лучший способ определить, какой элемент вызвал AJAX? начать операцию вместо того, чтобы полагаться на элемент, имеющий фокус?

Подробнее здесь: https://stackoverflow.com/questions/782 ... ed-the-tas
Реклама
Ответить Пред. темаСлед. тема

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

  • Похожие темы
    Ответы
    Просмотры
    Последнее сообщение

Вернуться в «CSS»