Обычно заменить сообщение о загрузке для dijit ContentPane

Я хочу заменить стандартное сообщение загрузки dijit.ContentPane анимированным GIF вместо стандартного сообщения «Загрузка...».

Согласно документации, сообщение по умолчанию:

<span class='dijitContentPaneLoading'>${loadingState}</span>

Итак, я переопределил CSS с помощью:

.dijitContentPaneLoading {
    background-image: url('../images/loading.gif');
    background-repeat: no-repeat;
    background-position: center center;
}

Я вижу GIF и сообщение «Загрузка ...», когда загружается ContentPane, но проблема в том, что, поскольку это всего лишь <span>, я не могу заставить его занимать всю панель и центрироваться, вместо этого он находится в левом верхнем углу и не отображает весь график загрузки. Я не хочу переопределять каждый loadingMessage кодом, особенно я предпочитаю использовать декларативный режим.

Есть ли более простой способ (надеюсь, с помощью CSS), чтобы загрузить изображение по центру панели?


css dojo dijit.layout
person Kitson    schedule 14.12.2009    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Будет ли что-то подобное работать?

.dijitContentPaneLoading {
    display: block;
    position: relative;
    top: 40%;
    background-image: url('../images/loading.gif');
}

(Также убедитесь, что сама ContentPane имеет позицию: относительную или позицию: абсолютную)

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

person Bill Keese    schedule 16.12.2009
comment
Спасибо за указатель... С небольшими манипуляциями я смог заставить его отображаться именно так, как я хотел. - person Kitson; 16.12.2009