Question

我正在尝试将<p:selectBooleanCheckbox>中<p:panelGrid>的样式更改为此exemple中的可检查图像，我的问题是如何选择正确的CSS类来修改样式Primefaces组件与我的新风格，因为在浏览器的HTML输出中我发现了很多CSS类

我的CSS风格：

.checkimage{
display:none;
}

.checkimage + label{
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    position: absolute;  
}

.checkimage + label img{
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    opacity: 0.4;
    filter: alpha(opacity=40);
    height: 100px;
    width: 100px;
    display:block;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid;
    border-radius: 0.75em;
}
.checkimage + label:hover img{
    -webkit-filter: grayscale(65%);
    filter: grayscale(65%);
    opacity: 0.8;
    filter: alpha(opacity=80);
}

.checkimage:checked + label img{ 
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
    opacity: 1.0;
    filter: alpha(opacity=100);

}

这是HTML输出，因此我应该在CSS样式中选择哪些类，我需要 Hover ，默认状态如果图像和检查图像时。

<div id="j_idt10:id1" class="ui-chkbox ui-widget checkimage">
        <div class="ui-helper-hidden-accessible">
            <input id="j_idt10:id1_input" name="j_idt10:id1_input"
                type="checkbox" aria-checked="false" />
        </div>

        <div class="ui-chkbox-box ui-widget ui-corner-all ui-state-default">
            <span class="ui-chkbox-icon ui-icon ui-icon-blank ui-c"></span>
        </div>

</div>


<label id="j_idt10:j_idt56" class="ui-outputlabel ui-widget" for="j_idt10:id1_input"> check one

     <img id="j_idt10:j_idt57" src="images/img1.jpg?pfdrid_c=true" alt="" />

</label>

这是我在XHTML文件中的示例，如果需要的话：

<p:panelGrid>   
        <p:selectBooleanCheckbox styleClass="checkimage" id="id1" />
                <p:outputLabel for="id1" value="check one" >
                        <p:graphicImage for="id1"  url="images/img1.jpg"/> 
                </p:outputLabel>

        <p:selectBooleanCheckbox styleClass="checkimage" id="id2" />
                <p:outputLabel for="id2" value="check two" >
                        <p:graphicImage for="id2"  url="images/img2.jpg"/> 
                </p:outputLabel>

        <p:selectBooleanCheckbox styleClass="checkimage" id="id3" />
                <p:outputLabel for="id3" value="check three" >
                        <p:graphicImage for="id3"  url="images/img3.jpg"/> 
                </p:outputLabel>

</p:panelGrid>

Answer 1

我找到了解决方案：首先，普通JSF组件的样式比Primefaces组件更容易，这意味着使用<h:XXX>代替<p:XXX>。

<h:panelGrid>   
        <h:selectBooleanCheckbox styleClass="checkimage" id="id1" />
                <h:outputLabel for="id1" value="check one" >
                        <p:graphicImage for="id1"  url="images/img1.jpg"/> 
                </h:outputLabel>

        <h:selectBooleanCheckbox styleClass="checkimage" id="id2" />
                <h:outputLabel for="id2" value="check two" >
                        <p:graphicImage for="id2"  url="images/img2.jpg"/> 
                </h:outputLabel>

        <h:selectBooleanCheckbox styleClass="checkimage" id="id3" />
                <h:outputLabel for="id3" value="check three" >
                        <p:graphicImage for="id3"  url="images/img3.jpg"/> 
                </h:outputLabel>

</h:panelGrid>

并且浏览器中的HTML输出非常简单：

<input id="j_idt9:id1" name="j_idt9:id1" checked="checked" class="checkimage" type="checkbox">

<label for="j_idt9:id1">check one
      <img id="j_idt9:j_idt57" src="images/img1.jpg?pfdrid_c=true" alt="">
</label>

Answer 2

我不知道你是怎么想表明图像（复选框）被选中但是我做了红色边框所以从这个例子我希望你能进一步工作。

<强> panelGrid中

<p:panelGrid>   
    <p:row>
        <p:column styleClass="radioColumn">
            <p:selectBooleanCheckbox styleClass="myRadio" id="id1" />
            <p:outputLabel for="id1" value="check one" >
                <p:graphicImage width="50" height="50" name="img/image1.png"/> 
            </p:outputLabel>
        </p:column>
        <p:column styleClass="radioColumn">
            <p:selectBooleanCheckbox styleClass="myRadio" id="id2"/>
            <p:outputLabel for="id2" value="check two" >
                <p:graphicImage width="50" height="50" name="img/image2.png"/> 
            </p:outputLabel>
        </p:column>
        <p:column styleClass="radioColumn">
            <p:selectBooleanCheckbox styleClass="myRadio" id="id3" />
            <p:outputLabel for="id3" value="check three" >
                <p:graphicImage width="50" height="50" name="img/image3.png"/> 
            </p:outputLabel>
        </p:column>
    </p:row>
</p:panelGrid>

<强>样式

.myRadio {
    display:none;
}
.myRadio + label img{
    display:block;
    margin-left: auto;
    margin-right: auto;
}
.highlighted {
    border: 1px solid;
    border-color: red;
}

<强>脚本

$(document).on("change", ".myRadio input", function () {
    $(this).closest(".radioColumn").find("img").toggleClass("highlighted");
});

如何使图像在Primefaces中表现得像<p：selectbooleancheckbox>？

2 个答案: