`
mmddonkey
  • 浏览: 31593 次
  • 性别: Icon_minigender_1
  • 来自: 黑龙江
文章分类
社区版块
存档分类
最新评论

frameset 换肤,cookie动态加载css

阅读更多

frameSet页面:

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

 

topFrame:

<%@ 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"%>
<script type="text/javascript">

	
	// 设置样式
	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 });
	}
</script>
	</head>

	<body  style="height: 100%; overflow:hidden;">
		<div class="jf_top">
			<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>
			
		</div>
	</body>
</html>

 


需要换肤的页面引入:

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



默认为jf_blue.css.
操作cookie引用了jquery.cookie.js。

 

分享到:
评论

相关推荐

    以div代替frameset,用css实现仿框架布局

    总的来说,通过熟练运用`div`和CSS,我们可以创建出与`frameset`类似甚至更灵活的布局,同时避免了`frameset`带来的问题。这要求开发者具备良好的CSS理解和实践能力,以便根据具体需求调整和优化布局。在现代Web开发...

    frameset和树形结构的生成

    结合`frameset`和树形结构,如果你的压缩包包含了一个网页示例,它可能演示了如何在框架中显示一个XML文档的树状视图,或者使用JavaScript或Ajax动态加载和更新树结构。这样的实现可以帮助用户更直观地理解和操作XML...

    div+css实现frameset网页布局

    `frameset`布局在早期的网页设计中颇为流行,它允许我们将浏览器窗口分割成多个独立显示区域,每个区域可以加载不同的网页内容。然而,随着Web标准的发展,`div+css`布局因其灵活性和可维护性逐渐成为主流。 `div`...

    frameset

    最后,由于frameset在现代网页设计中已逐渐被淘汰,学习这些知识的同时,也需要了解和掌握更现代的布局技术,如Flexbox和Grid布局,以及如何使用JavaScript和Ajax实现动态内容加载,以适应不断发展的Web标准。

    DIV+CSS实现的框架,仿frameset,支持左侧缩进

    这个名为"DIV+CSS实现的框架,仿frameset,支持左侧缩进"的项目,旨在提供一种与传统`frameset`类似的功能,但利用更现代、更灵活的`CSS`布局方法来实现。`frameset`是HTML4时代的特性,它允许开发者将一个网页分割...

    实现div 遮罩 frameset

    在网页设计中,`div` 和 `frameset` 是...具体实现方式可能涉及CSS的定位、JavaScript的事件监听以及动态计算和调整`div`元素的属性。通过学习这些示例,开发者可以更好地理解和掌握在复杂布局中创建动态弹出层的技术。

    在frameset框架集中应用背景图片

    在探讨如何在frameset框架集中应用背景图片时,我们首先需要理解frameset的基本概念以及CSS在其中的应用方式。本文将详细介绍如何通过frameset布局来实现背景图片的有效展示,并且会结合具体的HTML代码示例进行说明...

    frame边框样式 frameSet样式 frameSet应用

    由于`frame`和`frameset`存在一些缺点,如不利于SEO(搜索引擎优化),不易于访问性,以及对响应式设计的支持不佳,现代网页设计倾向于使用更灵活的布局技术,如CSS Grid和Flexbox,或者是通过JavaScript动态创建和...

    frameset元素属性详解

    然而,随着响应式设计的兴起和现代浏览器对框架支持的限制,`frameset`的使用逐渐减少,取而代之的是更灵活的CSS布局技术。尽管如此,了解`frameset`的工作原理仍然是理解HTML历史和网页布局多样性的重要一环。

    frameset遮罩

    在网页设计领域,"frameset遮罩"是一个重要的概念,...总的来说,frameset遮罩是一种创建交互式或动态效果的技术,但随着Web技术的发展,我们应谨慎使用frameset,并考虑采用现代的、更灵活的解决方案来实现类似功能。

    html页面嵌套使用示例(frameset使用方法)

    - 在现代网页设计中,通常使用CSS布局(如Flexbox或Grid)替代`frameset`,因为它们提供了更灵活的布局控制,并且对SEO友好。 通过以上介绍,我们可以理解`frameset`是如何在HTML中实现页面嵌套的,以及如何通过...

    页面布局frameset

    例如,使用CSS Grid可以创建多列或多行的动态网格布局,而Flexbox则适用于更简单的主-副或头-内容-尾布局。这些方法提供了更好的控制和灵活性,同时提高了可访问性和SEO性能。 总之,`frameset`是一种过时的页面...

    frameSet(完整框架)

    这在"frameSet(完整框架)"的标题中提到,意味着我们将深入探讨如何利用frameset来构建一个完整的、可自定义布局的网页结构,以便与其他Web技术如JavaScript、CSS等进行高效集成。 首先,让我们理解什么是frameset。...

    frameset左右收缩demo

    这可以通过JavaScript或者CSS来实现动态展开和收缩,增强交互性。 4. 工作区:右侧工作区是主要的内容展示区域,它会根据用户的操作加载相应的后台系统界面。可以利用AJAX技术实现实时更新,提高用户体验。 5. ...

    利用frameset做菜单

    `&lt;frameset&gt;`定义了窗口的分割方式,而`&lt;frame&gt;`则指定了每个分割区域加载的网页。例如: ```html &lt;!DOCTYPE html&gt; &lt;title&gt;Frameset 菜单示例 &lt;frameset cols="20%,*"&gt; &lt;/frameset&gt; ``` 在这个例子中,`...

    一个按钮调整FrameSet的实例

    在处理`FrameSet`的边缘时,我们需要确保所有相关的CSS属性,如`margin`, `padding`和`border`都已正确设置为零,或者使用负值来抵消不必要的间距。 其次,"JS只能用于IE"指的是JavaScript代码可能只兼容Internet ...

    Frameset_详解

    现代Web开发更倾向于使用CSS布局技术来实现类似的功能。 #### 六、结论 虽然`Frameset`在现代Web开发中的使用频率不高,但它作为一种历史性的技术,对于理解早期Web设计思路仍然具有一定的参考价值。了解并掌握`...

    好看的frameset实例

    `frameset` 允许我们将浏览器窗口分割成多个独立的部分,每个部分可以加载不同的网页内容,从而实现多页面同时展示的效果。标题 "好看的frameset实例" 提示我们这是一个关于如何美观地运用`frameset`的示例集,描述...

    html的frameset和target的应用

    尽管`frameset`和`target`在早期的网页设计中很常见,但随着Web技术的发展,它们逐渐被更现代的布局方法如CSS Flexbox和Grid取代。使用`frameset`可能会导致搜索引擎优化问题,因为搜索引擎爬虫可能无法正确解析框架...

Global site tag (gtag.js) - Google Analytics