Primefaces + jQuery + 三角形图标（不显示）！

Question

我正在使用带有 jQ​​uery 的 primefaces（我猜是因为我正在使用的模板中有这一行）

<h:outputScript library="primefaces" name="jquery/jquery.js" target="head"/>

所以假设当我使用这个时：（来自here）

<p:accordionPanel multiple="true">
    <p:tab title="Godfather Part I">
        <h:panelGrid columns="2" cellpadding="10">
            <p:graphicImage name="demo/images/godfather/godfather1.jpg" />
            <h:outputText
                value="The story begins as Don Vito Corleone..." />
        </h:panelGrid>
    </p:tab>
    <p:tab title="Godfather Part II">
        <h:panelGrid columns="2" cellpadding="10">
            <p:graphicImage name="demo/images/godfather/godfather2.jpg" />
            <h:outputText value="Francis Ford Coppola's legendary..." />
        </h:panelGrid>
    </p:tab>
    <p:tab title="Godfather Part III">
        <h:panelGrid columns="2" cellpadding="10">
            <p:graphicImage name="demo/images/godfather/godfather3.jpg" />
            <h:outputText value="After a break of more than 15 years...." />
        </h:panelGrid>
    </p:tab>
</p:accordionPanel>

我应该看到一个完全可用的手风琴。嗯，我明白了，除了三角形图标。

检查，我发现在每个选项卡中呈现的跨度如下：

<h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all tab-in-accordion" role="tab" aria-expanded="false">
    <span class="ui-icon ui-icon-triangle-1-e"></span>
    Godfather Part I
</h3>

问题出在<span class="ui-icon ui-icon-triangle-1-e"></span>，但 chrome 检查器中的 ui-icon-triangle-1-e 类没有出现。我已经阅读并且知道该类是提供背景和位置的类（使用 jquery 中的图标）。

如何解决这个问题并显示三角形？

Answer 1

bootstrap theme.css 的主题定义存在问题。如果你检查了 CSS，你会注意到它。将以下内容添加到您的主 css 文件中以使三角形图标可见。

.ui-accordion .ui-accordion-header .ui-icon { 显示：块； }

Answer 2

你不需要插入 jquery ，这是由 primafaces 自动完成的......

除非您尝试做不同的事情，例如同时使用其他版本的 jquery 和 primefaces jquery。

尝试删除它并再次运行。如果不起作用，您可能遇到了主题定义问题...

顺便说一句，如果你在你的jsf页面中使用primefaces标签，你就可以使用primefaces内置的jquery来做你自己的jquery代码。

已编辑：

默认情况下，primafaces 使用 aristo 主题，这些主题已经在 primefaces 包中，

我认为设置一个主题可以解决你的情况，让我们尝试下载它并设置在web.xml中......

如果您使用的是 maven，请执行以下操作：

1- 在maven中插入这个依赖

<dependency>    
<groupId>org.primefaces.themes</groupId>    
<artifactId>aristo</artifactId> 
<version>1.0.8</version> 
</dependency>

2- 在您的 web.xml 中：

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