非裝載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組件

回答

相關問題