您的位置：首页 > 编程语言 > ASP

Asp.net换肤，动态切换Css文件形式

2010-12-15 20:27 531 查看

ASP.Net 使用css换肤(转)

常常看到有的网站通过DropDownList、菜单或按钮实现对整个网站改变页面风格（换肤）。专门Google了一些这方面的资料，总结了一下实现以上功能大致可以分成两类：

1、整个网站统一使用一个CSS文件，保证一类风格。通过切换不同风格的CSS文件实现换肤。这种方法实现

起来比较简单。

2、不同风格、不同布局的UseControl，使用相同的后台代码（业务逻辑、功能）。通过重定向页面实现

页面换肤。这种方法比较复杂，以后再讨论。

先看第一种方法：切换CSS文件换肤。

1、正常的页面如果需要指定所引用的CSS文件，必须在<head></head>里用<link>控件指定CSS文件，如

<head>

<link rel=stylesheet type=text/css href=mycss.css />

</head>

如果需要切换CSS，就不能再定死这个<link>了。可以通过后台代码动态地改变这个控件的属性。

可以用<asp:placeholder>控件来代替。placeholder控件可以理解成一个控件的容器，就像一个透明的包，你往里面装什么，它就是什么。

现在页面变成了这个样子，我们在里面放了一个空的placeholder来代替link.

<head>

<asp:placeholder id="MyCss" runat="server"/>

</head>

在后台代码中定义一个函数，负责往placeholder里装东西，这里装css文件

public void ChangeSkin(string cssFile)

{

//生成一个新的HtmlGenericControl控件，它是一个link控件

HtmlGenericControl objLink = new HtmlGenericControl("link");

//定义这个Link的各项属性

objLink.ID = ID;

objLink.Attributes["rel"] = "stylesheet";

objLink.Attributes["type"] = "text/css";

objLink.Attributes["href"] = cssFile;

//把Link控件加到PlaceHolder控件中去

MyCss.Controls.Add(objLink);

}

到这里，可以在页面里放2个按钮，按按钮切换不同的CSS文件

2、有的网站能把用户选择的样式保存起来，下次访问继续保留上次选择的风格。

对于此类，可以用客户端的Cookie来保留选择的样式。

private void Page_Load(object sender, System.EventArgs e)

{

// 在此处放置用户代码以初始化页面

if(!Page.IsPostBack)

{

//判断客户端的浏览器是否支持Cookie

if(Request.Browser.Cookies == false)

label1.Text = "浏览器不支持Cookie !";

else

label1.Text = "浏览器支持Cookie !";

//客户端是否有Skin信息保存

if(Request.Cookies["Skin"] == null)

{

ChangeSkin("default.css");

label2.Text = "Cookie 为空，默认CSS";

}

else

{

//根据客户端保留的Cookie信息，来加载不同的CSS样式表文件

switch(Request.Cookies["Skin"].Value)

{

case "Red" : ChangeSkin("mycss2.css");

label2.Text = "Cookie中的CSS为红色";

break;

case "Blue" : ChangeSkin("mycss.css");

label2.Text = "Cookie中的CSS为蓝色";

break;

default: ChangeSkin("default.css");

// break;

}

}

}

当用户按下按钮选择样式的时候，还需要保留这些信息到Cookie中。

public void SetCookie(string style)

{

HttpCookie myCookie = new HttpCookie("Skin");

myCookie.Value = style;

Response.Cookies.Add(myCookie);

}

public void btClick(object src, EventArgs e)

{

SetCookie("Red");

ChangeSkin("mycss2.css");

label2.Text = "现在设为红色" ;

}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航