Question

我有一个样式表，用于显示服务器状态文本和彩色条（绿色=好，红色=向下，黄色=维护）。

我设置这些的方式是：

#status.Normal{
    color: white;
    text-align: left;
    font-size:17px;
    font-weight:700;
    letter-spacing:1px;
    background: url(images/greenbar.jpg) no-repeat;
}

#status.Down{
    color: white;
    text-align: left;
    font-size:17px;
    font-weight:700;
    letter-spacing:1px;
    background: url(images/red.jpg) no-repeat;
}

它们的使用方式只是在我的服务器列表xml文件中声明Normal或Down。

例如，如果站点状态对于xml读取的站点是正常的：

    <site name="template"> 
        <title>Title</title>
        <systemStatus>Normal</systemStatus>
        <networkNotes>notes etc</networkNotes>
        <maintenanceInformation>
                information about maintenance etc. 
        </maintenanceInformation>
    </site>

使用它的HTML：

        <td>
            <tr><td id="status"></td></tr>
        </td>

HTML从XML中的“状态”读取，该站点将获得“正常”和绿色条，并根据CSS将其显示为该服务器的状态。

使用我当前的设置，是否有办法在css中声明一个新属性（目前为法语用户翻译为法语），我可以将新属性（“Down”）设置为：

#status.EnPanne{
    color: white;
    text-align: left;
    font-size:17px;
    font-weight:700;
    letter-spacing:1px;
    background: url(images/red.jpg) no-repeat;
}

红色条上的文字显示为En panne而不是EnPanne？

基本上我正在尝试将自定义文本属性添加到EnPanne属性中，以便在仍使用正确属性的同时显示我想要的内容。

编辑：通过jme发布的解决方案，我能够产生这些结果。

enter image description here
下面是英语“向下”状态显示的示例，上面是我需要为法语显示做的事情。看来后续文本正在切断“redbar.jpg”并阻止栏延伸到页面的另一端。

我会假设我的两个选项在某种程度上强制将红色栏放在下面的文本上，或以某种方式删除后面的文本，以便栏可以完全延伸到页面的末尾？

编辑2：以下是将XML与html和CSS连接的脚本部分 - 特别是系统状态：

<script> <!--Loads the Status_Pages.xml file-->
var root = null;
$(document).ready(function ()
{
    $.get("Status_Page.xml",
    function (xml)
    {
        ...

        var status=$(root).find("systemStatus").text();
        $("td#status").html(status);
        $("td#status").attr("class", status);
        ...
     });
});
</script>

Answer 1

如何执行此操作只需设置class属性并允许css添加内容，而不是将状态文本添加到ajax调用中的表格单元格中。因此，要执行此操作，您删除此行：$("td#status").html(status);

然后在你的CSS中你可以这样做：

#status{
    color: white;
    text-align: left;
    font-size:17px;
    font-weight:700;
    letter-spacing:1px;
}
#status.Normal{
    background: url(images/greenbar.jpg) no-repeat;
}
#status.EnPanne, #status.Down {
    background: url(images/red.jpg) no-repeat;
}
/*Now set your messages*/
#status.EnPanne:before {
    content: "Le système est en panne";
}
#status.Normal:before {
    content: "Operations Normal";
}
#status.Down:before {
    content: "The system is currently down";
}

这是一个小提琴 demo 。

如果您反对不将文本添加到表格单元格中的想法，这里有一个示例，它使用一种技术隐藏表格单元格文本，同时绝对定位内容： demo 2 。如果您想要解释这种方法，请告诉我。

Answer 2

逃离空间怎么样？

#status.En\ Panne {...}

通常在您的XML中

<systemStatus>En Panne</systemStatus>

将显示文本添加到文本属性？

2 个答案: