【问题标题】:Primefaces: how to change the default icon on the button of the calendar field?Primefaces:如何更改日历字段按钮上的默认图标?
【发布时间】:2012-04-16 09:18:15
【问题描述】:

在 Primefaces 中,如何更改日历字段按钮使用的图标?

例如,在以下字段中

<p:calendar value="#{calendarBean.date3}" id="popupButtonCal" showOn="button" />

我想把图标改成http://forum.primefaces.org/images/smilies/icon_e_wink.gif

我查看了documentation,但找不到此属性。

更新:

我尝试了以下方法,部分成功:

JSF:

<p:commandButton id="modalDialogButton" value="" onclick="dlg2.show();" type="button" icon="ui-calendar"/>

CSS:

.ui-widget .ui-calendar {

    background-image: url(#{resource['images:country_flag.gif']});
}

问题:

  1. 我现在确实看到了p:commandButton 按钮上的图像。但是,我收到了警告消息:

    Apr 03, 2012 10:43:58 AM com.sun.faces.application.resource.ResourceHandlerImpl logMissingResource WARNING: JSF1064: Unable to find or serve resource, images/country_flag.gif.jsf.

  2. 我在 p:calendar 上找不到 css 样式,我应该覆盖它以更改日历按钮上的图像。

【问题讨论】:

  • 用你的替换默认图片
  • 谢谢。但我不想更改 primefaces jar。
  • @Cagatay Civici 你能提供一个例子/链接吗?谢谢。
  • 这个方法怎么样stackoverflow.com/a/512067/617373
  • 您在 css 文件中使用 el 表达式进行了尝试,但无法完成...在链接中他们使用 jquery 进行...

标签: javascript jquery css jsf primefaces


【解决方案1】:

试试这个

.ui-icon-calendar {
    background-image: <your URL> !important;
    background-position: center center !important;
    width: 16px;
    height: 16px;
}

【讨论】:

    猜你喜欢
    • 2017-03-17
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-08-04
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多