如何以Asp.Net中的repeater在JSF中以水平方向顯示數據？

Question

我在JSF中看到了數據表組件，它通常按行逐行呈現。但是，如果我想要以垂直方向顯示某些內容但以水平方式顯示內容，該怎麼辦？假設我想製作相冊，所以我需要能夠以列格式顯示數據庫表的行。

Answer 1

。利用另一個UIData基於組件的方法，其中必須對輸出的完全控制，如Facelets'ui:repeat，Tomahawk'st:dataList或RichFaces'rich:dataList或a4j:repeat。

E.g.

<ul> 
    <ui:repeat items="#{bean.photos}" var="photo"> 
     <li><img src="#{photo.url}" alt="#{photo.title}" /></li> 
    </ui:repeat> 
</ul> 

結合

與例如

li { 
    display: inline; 
    list-style-type: none; 
} 

的t:dataList和rich:dataList可以使你<ul>和<li>。你只需要打印<img>（或者如果你喜歡的話，可以輸入h:graphicImage）並應用CSS。

更新：作爲獎勵和橫向滾動頁面通常對用戶體驗不好，你想使它成爲一個旋轉木馬。只需按如下方式設計<ul>元件：

ul { 
    width: 500px; /* Just pick whatever width it needs to be. */ 
    white-space: nowrap; 
    overflow-x: scroll; 
    overflow-y: none; 
}