JSF动态改变皮肤
如何进行Android应用的动态主题和皮肤切换(四)
Android应用的动态主题和皮肤切换是一种非常有趣且具有挑战性的技术，它可以为用户提供更加个性化的界面体验。
本文将介绍如何实现Android应用的动态主题和皮肤切换，以及一些相关的技术和注意事项。
一、主题和皮肤的概念在Android应用中，主题和皮肤是指应用的界面样式和风格。
主题定义了应用的整体风格，包括背景颜色、字体样式、图标等。
而皮肤则是主题的一个变种，可以根据用户的偏好进行切换，使得应用的界面体验更加个性化。
二、动态主题和皮肤切换的实现原理动态主题和皮肤切换的实现原理主要是通过修改应用的资源文件来实现。
Android应用的资源文件包括布局文件、图片文件、样式文件等，通过修改这些资源文件，可以改变应用的外观。
三、资源文件的替换实现动态主题和皮肤切换的第一步是准备多套主题和皮肤的资源文件。
比如，可以为不同的主题和皮肤准备不同的布局文件、图片文件和样式文件。
然后，在切换主题和皮肤时，将相应的资源文件替换到应用的资源文件夹中，就可以改变应用的外观了。
四、使用主题和皮肤的标识符为了方便切换主题和皮肤，可以为每个主题和皮肤定义一个唯一的标识符。
比如，可以使用数字、字符串等作为主题和皮肤的标识符。
然后，在需要切换主题和皮肤的地方，通过读取用户设置的标识符，选择对应的资源文件进行替换。
五、实现夜间模式除了切换主题和皮肤，夜间模式也是一种常见的需求。
夜间模式一般是将应用的主题切换为暗色调，以便在夜间使用时不会刺眼。
实现夜间模式的方法和切换主题和皮肤类似，只需要准备一套暗色调的资源文件，然后在需要切换夜间模式的地方将其替换即可。
六、适配不同分辨率的设备在实现动态主题和皮肤切换时，需要注意适配不同分辨率的设备。
由于不同设备的屏幕分辨率和像素密度不同，可能会导致切换主题和皮肤时出现显示异常的情况。
为了解决这个问题，可以使用Android提供的尺寸单位和屏幕适配技术，保证应用在不同设备上显示效果一致。
七、实现动态主题和皮肤切换的库为了简化动态主题和皮肤切换的实现过程，可以使用一些已有的开源库。
JS实现网页换肤功能效果
JS实现⽹页换肤功能效果使⽤ JS 切换对应的 CSS 样式表。
例如hao123⾸页的右上⽅就有⽹页换肤功能。
除了切换 CSS 样式表⽂件之外，通常的⽹页换肤还需要通过 Cookie 来记录⽤户之前更换过的⽪肤，这样下次⽤户访问的时候，就可以⾃动使⽤上次⽤户配置的选项。
基本流程如下：上⾯是使⽤流程图来描述下，⾃从⼯作以来很⼩画这样的流程图如果流程图画错了或者画的不够好请⼤家原谅！先来看看效果图吧！我只是做个demo 来实现这样⼀个效果！假如页⾯上⼀进来的时候有这么四个按钮分别代表不同的样式当我⿏标点击不同的按钮时候切换不同的css⽂件且切换时候记录cookie⾥⾯去，当我们刷新页⾯或者关闭⽹页重新打开由于cookie的存在所以还是关闭前的css样式这样就实现了简单的⽹页换肤功能效果基本的原理就是这些！⾸先我们来了解下cookie是⼲什么⽤的？简单讲 cookie作⽤是客户端存储数据。
也就是本地存储。
具体的了解可以看我之前的⼀篇关于cookie的博客。
讲到cookie，我们再来简单的来了解下HTML5中新增了2个本地存储sessionStorage和localStorage. sessionStorage、 localStorage、cookie都是在浏览器端存储的数据，其中sessionStorage的概念很特别，引⼊了⼀个“浏览器窗⼝”的概念。
sessionStorage是在同源的同窗⼝（或tab）中，始终存在的数据。
也就是说只要这个浏览器窗⼝没有关闭，即使刷新页⾯或进⼊同源另⼀页⾯，数据仍然存在。
关闭窗⼝后，sessionStorage即被销毁。
同时“独⽴”打开的不同窗⼝，即使是同⼀页⾯，sessionStorage对象也是不同的。
Web Storage 带来的好处：减少⽹络流量：⼀旦数据保存在本地后，就可以避免再向服务器请求数据，因此减少不必要的数据请求，减少数据在浏览器和服务器间不必要地来回传递。
vue实战-基于vue前端实现动态换主题皮肤功能攻略
现在的app和pc网站做的越来越花哨，但是有时候用户并不喜欢你给他挑选好的主题颜色，这个时候就需要一个换皮肤的功能了。
那么我们怎么在vue中实现这个换皮肤的功能呢？第一步：同步多套css样式第二步：换肤入口第三步：切换主题，调用对应css样式下面具体以项目详细介绍项目结构实现思路我们用vue一般都是写单页面程序，因此在实际发布的时候只有一个html以及一堆静态文件（js、css、img 之类）。
而在html中引用了这些js和css。
我们要换皮肤的话其实就是动态的去切换css，所以在这里实现换皮肤其实也就是动态的更改html中引用css的路径，使得当用户选择了不同的皮肤，页面引用的css不同从而呈现的样式也不一样。
优化策略其实在实际场景中，需要通过切换皮肤来改变css的元素占所有css的比重并不会很多，因此我们需要把需要通过切换改变的css单独提取出来，在动态改变css路径时只需要去改变这个控制皮肤的css就可以了。
把皮肤相关的css压缩。
实现代码分析如下是我们的html代码，注意其中的<link rel="stylesheet" name="theme" href="">，其他的都是正常引用。
接下来就是具体实现换皮肤功能了，换皮肤一般都是点击一个按钮弹出一些皮肤的选项，选中选项后皮肤生效。
我们将换皮肤功能抽成一个组件theme-switch。
pc端使用iview，手机端使用了vant。
一共有3套皮肤用于切换。
目录结构pc端<template><div style="display:inline-block;padding:0 6px;"><Dropdown trigger="click" @on-click="setTheme"><a href="javascript:void(0)"><Icon :style="{marginTop: '-2px', verticalAlign: 'middle'}"color="#495060" :size="18" type="paintbucket"></Icon><Icon type="arrow-down-b"></Icon></a><DropdownMenu slot="list"><DropdownItem v-for="(item, index) inthemeList" :key="index" :name=""><Row type="flex" justify="center" align="middle"><span style="margin-right:10px;"><Icon :size="20" :type=".substr(0, 1) !== 'b' ? 'happy-outline' : 'happy'" :color="item.menu"/></span><span><Icon :size="22"type="record" :color="item.element"/></span></Row></DropdownItem></DropdownMenu></Dropdown></div></template><script>import Cookies from 'js-cookie';import config from '../../../../build/config.js';export default {name: 'themeSwitch',data () {return {themeList: [{name: 'black_b',menu: '#495060',element: '#2d8cf0'},{name: 'black_g',menu: '#495060',element: '#00a854'},{name: 'black_y',menu: '#495060',element: '#e96500'}]};},methods: {// 点击切换事件setTheme (themeFile) {let menuTheme = themeFile.substr(0, 1); let mainTheme = themeFile.substr(-1, 1); if (menuTheme === 'b') {// 黑色菜单this.$mit('changeMenuTheme', 'dark');menuTheme = 'dark';} else {this.$mit('changeMenuTheme', 'light');menuTheme = 'light';}let path = '';// 取到我们在html上给皮肤的css留的坑并且设置路径let themeLink = document.querySelector('link[name="theme"]'); let userName = Cookies.get('user');if (localStorage.theme) {let themeList = JSON.parse(localStorage.theme);let index = 0;let hasThisUser = themeList.some((item, i) => {if (erName === userName) {index = i;return true;} else {return false;}});if (hasThisUser) {themeList[index].mainTheme = mainTheme;themeList[index].menuTheme = menuTheme;} else {themeList.push({userName: userName,mainTheme: mainTheme,menuTheme: menuTheme});}localStorage.theme = JSON.stringify(themeList);} else {localStorage.theme = JSON.stringify([{userName: userName,mainTheme: mainTheme,menuTheme: menuTheme}]);}let stylePath = '';if (config.env.indexOf('dev') > -1) {stylePath = './src/views/main-components/theme-switch/theme/'; } else {stylePath = 'dist/';}if (mainTheme !== 'b') {path = stylePath + mainTheme + '.css';} else {path = '';}themeLink.setAttribute('href', path);}},created () {let path = '';// 判断运行环境用于切换地址if (config.env.indexOf('dev') > -1) {path = './src/views/main-components/theme-switch/theme/';} else {path = 'dist/';}let name = Cookies.get('user');// 如果用户之前选择过皮肤则直接使用之前选择的，否则使用默认皮肤if (localStorage.theme) {let hasThisUser = JSON.parse(localStorage.theme).some(item => { if (erName === name) {this.$mit('changeMenuTheme', item.menuTheme); this.$mit('changeMainTheme', item.mainTheme);return true;} else {return false;}});if (!hasThisUser) {this.$mit('changeMenuTheme', 'dark');this.$mit('changeMainTheme', 'b');}} else {this.$mit('changeMenuTheme', 'dark');this.$mit('changeMainTheme', 'b');}// 根据用户设置主题if (this.$store.state.app.themeColor !== 'b') {let stylesheetPath = path + this.$store.state.app.themeColor + '.css'; // 取到我们在html上给皮肤的css留的坑并且设置路径let themeLink = document.querySelector('link[name="theme"]');themeLink.setAttribute('href', stylesheetPath);}}};</script>手机端<template><div style="display:inline-block;padding:0 6px;"><div @click="showBtn">换皮肤</div><van-actionsheet v-model="show" :actions="themeList" @select="setTheme"/> </div></template><script>import Cookies from "js-cookie";import { Actionsheet } from "vant";// import config from "../../../../build/config.js";export default {name: "themeSwitch",components: {[]: Actionsheet},data() {return {show: false,themeList: [{name: "黑色",data: "black_b"},{name: "绿色",data: "black_g"},{name: "黄色",data: "black_y"}]};},methods: {showBtn() {this.show = true;},setTheme(themeFile) {themeFile = themeFile.data;let menuTheme = themeFile.substr(0, 1); let mainTheme = themeFile.substr(-1, 1); if (menuTheme === "b") {// 黑色菜单this.$mit("changeMenuTheme", "dark");menuTheme = "dark";} else {this.$mit("changeMenuTheme", "light");menuTheme = "light";}let path = "";let themeLink = document.querySelector('link[name="theme"]'); let userName = Cookies.get("user");if (localStorage.theme) {let themeList = JSON.parse(localStorage.theme);let index = 0;let hasThisUser = themeList.some((item, i) => {if (erName === userName) {index = i;return true;} else {return false;}});if (hasThisUser) {themeList[index].mainTheme = mainTheme;themeList[index].menuTheme = menuTheme;} else {themeList.push({userName: userName,mainTheme: mainTheme,menuTheme: menuTheme});}localStorage.theme = JSON.stringify(themeList);} else {localStorage.theme = JSON.stringify([{userName: userName,mainTheme: mainTheme,menuTheme: menuTheme}]);}let stylePath = './';// stylePath = "./src/view/component/theme-switch/theme/"; // if (config.env.indexOf('dev') > -1) {// stylePath = 'src/view/component/theme-switch/theme'; // } else {// stylePath = 'dist/';// }if (mainTheme !== "b") {path = stylePath + mainTheme + ".css";} else {path = "";}themeLink.setAttribute("href", path);this.show = false;}},created() {let path = "";path = "css/";// if (config.env.indexOf("dev") > -1) {// path = "src/view/component/theme-switch/theme";// } else {// path = "dist/";// }let name = Cookies.get("user");if (localStorage.theme) {let hasThisUser = JSON.parse(localStorage.theme).some(item => {if (erName === name) {this.$mit("changeMenuTheme", item.menuTheme);this.$mit("changeMainTheme", item.mainTheme);return true;} else {return false;}});if (!hasThisUser) {this.$mit("changeMenuTheme", "dark");this.$mit("changeMainTheme", "b");}} else {this.$mit("changeMenuTheme", "dark");this.$mit("changeMainTheme", "b");}console.log(path);// 根据用户设置主题if (this.$store.state.app.themeColor !== "b") {let stylesheetPath = path + this.$store.state.app.themeColor + ".css"; let themeLink = document.querySelector('link[name="theme"]');themeLink.setAttribute("href", stylesheetPath);}}};</script>在首页引用该组件，初次渲染时进入该组件的creat方法，如果用户之前选择过皮肤则直接使用之前选择的，否则使用默认皮肤。
javascript动态修改css样式方法汇总（四种方法）
javascript动态修改css样式⽅法汇总（四种⽅法）在很多情况下，都需要对⽹页上元素的样式进⾏动态的修改。
在JavaScript中提供⼏种⽅式动态的修改样式，下⾯将介绍⽅法的使⽤、效果、以及缺陷。
1、使⽤obj.className来修改样式表的类名。
2、使⽤obj.style.cssTest来修改嵌⼊式的css。
3、使⽤obj.className来修改样式表的类名。
4、使⽤更改外联的css⽂件，从⽽改变元素的css下⾯是⼀段html代码和css代码⽤来解释上⾯⽅法的区别的。
CSS.style1{margin:10px auto ;background-color:#9999FF; display:block;color:White; border:1px solid white; padding:10px 25px; font-size:18px; }.style1:hover{ background-color:#66B3FF; cursor:pointer;}.style2{margin:10px auto ;background-color:gray; display:block;color:black; border:1px solid white; padding:10px 25px; font-size:18px; }.style2:hover{ background-color:black; color:White; cursor:pointer}HTML<div><input id="btnB" type="button" name="btnLogin" value="登录" class="style1" /><div id="tool"><input type="button" value="【obj.style.className】更改样式" onclick="changeBackgroundColor()"/><input type="button" value="【obj.style.cssText】更改样式" onclick="changeFontSize()" /><input type="button" value="【obj.className】更改样式" onclick="addRadius()" /><input type="button" value="更改外联css样式" onclick="recover()" /></div></div>⽅法⼀、使⽤obj.className来修改样式表的类名从下⾯的代码可以看出ob.style.cssTest是如何来btnB的样式的。
如何进行Android应用的动态主题和皮肤切换(九)
Android应用的动态主题和皮肤切换对于提升用户体验和增加应用的功能性起着重要的作用。
通过动态主题和皮肤切换功能，用户可以根据自己的喜好和需求，自由地调整应用的界面风格和外观，从而使应用更加个性化和与众不同。
下面将介绍一些实现Android应用动态主题和皮肤切换的方法和技巧。
一、如何实现动态主题和皮肤切换在Android应用中，实现动态主题和皮肤切换的方法有多种，常见的几种方法包括使用主题管理器、使用自定义控件、使用资源替换等。
主题管理器是一种比较常用的实现动态主题和皮肤切换的方法。
通过主题管理器，可以动态地加载和切换不同的主题资源，从而改变应用的外观和风格。
在实现主题管理器时，可以使用Android提供的Theme和Style等相关类，通过定义不同的主题和样式，来实现动态主题和皮肤切换的功能。
另一种方法是使用自定义控件。
通过自定义控件，可以在应用中新增加一些具有特定样式和风格的控件，从而实现动态主题和皮肤切换。
例如，可以定义一个自定义按钮控件，通过修改按钮的背景、字体颜色等属性，来改变按钮的外观和风格。
同时，可以给按钮控件添加皮肤切换的监听器，当用户点击切换皮肤的按钮时，通过重新设置按钮的样式，来实现皮肤切换的功能。
还有一种常见的方法是使用资源替换。
Android应用中的资源文件如布局文件、图片文件等，可以通过资源替换的方式，来实现动态主题和皮肤切换。
当用户切换主题或皮肤时，程序可以通过读取不同的资源文件，来替换当前使用的资源，从而改变应用的外观和风格。
二、动态主题和皮肤切换的实际应用动态主题和皮肤切换功能在实际应用中具有广泛的应用场景。
例如，在社交类应用中，用户可以根据个人的喜好和心情，选择不同的主题和皮肤，来表达自己的个性和情感。
在购物类应用中，用户可以根据不同的商品类型和活动主题，选择相应的主题和皮肤，来获得更好的购物体验。
在新闻类应用中，用户可以根据自己的关注点和兴趣领域，选择不同的主题和皮肤，来获取更加个性化的新闻浏览服务。
JS动态修改网页body的背景色实例代码
JS动态修改⽹页body的背景⾊实例代码⼤部分⽹页默认的背景⾊为⽩⾊，个⼈感觉⽐较刺眼，于是写了个JS的脚本去改变body部分的背景⾊，代码如下：// ==UserScript==// @name ChangeBackgroundColor// @namespace tingl// @include *// @version 1// @grant none// ==/UserScript==(function () {'use strict';var color = '#ececec';var style;function createStyle() {style = document.createElement('style');style.type = 'text/css';style.innerHTML = 'body {background-color: ' + color + ' !important;}';}function changeBackgroundColor() {if(!style.parentNode) document.head.appendChild(style);}createStyle();changeBackgroundColor();document.head.addEventListener("DOMNodeRemoved",changeBackgroundColor);}) ()代码⽐较简单，直接创建了⼀个body上的css样式规则，然后添加到head⾥，如果⽹页内容变化或者异步更新等使样式被移除时，通过事件监听机制重新添加到head上。
由于只是简单地改变了body上的背景⾊，脚本的适⽤范围有限。
总结以上所述是⼩编给⼤家介绍的JS动态修改⽹页body的背景⾊实例代码，希望对⼤家有所帮助，如果⼤家有任何疑问欢迎给我留⾔，⼩编会及时回复⼤家的！。
如何进行Android应用的动态主题和皮肤切换(八)
Android应用的动态主题和皮肤切换已经成为了现代应用开发中的一个热门话题。
通过动态主题和皮肤切换，用户可以根据自己的喜好和需求，自由地改变应用的外观和风格。
这不仅能提升用户体验，还能增加应用的吸引力和个性化。
一、动态主题的意义及原理动态主题指的是应用的主题可以根据用户的选择或系统的自动切换而发生改变。
它可以通过修改应用的资源文件，如颜色、字体、背景等，实现不同的主题效果。
在实现动态主题的过程中，开发者需要做好主题切换的逻辑设计，并为每个主题编写对应的资源文件。
当用户切换主题时，应用会重新加载对应的资源文件，从而呈现出新的主题效果。
二、实现动态主题的方法1. 使用样式和主题在Android开发中，我们可以通过定义不同的样式和主题来实现动态主题的切换。
首先，我们可以在应用的资源文件中定义多个不同的样式和主题。
然后，通过代码中动态设置应用的样式和主题，实现主题的切换。
这样，当用户切换主题时，应用会重新加载对应的样式和主题，从而改变应用的外观和风格。
2. 使用皮肤插件除了使用样式和主题，我们还可以通过使用皮肤插件来实现动态主题的切换。
皮肤插件是一种独立于应用的资源文件，它包含了应用的样式、主题、图片等各种资源。
在应用启动时，我们可以将皮肤插件加载到应用中，并根据用户的选择或系统的自动切换，动态加载不同的皮肤资源。
这样，应用的外观和风格就会随着皮肤的改变而发生相应的变化。
三、动态主题的实际应用动态主题和皮肤切换在实际应用中有着广泛的应用场景。
比如，一款音乐播放器应用可以提供不同的主题，让用户根据不同的音乐风格选择相应的主题。
同时，这样的切换还能提升用户体验，让用户感觉更加舒适和个性化。
另外，一些社交应用也会根据用户的喜好和需求，提供不同的主题和皮肤。
这样，用户可以根据心情和场景的变化，灵活地切换应用的外观和风格。
四、动态主题的发展趋势随着移动技术的不断发展，动态主题和皮肤切换也在不断演进和进化。
未来，我们可以预见到更加智能和个性化的动态主题。
如何进行Android应用的动态主题和皮肤切换(十)
Android应用的动态主题和皮肤切换是让用户能够根据个人喜好和场景需求来个性化定制应用界面的一种功能。
下面将从技术实现角度和用户体验两个方面，探讨如何进行Android应用的动态主题和皮肤切换。
一、技术实现角度1. 资源文件管理：动态主题和皮肤切换的基础是资源文件的管理。
在Android开发中，资源文件主要包括布局文件、图片、颜色等，可以根据不同主题要求创建不同的资源文件。
使用资源文件的方式，可以在应用运行过程中动态加载和替换对应主题的资源文件。
2. 主题切换机制：实现主题和皮肤切换的关键在于切换机制的设计。
可以设计一个主题管理类，通过调用该类的方法来动态切换不同的主题或皮肤。
该类需要根据用户选择或应用内部逻辑判断来修改资源文件，从而实现动态主题切换的效果。
3. 动态加载：为了实现动态主题和皮肤切换的目的，应用需要支持动态加载资源文件。
通过反射技术，可以在应用运行过程中动态加载资源文件并应用到对应的视图上。
这样，不仅可以实现主题和皮肤切换的效果，还可以节省应用的内存占用。
二、用户体验角度1. 提供多种主题选择：用户个性化的需求多种多样，为了满足不同用户的喜好，应该提供多种主题选择。
可以根据不同的风格、颜色或元素来区分不同的主题，并在设置页面中提供一个主题选择器供用户自由选择。
2. 实时预览效果：在主题选择页面，应该提供实时预览主题效果的功能，让用户在选择前能够直观地了解到主题切换后的界面效果。
可以通过设置界面的预览模块或者是实时应用预览的方式来让用户感知不同主题的差异。
3. 保存用户选择：用户在选择主题后，应用需要保存用户的选择并在下次启动时恢复。
这样，用户在应用退出再次进入时，能够看到之前选择的主题仍然生效，提升用户体验。
总结动态主题和皮肤切换是一种让用户个性化定制应用界面的有趣功能。
通过合理的技术实现和用户体验设计，可以让用户在使用应用时享受到更加舒适和符合个人喜好的界面体验。
同时，开发者也可以根据用户的反馈和需求不断优化和丰富主题和皮肤的选择，为用户提供更好的体验。
教你如何更换Extjs皮肤35
要保存到 cookle 需要添加下面代码：
var cookieArr = window.document.cookie.split(";"); var css = null; for(var i=0;i<cookieArr.length;i++) { var arr = cookieArr[i].split("="); if(arr[0]=="css") { css = arr[1]; } }; alert(css); window.document.getElementsByTagName("link")[1].href="ext-
3.2.0/resources/css/"+css;
document.cookie="css="+css+";expires="+date.toGMTString(); }
});
对全部高中资料试卷电气设备，在安装过程中以及安装结束后进行高中资料试卷调整试验；通电检查所有设备高中资料电试力卷保相护互装作置用调与试相技互术关，系电，力根保通据护过生高管产中线工资敷艺料设高试技中卷术资配0料不置试仅技卷可术要以是求解指，决机对吊组电顶在气层进设配行备置继进不电行规保空范护载高高与中中带资资负料料荷试试下卷卷高问总中题体资，配料而置试且时卷可，调保需控障要试各在验类最；管大对路限设习度备题内进到来行位确调。保整在机使管组其路高在敷中正设资常过料工程试况中卷下，安与要全过加，度强并工看且作护尽下关可都于能可管地以路缩正高小常中故工资障作料高；试中对卷资于连料继接试电管卷保口破护处坏进理范行高围整中，核资或对料者定试对值卷某，弯些审扁异核度常与固高校定中对盒资图位料纸置试，.卷保编工护写况层复进防杂行腐设自跨备动接与处地装理线置，弯高尤曲中其半资要径料避标试免高卷错等调误，试高要方中求案资技，料术编试交写5、卷底重电保。要气护管设设装线备备置敷4高、调动设中电试作技资气高，术料课中并中3试、件资且包卷管中料拒含试路调试绝线验敷试卷动槽方设技作、案技术，管以术来架及避等系免多统不项启必方动要式方高，案中为；资解对料决整试高套卷中启突语动然文过停电程机气中。课高因件中此中资，管料电壁试力薄卷高、电中接气资口设料不备试严进卷等行保问调护题试装，工置合作调理并试利且技用进术管行，线过要敷关求设运电技行力术高保。中护线资装缆料置敷试做设卷到原技准则术确：指灵在导活分。。线对对盒于于处调差，试动当过保不程护同中装电高置压中高回资中路料资交试料叉卷试时技卷，术调应问试采题技用，术金作是属为指隔调发板试电进人机行员一隔，变开需压处要器理在组；事在同前发一掌生线握内槽图部内纸故，资障强料时电、，回设需路备要须制进同造行时厂外切家部断出电习具源题高高电中中源资资，料料线试试缆卷卷敷试切设验除完报从毕告而，与采要相用进关高行技中检术资查资料和料试检，卷测并主处且要理了保。解护现装场置设。备高中资料试卷布置情况与有关高中资料试卷电气系统接线等情况，然后根据规范与规程规定，制定设备调试高中资料试卷方案。
ExtJS之实现华丽的皮肤主题更换
extjs 的默认皮肤很好看,但是我们还可以变换样式切换其他皮肤.1.直接添加其他css 文件换肤.好多皮肤上网就可以收到的如皮肤文件:xtheme-olive.zip 下载把皮肤文件解压，把css文件（如xtheme-olive.css）拷贝到extjs 的resources目录下css文件夹里面：2.解压皮肤文件, 把里面的相应的image 文件夹下的目录（比女口olive）拷贝至U extjs 的resources目录下images 文件夹下记住一定要把css文件拷至U extjs的resources目录下css 文件夹里面：不要拷到其他目录，这样会失真的如果你用的是下拉列表方式显示的话可以参考下我写的代码thme.jsJava 代码<span style="font-size： medium;">Ext.ux.ThemeChange = Ext.extend（boBox,{ editable ： false, displayField ： 'theme', valueField ：'css', typeAhead ： true, mode ： 'local', triggerAction ：'all', selectOnFocus ： true, initComponent ： function（）[' 巧克力色 ', 'xtheme-chocolate.css'],[' 深灰色 ', 'xtheme-darkgray.css'],function() { this.on('collapse',function()//Ext.Msg.alert("aa","bb");Ext.util.CSS.swapStyleSheet('theme', 'extjs3.1/resources/css/'+ this.getValue()); }); } }); Ext.reg('themeChange',Ext.ux.ThemeChange); </span>3. 将这个文件引入到需要的页面中去，可以自由切换皮肤 了，太爽了 'xtheme-black.css'], [' 浅灰色 ', 'xtheme-gray.css'], [' 绿色 ', 'xtheme-green.css'],[' 橄榄色 ', 'xtheme-olive.css'], [' 椒盐色 ', 'xtheme-peppermint.css'], ['粉色', 'xtheme-pink.css'],[' 紫色 ', 'xtheme-purple.css'], [' 暗蓝色 ', 'xtheme-slate.css'], [' 靛青色 ', 'xtheme-indigo.css'], ['深夜 ', 'xtheme-midnight.css'],[' 银白色 ', 'xtheme-silverCherry.css']]; this.store = new Ext.data.SimpleStore( { fields : ['theme', 'css'], data :themes }); this.value = '默认 '; }, initEvents :。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
JSF动态改变皮肤关键字: skin给RichFaces设置一个皮肤很简单，只要在web.xml文件中写以下这一段就可以了：Xml代码<context-param><param-name>org.richfaces.SKIN</param-name><param-value>ruby</param-value></context-param><context-param><param-name>org.richfaces.SKIN</param-name><param-value>ruby</param-value></context-param>但是，有时候你也许会要在程序运行的时候去动态改变RichFaces的皮肤。
甚至你可能会想让每个用户保存自己喜欢的皮肤。
那该怎么做呢？首先，我们需要将硬编码到web.xml中的皮肤设置改变为一个EL表达式：Xml代码<context-param><param-name>org.richfaces.SKIN</param-name><param-value>#{skinBean.skin}</param-value></context-param><context-param><param-name>org.richfaces.SKIN</param-name><param-value>#{skinBean.skin}</param-value></context-param>skinBean是一个JSF managed Bean，类似这样：Java代码public class SkinBean {private String skin;public String getSkin() {return skin;}public void setSkin(String skin) {this.skin = skin;}}public class SkinBean {private String skin;public String getSkin() {return skin;}public void setSkin(String skin) {this.skin = skin;}}当然，你需要在JSF的配置文件里面注册一下这个Bean：Xml代码<managed-bean><managed-bean-name>skinBean</managed-bean-name><managed-bean-class>demo.SkinBean</managed-bean-class> <managed-bean-scope>session</managed-bean-scope><managed-property><property-name>skin</property-name><value>ruby</value></managed-property></managed-bean><managed-bean><managed-bean-name>skinBean</managed-bean-name><managed-bean-class>demo.SkinBean</managed-bean-class> <managed-bean-scope>session</managed-bean-scope><managed-property><property-name>skin</property-name><value>ruby</value></managed-property></managed-bean>我们会想要设置一个默认的皮肤，同时我们需要将这个Bean的声明周期为Session。
之所以不放到request中，是因为如果放到request中，那么每次请求到达的时候，都会去刷新并将皮肤恢复成默认的，而我们希望看到的效果是，用户每次登录的整个过程，皮肤是一直不变的（除非用户主动去改变它）。
通过下面的页面，我们立刻就能看到效果了。
Xml代码<h:form><rich:panel header="I can change skins" style="width: 300px"><h:panelGrid columns="2"><h:selectOneListbox id="select" value="#{skinBean.skin}" onchange="submit()"><f:selectItem itemLabel="plain" itemValue="plain" /><f:selectItem itemLabel="emeraldTown" itemValue="emeraldTown" /><f:selectItem itemLabel="blueSky" itemValue="blueSky" /><f:selectItem itemLabel="wine" itemValue="wine" /><f:selectItem itemLabel="japanCherry" itemValue="japanCherry" /><f:selectItem itemLabel="ruby" itemValue="ruby" /><f:selectItem itemLabel="classic" itemValue="classic" /><f:selectItem itemLabel="laguna" itemValue="laguna" /><f:selectItem itemLabel="deepMarine" itemValue="deepMarine" /></h:selectOneListbox><rich:tabPanel><rich:tab label="Tab 1">Tabs also change color</rich:tab> <rich:tab label="Tab 2">...</rich:tab></rich:tabPanel></h:panelGrid></rich:panel></h:form><h:form><rich:panel header="I can change skins" style="width: 300px"><h:panelGrid columns="2"><h:selectOneListbox id="select" value="#{skinBean.skin}"onchange="submit()"><f:selectItem itemLabel="plain" itemValue="plain" /><f:selectItem itemLabel="emeraldTown" itemValue="emeraldTown" /><f:selectItem itemLabel="blueSky" itemValue="blueSky" /><f:selectItem itemLabel="wine" itemValue="wine" /><f:selectItem itemLabel="japanCherry" itemValue="japanCherry" /><f:selectItem itemLabel="ruby" itemValue="ruby" /><f:selectItem itemLabel="classic" itemValue="classic" /><f:selectItem itemLabel="laguna" itemValue="laguna" /><f:selectItem itemLabel="deepMarine" itemValue="deepMarine" /></h:selectOneListbox><rich:tabPanel><rich:tab label="Tab 1">Tabs also change color</rich:tab><rich:tab label="Tab 2">...</rich:tab></rich:tabPanel></h:panelGrid></rich:panel></h:form>这里放一个tab组件，其实是为了让你看到外观上的改变效果的，没有功能上的实际作用。