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 回答