首页 > 其他分享 >PrimeFaces主题选择器

PrimeFaces主题选择器

时间:2023-03-28 14:36:07浏览次数:45  
标签:主题 themes PrimeFaces 页面 选择器 primefaces


PrimeFaces主题选择器

作者: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的主题选择器使得在页面上切换主题时无需刷新整个页面。



属性表

PrimeFaces主题选择器_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效果图

PrimeFaces主题选择器_布局_02

标签:主题,themes,PrimeFaces,页面,选择器,primefaces
From: https://blog.51cto.com/prettycms/6154770

相关文章

  • PrimeFaces布局技巧
    PrimeFaces布局技巧作者:chszs布局组件Layout是一个高度可定制的边框布局模型,它可以很轻松地创建复杂的网页布局,即使不懂Web设计。一、布局组件Layout的属性布局组件Layout的......
  • CSS之伪类选择器,属性选择器
    一.结构伪类选择器伪类选择器一般的格式是使用冒号来表示  :一般其它的伪类选择器很少使用,但是a标签的个性化都是使用的伪类选择器来个性化,所以对于a标签的个性化需要......
  • CSS的三种样式及选择器
    一.概述css一共有三种样式,分别是:行内样式,内部样式,外部样式行内样式:写入在HTML标签内,是最不规范的写法,没有突出HTML+CSS的关键就是骨架和美化分离,这样写在一起的行内样式,......
  • Image-Line 的 FL Studio 21 新主题来啊
    自Image-Line发布FLStudio21以来,好奇的社区成员创造了新的好看的主题。我在网上查看了这些主题,并根据它们独特的外观和受欢迎程度选择了以下主题。不知道如何安装这些......
  • java——spring boot集成kafka——broker、主题、分区、副本——概念理解
    一、代理商Broker 在之前我们已经为大家介绍了生产者向消息队列中投递消息,消费者从消息队列中拉取数据。 在kafka消息队列中有一个非常重要的概念就是代理Broker,大家......
  • 主题样式修改
    首先要获取JS权限,否则后面不用看了博客皮肤将默认皮肤改为SimpleMemory博客侧边栏公告<scripttype="text/javascript">window.cnblogsConfig={title:......
  • 图片选择器:ImageSelector
    简介:Android自定义相册,实现了拍照、图片选择(单选/多选)、ImageLoader无绑定任由开发者选择。GitHub网址:https://github.com/YancyYe/GalleryPick优点:UI重改所有功能可......
  • java——spring boot集成kafka——kafka中主题topic和分区partition的概念
                                                       ......
  • CSS选择器(包含CSS3新增的伪类和属性选择器等)
    选择器详见https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/SelectorsCSS语法规则由两个主要的部分构成:选择器,以及一条或多条声明(样式)全局选择器......
  • CSS04.选择器
    选择器选择器作用:帮助你精准的选中想要的元素\找到特定的HTML页面元素1.简单选择器1.1ID选择器(JavaScript使用)(不推荐使用)选中的是对应id值的元素id选择器使用#进行标......