换肤原理,准备N套皮肤CSS,放在webroot/css/red/test.css, webroot/css/blue/test.css……
程序员只需要通过Cookie来控制red, blue这里的目录,将这里目录变成变量即可,单页面通过DOM操作Link即可实现,框架页面同样,通过递归即可实现全站换肤,以下为JS代码
方法准备好了以后,需要在共享页面(taglibs.jsp)加入以下代码:
下拉框的调用:
程序员只需要通过Cookie来控制red, blue这里的目录,将这里目录变成变量即可,单页面通过DOM操作Link即可实现,框架页面同样,通过递归即可实现全站换肤,以下为JS代码
- /*
- 保存Cookie
- c_name--key
- value---value
- 默认时长为一年
- */
- function setCookie(c_name, value, expiredays) {
- var exdate = new Date();
- exdate.setDate(exdate.getDate() + expiredays);
- document.cookie = c_name + "=" + escape(value) + ((expiredays == null) ? "" : "; expires=" + exdate.toGMTString());
- }
- /*
- 获取Cookie,根据c_name--key值来获取
- */
- function getCookie(c_name) {
- if (document.cookie.length > 0) {
- var c_start = document.cookie.indexOf(c_name + "=");
- if (c_start != -1) {
- c_start = c_start + c_name.length + 1;
- var c_end = document.cookie.indexOf(";", c_start);
- if (c_end == -1) {
- c_end = document.cookie.length;
- }
- return unescape(document.cookie.substring(c_start, c_end));
- }
- }
- return "";
- }
- /*
- 递归换肤
- */
- function changeSkin(winObj, cssPath) {
- var frames = winObj.frames;
- for (var i = 0; i < frames.length; i++) {
- //证明是该页面是框架页面
- //alert(frames[i].name + ":" + frames[i].frames.length);
- if (frames[i].frames.length > 0) {
- //判断页面中是否存在iframe
- var iframes = frames[i].document.getElementsByTagName("iframe");
- if(iframes.length > 0){//如果页面含有iframe,那么此页面也需要换肤
- var linkObj = frames[i].document.getElementById("style"); //获取link对象
- if (linkObj != null) {
- linkObj.href = basePath + "/css/" + cssPath + "/test.css";
- }
- }
- //alert("iframes:" + iframes.length);
- changeSkin(frames[i], cssPath);//递归换肤
- } else {
- //非框架页面,换肤
- var linkObj = frames[i].document.getElementById("style"); //获取link对象
- if (linkObj != null) {
- linkObj.href = basePath + "/css/" + cssPath + "/test.css";
- }
- }
- }
- }
- /*
- 下拉框调用此方法
- */
- function changeCss(winObj, cssPath) {
- setCookie("cssPath", cssPath, 365); //设置cookie
- changeSkin(winObj, cssPath); //换肤
- }
方法准备好了以后,需要在共享页面(taglibs.jsp)加入以下代码:
- <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
- <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
- <%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
- <%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
- <%@ taglib uri="/struts-tags" prefix="s"%>
- <%@ taglib prefix="page" uri="page-tag"%>
- <%@ page isELIgnored="false"%>
- <c:set var="basePath" value="${pageContext.request.contextPath}" />
- <script type="text/javascript" src="${basePath}/script/skin.js"></script>
- <script type="text/javascript">
- var basePath = '${basePath}'; //基路径
- var cssPath = getCookie("cssPath"); //获取默认皮肤路径
- //判断用户Cookie中是否有路径,无采用默认,有采用用户的信息
- if (cssPath != null && cssPath != ""){
- document.write("<link href='${basePath}/css/" + cssPath + "/test.css' id='style' rel='stylesheet' type='text/css' />");
- }else{
- setCookie('cssPath',"blue",365);
- document.write("<link href='${basePath}/css/blue/test.css' id='style' rel='stylesheet' type='text/css' />");
- }
- </script>
下拉框的调用:
- <select onchange="changeCss(window.top,this.value)">
- <option value="blue" selected="selected">
- 默认皮肤
- </option>
- <option value="red">
- 红海
- </option>
- <option value="green">
- 苍绿
- </option>
- </select>