2016-08-30 48 views
0

我想在JSF中使用jquery.sumoselect(https://hemantnegi.github.io/jquery.sumoselect/sumoselect_demo.html)。但是我不能。我嘗試以下操作:與JSF一起使用jquery.sumoselect

<h:outputStylesheet library="jquery.sumoselect" name="css/sumoselect.css" /> 
<h:outputScript library="jquery.sumoselect" name="js/jquery.sumoselect.js" /> 
<script> 
    $('.sumoselect').SumoSelect(); 
</script> 
... 

<h:form> 
    ... 
    <h:selectManyListbox id="language" value="#{viewController.languageList}" styleClass="sumoselect"> 
    <f:selectItems value="#{applicationStartupController.languageList}" var="language" itemValue="#{language.code}" itemLabel="#{language.description}" /> 
    </h:selectManyListbox> 
    ... 
</h:form> 

但是我得到的是下面的圖片:

Image 1

,而不是類似於:

Image 2

一個什麼樣的任何想法發生了什麼?我相信,CSS和JS文件正確計費。

+0

沒有進入細節,你可以試試這個'' – mike123

+0

您是否暗示相同的方法可以正常使用「普通」HTML而不是使用JSF生成的HTML輸出?迄今發佈的代碼表明,它會以同樣的方式失敗。 – BalusC

+0

mike123,它仍然不能用你的腳本 – Aliuk

回答

0

一切似乎都OK,但你應該運行SumoSelect()後的文件已準備就緒:

<h:head> 
    <title>Sumo</title> 
    <h:outputStylesheet library="css" name="sumoselect.css"/> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
    <h:outputScript library="js" name="jquery.sumoselect.min.js"/> 
</h:head> 

<h:body> 

    <h:selectManyListbox styleClass="test"> 
     <f:selectItem itemValue="1" itemLabel="Item 1" /> 
     <f:selectItem itemValue="2" itemLabel="Item 2" /> 
     <f:selectItem itemValue="3" itemLabel="Item 3" /> 
    </h:selectManyListbox> 

    <script> 
     $(document).ready(function(){ 
      $('.test').SumoSelect({okCancelInMulti:true, selectAll:true }); 
     }); 
    </script> 
</h:body>