1

我想用动画 GIF 代替标准 dijit.ContentPane loadingMessage,而不是默认的“正在加载...”消息。

根据文档,默认消息是:

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

所以我用以下内容覆盖了CSS:

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

当 ContentPane 加载时,我可以看到 GIF 和“正在加载...”消息,但问题是因为它只是一个<span>我似乎无法让它占据整个窗格并居中,而是它坐在左上角并且不显示整个加载图形。我不想loadingMessage用代码覆盖每个,特别是我更喜欢使用声明模式。

是否有一些更简单的方法(希望通过 CSS)让加载图像在窗格中居中?

4

1 回答 1

2

像这样的东西会起作用吗?

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

(还要确保 ContentPane 本身具有位置:相对或位置:绝对)

当然,窗格需要有一个固定的高度。如果它只是一个扩展以适应其内容的普通 ContentPane,那么浏览器在加载完成之前不会知道高度,因此不可能将加载消息垂直居中。

于 2009-12-16T08:38:23.137 回答