Question

我正在使用带有jQuery的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标签，你将能够使用内置的jquery of primefaces来获得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>

Primefaces + jQuery + Triangle Icon（THES DOESN＆＃39; T SHOW）！

2 个答案: