Question

我想在我的日历上应用蒙皮。我的页面上有两个日历。但我希望只有一个受皮肤影响。我发现，首先你需要下载皮肤jar文件。我下载了所有皮肤并将其添加到库中，然后将这些行添加到我的部署描述符

<context-param>
    <param-name>primefaces.THEME</param-name>
    <param-value>flick</param-value>
</context-param>

这是我的页面

<h:panelGrid columns="2" columnClasses="evenColumns, oddColumns">

    ...

    #{msgs.confirmPasswordPrompt}
    <h:inputSecret id="passwordConfirm"/>

    #{msgs.calender}
    <p:calendar value="#{readMessages.date}"
                mode="popup"
                showOn="button"
                effect="bounce"
                navigator="false"/>

     <p:calendar value="#{readMessages.date}"
                 mode="popup"
                 showOn="button"
                 effect="bounce"
                 navigator="false"/>

 </h:panelGrid>

但我的两个压延机都受到剥皮的影响。有没有办法剥皮仅适用于第一次压光机。或者你可以说我想要我在我的第一个日历上应用一个蒙皮，在我的第二个日历上应用另一个蒙皮。其他PrimeFaces组件保持不变的皮肤？

由于

Answer 1

从未在实践中使用它，但从理论和PF文档中可以使用以下内容：

为日历定义自定义样式类，并将其应用于styleClass属性。

日历的主要样式类是.ui-datepicker，因此要定义一个这样的css类：

.custom .ui-datepicker {
  //css
}

在脸上：

<p:calendar value="#{readMessages.date}"
            styleClass="custom"
            mode="popup"
            showOn="button"
            effect="bounce"
            navigator="false"/>

如果您只想为日历的特殊部分设置样式，请参阅p:calendar的所有样式类的Primefaces documentation。

Answer 2

作为对Matt Handy的回答的解释：这背后的原理是在CSS中使用优先级规则。只要一个元素是不同的，冲突的样式声明的目标，优先级就会发挥作用。例如，如果你有

<div class="foo bar">

与

.foo { border-color:red; }
.bar { border-color:green; }

两个声明冲突 - 浏览器应该应用哪一个？在上述情况下，两个声明具有相同的“特异性”级别，在这种情况下，后面包含或定义的声明将取代另一个声明（此处：绿色）。如果使用您喜欢的浏览器的检查工具检查元素，则覆盖的样式定义将显示为删除线。

然而，除了命令之外，还有一大堆关于什么语句胜过其他语句的规则，通常比更一般的规则更优先于更具体的规则。网络上有很多关于这个特定主题的好文章，例如Understanding Style Precedence，Specifics on Specificity和（如果你是星球大战的朋友）Specificity Wars。

回到原来的问题，您可以使用比标准PrimeFaces主题更具特异性的ID或类的任意组合。再次，浏览器检查工具是你的朋友。查看容器的结构和附加的CSS，然后选择自定义ID和/或类的组合，其具有比PrimeFaces 更高的特异性，以解决相关元素。在那里，您可以存储样式声明，以覆盖PrimeFaces之前定义的全部或部分内容。

这是一种强大，灵活和快速的技术，我用它来覆盖一个小的边距或宽度或颜色，以适应我的设计的其余部分。但是，它会将您的样式标记与您的HTML结构和组件上的类定义联系起来，从长远来看这可能是不合需要的。此外，如果您发现自己正在改变许多组件或许多属性，它将变得不方便。在这种情况下，您应该考虑使用PrimeFaces Themeroller集成来创建自己的自定义主题。

编辑：至于你的直接要求，我对此进行了进一步研究。 Matt的建议不起作用，因为类custom附加到包含输入字段和按钮的范围。实际日期选择器位于身体末端形式外的单独div中。因此，.custom .ui-picker不适用于它，因为它没有嵌套在范围内。

上述方法可以设置输入样式，例如.custom .ui-inputfield。或者，您也可以为p:calendar提供一个ID并使用此ID（它将成为范围的ID）。

但是，对于日期选择器，您需要找到不同的方式，因为它不是跨度的一部分。但它也有一个ID，您可以使用（在我的情况下为#ui-datepicker-div），这对我来说是一个绿色边框。还有一件小事：看起来只有一个DatePicker被渲染来提供所有日历组件（对我来说很有意义;）），所以你不能为不同的日历设置不同风格的DatePickers。（至少没有更多的工作，可能还有一些JavaScript在按钮的点击或其他东西上摆弄了datePicker类......）

如何在页面上的一个组件上应用PrimeFaces蒙皮，而不会受到影响

2 个答案: