Chinaunix首页 | 论坛 | 博客
  • 博客访问: 4113122
  • 博文数量: 626
  • 博客积分: 10
  • 博客等级: 民兵
  • 技术积分: 11080
  • 用 户 组: 普通用户
  • 注册时间: 2012-08-23 13:08
文章分类

全部博文(626)

文章存档

2015年(72)

2014年(48)

2013年(506)

分类: Java

2013-10-14 10:12:56

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


应用一个主题到PrimeFaces项目很简单,只需下载主题的JAR包文件,并把它添加到项目的类路径下,再配置PrimeFaces使用此主题即可。
主题包下载:

主题使用配置:在web.xml文件中添加下面的内容
  1. <context-param>  
  2.   <param-name>primefaces.THEMEparam-name>  
  3.   <param-value>swanky-purseparam-value>  
  4. context-param>  

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

属性表




主题选择器用法

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

有状态的主题选择器

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

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

阅读(2057) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~