一般替换 dijit ContentPane 的加载消息答案

【问题标题】：Generically Replace Loading Message for a dijit ContentPane一般替换 dijit ContentPane 的加载消息
【发布时间】：2009-12-14 21:07:11
【问题描述】：

我想将标准 dijit.ContentPane loadingMessage 替换为动画 GIF，而不是默认的“正在加载...”消息。

根据文档，默认消息是：

<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）让加载图像在窗格中居中？

【问题讨论】：

标签： css dojo dijit.layout

【解决方案1】：

这样的东西有用吗？

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

（还要确保 ContentPane 本身具有 position: relative 或 position:absolute）

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

【讨论】：

感谢您的指点...通过一点操作，我就能让它完全按照我想要的方式显示。