PrimeFaces主题选择器

PrimeFaces主题选择器

作者:chszs,转载需注明。博客主页:http://blog.csdn.net/chszs

PrimeFaces集成了ThemeRoller CSS框架,而且预置了37种主题样式。可以使用在线的ThemeRoller主题产生器工具生成自定义的主题。


应用一个主题到PrimeFaces项目很简单,只需下载主题的JAR包文件,并把它添加到项目的类路径下,再配置PrimeFaces使用此主题即可。
主题包下载: http://repository.primefaces.org/org/primefaces/themes/all-themes/1.0.9/all-themes-1.0.9.jar

主题使用配置:在web.xml文件中添加下面的内容
<context-param>
  <param-name>primefaces.THEME</param-name>
  <param-value>swanky-purse</param-value>
</context-param>

PrimeFaces的主题选择器使得在页面上切换主题时无需刷新整个页面。

属性表




主题选择器用法

主题选择器的用法与单选菜单selectOneMenu的用法非常相似。
<p:themeSwitcher style="width:150px">
  <f:selectItem itemLabel="Choose Theme" itemValue="" />
  <f:selectItems value="#{bean.themes}" />
</p:themeSwitcher>

有状态的主题选择器

默认状态下,主题选择器仅仅改变主题样式,不进行页面刷新,一旦你喜欢上改变后的新主题,你可以使用Ajax保存新主题为设置项。
<p:themeSwitcher value="#{bean.theme}" effect="fade">
  <f:selectItem itemLabel="Choose Theme" itemValue="" />
  <f:selectItems value="#{themeSwitcherBean.themes}" />
  <p:ajax listener="#{bean.saveTheme}" />
</p:themeSwitcher>

使用swanky-purse主题后的UI效果图


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值