非装载PrimeFaces组件

我是一个的JavaEE/JSF初学者，要加载PrimeFaces组件在仪表板/引导主题免费提供：http://www.creative-tim.com/product/light-bootstrap-dashboard 非装载PrimeFaces组件

有些加载（按钮），有些则不是（图表，用于例）。我想加载动画图表：http://www.primefaces.org/showcase/ui/chart/animate.xhtml（这个例子其实）

该组件是完全加载一个空白页上：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" 
    xmlns:h="http://java.sun.com/jsf/html" 
    xmlns:f="http://java.sun.com/jsf/core" 
    xmlns:p="http://primefaces.org/ui"> 
<h:head> 
</h:head> 

<h:body> 
    <p:chart type="line" model="#{chartView.animatedModel1}" style="width:400px;" /> 
</h:body> 
</html>

然而，这不是与整个设计装入：

<div class="row"> 
    <div class="col-md-4"> 
     <div class="card"> 
      <p:chart type="line" model="#{chartView.animatedModel1}" style="width:400px;" /> 
     </div> 
     </div> 

    <div class="col-md-8"> 
     <div class="card"> 
     </div> 
    </div> 
</div>

这里是“卡”的CSS：

.card { 
    border-radius: 4px; 
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(63, 63, 68, 0.1); 
    background-color: #FFFFFF; 
    margin-bottom: 30px; 
} 
.card .image { 
    width: 100%; 
    overflow: hidden; 
    height: 260px; 
    border-radius: 4px 4px 0 0; 
    position: relative; 
    -webkit-transform-style: preserve-3d; 
    -moz-transform-style: preserve-3d; 
    transform-style: preserve-3d; 
} 
.card .image img { 
    width: 100%; 
} 
.card .filter { 
    position: absolute; 
    z-index: 2; 
    background-color: rgba(0, 0, 0, 0.68); 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    text-align: center; 
    opacity: 0; 
    filter: alpha(opacity=0); 
} 
.card .filter .btn { 
    position: relative; 
    top: 50%; 
    -webkit-transform: translateY(-50%); 
    -ms-transform: translateY(-50%); 
    transform: translateY(-50%); 
} 
.card:hover .filter { 
    opacity: 1; 
    filter: alpha(opacity=100); 
} 
.card .btn-hover { 
    opacity: 0; 
    filter: alpha(opacity=0); 
} 
.card:hover .btn-hover { 
    opacity: 1; 
    filter: alpha(opacity=100); 
} 
.card .content { 
    padding: 15px 15px 10px 15px; 
} 
.card .header { 
    padding: 15px 15px 0; 
} 
.card .category, 
.card label { 
    font-size: 14px; 
    font-weight: 400; 
    color: #9A9A9A; 
    margin-bottom: 0px; 
} 
.card .category i, 
.card label i { 
    font-size: 16px; 
} 
.card label { 
    font-size: 12px; 
    margin-bottom: 5px; 
    text-transform: uppercase; 
} 
.card .title { 
    margin: 0; 
    color: #333333; 
    font-weight: 300; 
} 
.card .avatar { 
    width: 30px; 
    height: 30px; 
    overflow: hidden; 
    border-radius: 50%; 
    margin-right: 5px; 
} 
.card .description { 
    font-size: 14px; 
    color: #333; 
} 
.card .footer { 
    padding: 0; 
    background-color: transparent; 
    line-height: 30px; 
} 
.card .footer .legend { 
    padding: 5px 0; 
} 
.card .footer hr { 
    margin-top: 5px; 
    margin-bottom: 5px; 
} 
.card .stats { 
    color: #a9a9a9; 
} 
.card .footer div { 
    display: inline-block; 
} 
.card .author { 
    font-size: 12px; 
    font-weight: 600; 
    text-transform: uppercase; 
} 
.card .author i { 
    font-size: 14px; 
} 
.card h6 { 
    font-size: 12px; 
    margin: 0; 
} 
.card.card-separator:after { 
    height: 100%; 
    right: -15px; 
    top: 0; 
    width: 1px; 
    background-color: #DDDDDD; 
    content: ""; 
    position: absolute; 
} 
.card .ct-chart { 
    margin: 30px 0 30px; 
    height: 245px; 
} 
.card .table tbody td:first-child, 
.card .table thead th:first-child { 
    padding-left: 15px; 
} 
.card .table tbody td:last-child, 
.card .table thead th:last-child { 
    padding-right: 15px; 
} 
.card .alert { 
    border-radius: 4px; 
    position: relative; 
} 
.card .alert.alert-with-icon { 
    padding-left: 65px; 
}

我真的不明白为什么牛逼他生成的JavaScript不能执行（或者它可能被设计隐藏了吗？），有没有人有任何想法或这是否需要额外的细节？谢谢

编辑：乔纳森Crégut钉了它！

来源

2016-01-03 Marc

开始剥离您的CSS ...一次一行，看看它什么时候变得可见 – Kukeltje

下次在webbrowser中按下F12查找线索。 – BalusC

检查模板中是否没有加载jQuery的其他位置。 Primefaces也加载了它的jQuery版本，通常最终不会显示任何内容。

来源

2016-01-05 08:32:07

非装载PrimeFaces组件

回答

相关问题