[英]JSF2 or primefaces p:selectManyCheckbox styling with icons
One question who styled manycheckboxes with icons? 用图标设计多个复选框的问题是什么?
<p:selectManyCheckbox value="#{Step4Bean.selectedItems}" id="tag-list" >
<f:selectItems value="#{Step4Bean.allItems}" var="item" itemLabel="#{item}" itemValue="#{item}"/>
</p:selectManyCheckbox>
I have check boxes with 6 items , I must have 2 rows with 3 items in each row, near each item must be one icon. 我有6个项目的复选框,我必须有2行,每行3个项目,每个项目附近必须是一个图标。 How we can solve this? 我们怎么解决这个问题? Here is a output example link 这是一个输出示例链接
http://jpeg.am/images/?i=5692b9db7ea1d060bc7c97bcc788d6b8.jpg http://jpeg.am/images/?i=5692b9db7ea1d060bc7c97bcc788d6b8.jpg
PF already had the Grid layout for this component. PF已经具有此组件的网格布局。
<h3>Grid Layout</h3>
<p:selectManyCheckbox id="grid" value="#{checkboxView.selectedCities}" layout="grid" columns="3">
<f:selectItems value="#{checkboxView.cities}" var="city" itemLabel="#{city}" itemValue="#{city}" />
</p:selectManyCheckbox>
But the latest PF 5.2.3 and 5.3-SNAPSHOT has custom layout options 但最新的PF 5.2.3和5.3-SNAPSHOT具有自定义布局选项
<h3>Custom Layout (since v5.2.3)</h3>
<p:outputPanel id="customPanel" style="margin-bottom:20px">
<p:selectManyCheckbox id="custom" value="#{checkboxView.selectedConsoles2}" layout="custom">
<f:selectItem itemLabel="Xbox One" itemValue="Xbox One" />
<f:selectItem itemLabel="PS4" itemValue="PS4" />
<f:selectItem itemLabel="Wii U" itemValue="Wii U" />
</p:selectManyCheckbox>
<div class="ui-grid ui-grid-responsive">
<div class="ui-grid-row">
<div class="ui-grid-col-4">
<p:checkbox id="opt1" for="custom" itemIndex="0" />
</div>
<div class="ui-grid-col-4">
<p:checkbox id="opt2" for="custom" itemIndex="1" />
</div>
<div class="ui-grid-col-4">
<p:checkbox id="opt3" for="custom" itemIndex="2" />
</div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-4">
<h:outputLabel for="opt1" value="Xbox One" />
</div>
<div class="ui-grid-col-4">
<h:outputLabel for="opt2" value="PS4" />
</div>
<div class="ui-grid-col-4">
<h:outputLabel for="opt3" value="Wii U" />
</div>
</div>
</div>
</p:outputPanel>
Not sure how and if the latest functionaly can be used with an <f:selectItems/>
or only with multiple <f:selectItem/>
. 不确定如何以及最新的functionaly可以与<f:selectItems/>
一起使用,还是仅与多个<f:selectItem/>
。 I suspect the latter 我怀疑后者
See also: - See http://www.primefaces.org/showcase/ui/input/manyCheckbox.xhtml 另请参阅: - 请参阅http://www.primefaces.org/showcase/ui/input/manyCheckbox.xhtml
(examples taken from the PF showcase!) (来自PF展示的例子!)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.