Стиль JSF2 или Primefaces p: selectManyCheckbox со значками

Один вопрос кто стилизовал многие чекбоксы с иконками?

<p:selectManyCheckbox value="#{Step4Bean.selectedItems}" id="tag-list" >
                        <f:selectItems value="#{Step4Bean.allItems}" var="item" itemLabel="#{item}" itemValue="#{item}"/>
                    </p:selectManyCheckbox>

У меня есть флажки с 6 элементами, у меня должно быть 2 ряда по 3 элемента в каждом ряду, возле каждого элемента должен быть один значок. Как мы можем это решить? Вот ссылка на пример вывода

http://jpeg.am/images/?i=5692b9db7ea1d060bc7c97bcc788d6b8.jpg


checkbox styling jsf primefaces selectmanycheckbox
person Armen Arzumanyan    schedule 28.03.2013    source источник
comment
Возможно, связано с: Настройка Primefaces и других решений JSF   -  person Luiggi Mendoza    schedule 29.03.2013
comment
как сказано в ссылке @LuiggiMendoza, вы можете использовать макет   -  person Darka    schedule 29.03.2013

Ответы (1)


arrow_upward
1
arrow_downward

В 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>

Но последние 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>

Не уверен, как и можно ли использовать последние функциональные возможности с <f:selectItems/> или только с несколькими <f:selectItem/>. подозреваю последнее

См. также: см. http://www.primefaces.org/showcase/ui/input/manyCheckbox.xhtml

(примеры взяты из витрины PF!)

person Kukeltje    schedule 20.05.2015