Twitter Bootstrap với Primefaces (JSF)

Tôi đang cố gắng sử dụng Primefaces 3.2 (có lẽ nó liên quan đến JSF nói chung) với Twitter Bootstrap 2.0.2 (http://twitter.github.com/bootstrap).Twitter Bootstrap với Primefaces (JSF)

tôi đã thêm vào khởi động-ví dụ (http://twitter.github.com/bootstrap/examples/starter-template.html) một trình đơn thả xuống với các kịch bản sau đây trong <h:head>:

<script src="/resources/js/bootstrap.js"></script> 
<script src="/resources/js/jquery-1.7.2.js"></script> 
<script src="/resources/js/bootstrap-dropdown.js"></script>

này hoạt động tốt trên các trang JSF, nhưng nếu tôi thêm một đơn giản p:dataTable

<p:dataTable var="i" value="#{testBean.list}"> 
    <p:column> 
    <f:facet name="header"><h:outputText value="Item"/></f:facet> 
    <h:outputText value="#{i}"/> 
    </p:column> 
</p:dataTable>

trình đơn thả xuống không hoạt động nữa. Tôi cho rằng đó là JavaScript liên quan, nhưng không chắc chắn nơi tìm kiếm lỗi này.

Nguồn

2012-04-18 Thor

Bạn cũng có thể đăng mã HTML được hiển thị có liên quan không. – nfechner

Mã HTML được hiển thị ở đây: http://pastebin.com/avpKPnai – Thor

Trước hết bạn sử dụng tốt hơn h:outputScript để tải file js ...

Tôi nghĩ rằng nguyên nhân của mâu thuẫn giữa primefaces jquery và bằng tay bao gồm một ...

PrimeFaces 3.2 đi kèm với jQuery 1.7. 1, Vì vậy ...

Tháo

<script src="/resources/js/jquery-1.7.2.js"></script> từ mã

và Modi của bạn fy của bạn bao gồm theo cách sau trong phần tử <h:head> bạn

<f:facet name="first"> 
    <h:outputScript library="js" name="bootstrap.js"/> 
</f:facet> 
<h:outputScript library="primefaces" name="jquery/jquery.js"/> 
<h:outputScript library="js" name="bootstrap-dropdown.js"/>

Ngoài ra hãy xem tại JQuery Conflicts with Primefaces? và liên quan resource ordering.

Nguồn

2012-04-18 08:14:12 Daniel

Trình đơn thả xuống vẫn không hoạt động. Với 'p: dataTable' đã ngừng hoạt động, nó cũng không hoạt động. (Tôi đã gỡ bỏ hướng dẫn sử dụng '', có được không?). jQuery nên được tải từ thư viện Primefaces, vì điều này được trả về: '

Bạn đang bao gồm JQuery hai lần (Thủ tướng nhập khẩu tự động). Xóa nhập thủ công của bạn:

<script src="/erp/resources/js/jquery-1.7.2.js"></script>

và mọi thứ sẽ hoạt động.

Nguồn

2012-04-18 08:21:16 nfechner

Tôi có thể xác minh rằng JQuery được nhập bởi Primefaces trong đầu ra được hiển thị, nhưng menu DropDown không hoạt động đúng. – Thor

có một cách dễ dàng hơn để thêm chủ đề này.

Nếu bạn đang sử dụng một maven căn cứ dự án thực hiện điều này:

Thêm phụ thuộc

<dependency> 
     <groupId>org.primefaces.themes</groupId> 
     <artifactId>all-themes</artifactId> 
     <version>1.0.9</version> 
    </dependency>

Hoặc thêm một sự phụ thuộc chủ đề cụ thể

Thêm này trong web của bạn.xml

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

Nếu bạn không sử dụng Maven, tải về jar bằng tay và thêm nó vào classpath của bạn:

http://repository.primefaces.org/org/primefaces/themes/

Tài liệu tham khảo:

Nguồn

2013-03-22 15:19:44

Các vấn đề liên quan

Twitter Bootstrap với Primefaces (JSF)

Trả lời

Các vấn đề liên quan