Jquery FrameSet设置换肤

最新推荐文章于 2021-06-15 21:18:53 发布

最新推荐文章于 2021-06-15 21:18:53 发布 · 172 阅读

文章标签：

#javascript #xhtml #java #ViewUI

经验+注意同时被 3 个专栏收录

39 篇文章

订阅专栏

javaScript

28 篇文章

订阅专栏

jquery

24 篇文章

订阅专栏

本文介绍如何使用jQuery在FrameSet中实现不同皮肤的切换，包括CSS文件的链接、JavaScript代码的编写以及如何在不同框架中应用皮肤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用Jquery给<FrameSet>换肤，

1.在cssBasePage.jsp也link了皮肤css

<link href="<%=path %>/css/${cookie.b2cPlatform.value==null?'jf_blue':
	cookie.b2cPlatform.value}.css" rel="stylesheet" type="text/css"  id="cssfile" />

2.frameTop.jsp页切换皮肤的JS代码

	// 设置样式
	function setCssFile(id){
		//switchSkin(id);
		$("#cssfile").attr("href","css/"+ id +".css"); //设置不同皮肤
		try{
			$(window.parent.frames['main'].document).find("#cssfile")
                                    .attr("href","css/"+ id +".css");//给窗体换肤
			$(window.parent.frames['leftFrame'].document).find("#cssfile")
                                    .attr("href","css/"+ id +".css");//给左树换肤
			$(window.parent.frames['midFrame'].document).find("#cssfile")
                                    .attr("href","css/"+ id +".css");//给主窗体换肤
		}catch(e){ }
		$.cookie( "b2cPlatform" ,  id , { path: '/', expires: 10 });//皮肤名称设置的cookie中
	}
</script>

3.frameTop.jsp页<body>体内容

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>frame top page</title>
		<%@ include file="/cssBasePage.jsp"%>
         </head>
<body>
<div class="skin">
	<a href="javascript:setCssFile('jf_blue');">
	<img width="15" height="16" alt="grass" src="images/ocean.gif" /></a>
	<a href="javascript:setCssFile('jf_red');">
	<img width="15" height="16" alt="grass" src="images/oyster.gif" /></a>
	<a href="javascript:setCssFile('jf_green');">
	<img width="15" height="16" alt="grass" src="images/grass.gif" /></a>
</div>
</body>

4.框架页frameSet

1.<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
2.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">  
3.<html xmlns="http://www.w3.org/1999/xhtml">  
4.    <head>  
5.        <title>跳转页</title>  
6.    </head>  
7.    <frameset cols="*" rows="75,*" style="height: 100%; overflow:hidden;">  
8.        <frame id="head" scrolling="no" marginwidth="0" marginheight="0" src="<%=request.getContextPath() %>/Login_loginTop" name="topFrame" frameborder="0" scrolling="no" noresize="noresize" id="topFrame"/>  
9.        <frameset  cols="185,8,*" id="myFrame" >  
10.            <frame frameborder="0" scrolling="auto" src="<%=request.getContextPath() %>/LeftMenu_leftMenuShow" name="leftFrame" id="leftFrame"/>  
11.            <frame frameborder="0" scrolling="no" noresize="noresize" id="midFrame" name="midFrame" src="<%=request.getContextPath() %>/Login_loginSwitch"/>  
12.            <frame frameborder="0" scrolling="auto" src="<%=request.getContextPath() %>/Login_loginRight" name="main"  id="main"/>  
13.        </frameset>  
14.        <noframes></noframes>  
15.    </frameset>  
16.</html>