PrimeFaces主题选择器

简介: 版权声明:本文为博主chszs的原创文章,未经博主允许不得转载。 https://blog.csdn.net/chszs/article/details/8666379 PrimeFaces主题选择器作者:chszs,转载需注明。
版权声明:本文为博主chszs的原创文章,未经博主允许不得转载。 https://blog.csdn.net/chszs/article/details/8666379

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效果图


目录
相关文章
|
3月前
选择器(2)
选择器(2)。
56 2
|
3月前
before选择器
before选择器。
58 1
|
3月前
after选择器
after选择器。
32 1
|
JavaScript
ElementUI: 自定义主题
ElementUI: 自定义主题
135 0
before和after选择器
before和after选择器
64 0
|
前端开发
笔记|使用CSS选择器(基本选择器)
使用CSS选择器(基本选择器)
107 0
笔记|使用CSS选择器(基本选择器)
|
前端开发
CSS常用选择器和关系选择器的基本用法
父子关系直接包含的关系,祖先后代关系,直接或间接包含的关系 ,祖先后代也包含,兄弟关系, 拥有共同的父元素。
231 0
CSS常用选择器和关系选择器的基本用法
|
JavaScript 索引
jQuery基础选择器
jQuery引入及其选择器 jQuery是JS的一个库,它里面封装了一些我们开发中常用的一些功能;它提供了一些方便的选择器,可以让我们更方便的操作DOM。
|
前端开发 JavaScript
【CSS】基础选择器,包括标签选择器、类选择器、id选择器和通配符选择器...
有关基础选择器的学习记录,包括标签选择器、类选择器、id选择器和通配符选择器...
410 0
【CSS】基础选择器,包括标签选择器、类选择器、id选择器和通配符选择器...

热门文章

最新文章