Отображение командной кнопки только с изображением - PullRequest
Новая
       3

Отображение командной кнопки только с изображением

16 голосов
/ 04 ноября 2011

Я пытаюсь отобразить кнопку с изображением только на своей странице, но вижу только кнопку с ^. Ниже приведен код для моей кнопки: 

<p:commandButton onclick="lineSearch.show();" image="backgroung-image:url(/images/title_logo.jpg)"/> 
<p:dialog header="Modal Dialog" widgetVar="lineSearch" modal="true" onCloseUpdate="lineIdField" showEffect="scale" hideEffect="explode">  
    <ui:include src="lineSearch.xhtml"/>
</p:dialog>

Изображение существует в папке изображений. Кнопка отображается на странице следующим образом: 

<button id="j_idt23:j_idt27" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only" type="submit" onclick="lineSearch.show();;PrimeFaces.ab({formId:'j_idt23',source:'j_idt23:j_idt27',process:'@all'});return false;" name="j_idt23:j_idt27" role="button" aria-disabled="false">
    <span class="ui-button-icon-primary ui-icon backgroung-image:url(/images/title_logo.jpg)"></span>
    <span class="ui-button-text">ui-button</span>
</button>
<script type="text/javascript">
    widget_j_idt23_j_idt27 = new PrimeFaces.widget.CommandButton('j_idt23:j_idt27', {text:false,icons:{primary:'backgroung-image:url(/images/title_logo.jpg)'}});
</script>

Спасибо !!!

Ответы [ 4 ]

38 голосов
/ 04 ноября 2011

Атрибут image должен ссылаться на имя класса CSS , а не на простое свойство CSS. Итак, это должно сделать: 

<p:commandButton image="someCssClassName" />

со следующим в вашем CSS: 

.someCssClassName {
    background-image: url(images/title_logo.jpg)
}

Обратите внимание, что я исправил основную опечатку в имени свойства, а также удалил косую черту из URL-адреса изображения, иначе он был бы разрешен относительно корня домена сайта; В приведенном выше примере ожидается, что title_logo.jpg будет находиться внутри папки /image, которая, в свою очередь, находится в папке, где находится файл CSS.

Однако, этот менее неуклюжий, я думаю: 

<p:commandLink action="#{bean.submit}">
    <h:graphicImage name="images/title_logo.jpg" />
</p:commandLink>
1 голос
/ 01 ноября 2018

Я предлагаю использовать "P: coomandLink" и "P: graphicImage" одновременно.Я создал папку под webapps и поместил свой jpg файл в эту папку.Этот код прекрасно работает для меня.удачи. 

<p:commandLink action="#{MyClass.myMethod}">
   <p:graphicImage value="images/Max-Burger.jpg"  />
</p:commandLink>
0 голосов
/ 29 сентября 2016

Еще проще: 

<p:commandButton icon="ui-icon-XXXXX">

Различные значки, которые вы можете выбрать: https://api.jqueryui.com/theming/icons/ и http://www.primefaces.org/showcase/ui/misc/fa.xhtml

0 голосов
/ 24 июня 2016

Поместите это в ваш стиль CSS: 

    .dolar-icon {
    background-image: url("#{facesContext.externalContext.request.contextPath}/resources/imagenes/dolar.png") !important;}

Теперь вы можете использовать значок "dolar-icon", который вы определили в вашем CSS. 

<p:commandButton action="#{as.fe}" icon="dolar-icon"/>
...