Как сделать кнопку с изображением в JSF - PullRequest
Новая
       4

Как сделать кнопку с изображением в JSF

21 голосов
/ 06 мая 2011

Я хочу иметь компонент, который выглядит как кнопка, но вместо текста он должен содержать изображение.Поскольку стандартная кнопка не предлагает эту функцию, я попытался использовать <h:commandLink>: 

<h:commandLink action="#{some_action}">
    <p:panel styleClass="some_style">
        <h:graphicImage value="#{some_image}">
    </p:panel>
</h:commandLink>

. Это не работает.<h:commandLink> переводится в тег <a>, а <p:panel> в <div>.Теги <a> не могут содержать теги <div>, поэтому тег <div> автоматически помещается вне тега <a>.В результате кликабельна только картинка, а не окружающая панель, которая выглядит как кнопка.Есть ли способ сделать окружающую панель частью ссылки или поместить изображение внутри кнопки?

Мой проект использует JSF и библиотеку Primefaces: 

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:composite="http://java.sun.com/jsf/composite"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.prime.com.tr/ui">

Ответы [ 4 ]

31 голосов
/ 06 мая 2011

Существует несколько способов добавить изображение в commandButton :

Использование атрибута изображения 

<h:commandButton action="#{some_action}" image="button.gif" />

Абсолютный или относительный URL изображения будет отображаться для этой кнопки. Если указан, этот «входной» элемент будет быть типа «изображение». В противном случае это будет быть того типа, который указан типом свойство с меткой, указанной свойство value.

Использовать CSS 

<h:commandButton action="#{some_action}" styleClass="button" />

.button {
    background: white url('button.gif') no-repeat top;
}
8 голосов
/ 06 мая 2011

Вы можете просто переместить div за пределы, например. 

<div class="myButton">
<h:commandLink action="#{some_action}" styleClass="clickAll">
        <h:graphicImage value="#{some_image}">
</h:commandLink>
</div>

И стиль div таким образом. Просто сделайте отображение якоря (тега) в виде блока, и он должен заполнить весь элемент div, чтобы на него можно было кликать. Например, в вашем CSS идут: 

.clickAll{
  display:block;
}
4 голосов
/ 22 августа 2012

Если вы можете использовать значок из PrimeFaces / JSF, то есть простое и надежное решение: 

<p:column>
    <p:commandButton icon="ui-icon-wrench"
     style="border-width:0;background:none;"/>
</p:column>

Это может помочь избежать кода JavaScript в JSF.

0 голосов
/ 20 ноября 2014

Если изображение не подходит, добавьте свойства в класс сss: 

.button {
    background: white url('button.gif') no-repeat top;
    width: 32px;   // button width
    height: 32px;  // button height
    background-size: contain;
    border: none;  // hide border of button
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...