ASP.Net 使用css换肤(转)

常常看到有的网站通过DropDownList、菜单或按钮实现对整个网站改变页面风格（换肤）。专门Google了一些这方面的资料，总结了一下实现以上功能大致可以分成两类：
1、整个网站统一使用一个CSS文件，保证一类风格。通过切换不同风格的CSS文件实现换肤。这种方法实现
起来比较简单。
2、不同风格、不同布局的UseControl，使用相同的后台代码（业务逻辑、功能）。通过重定向页面实现
页面换肤。这种方法比较复杂，以后再讨论。

先看第一种方法：切换CSS文件换肤。
1、正常的页面如果需要指定所引用的CSS文件，必须在<head></head>里用<link>控件指定CSS文件，如

<head>

如果需要切换CSS，就不能再定死这个<link>了。可以通过后台代码动态地改变这个控件的属性。
可以用<asp:placeholder>控件来代替。placeholder控件可以理解成一个控件的容器，就像一个透明的包，你往里面装什么，它就是什么。
现在页面变成了这个样子，我们在里面放了一个空的placeholder来代替link.

在后台代码中定义一个函数，负责往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 = "现在设为红色" ;

        }

转载于:https://www.cnblogs.com/hzuIT/articles/911281.html

ASP.Net 使用css换肤(转)相关推荐

换肤的css,换肤功能，css文件中准备三套颜色
1.知识点 1.document.documentElement // 获取html的方法(document.documentElement) // document.documentElement是 ...
[css] 如何实现换肤功能？
[css] 如何实现换肤功能? css 换肤常见方案是通过 less/sass/postcss 等css 预处理器,通过它们自身的变量用法,设置不同变量,生成不同的主题样式,但是这些样式都是会被打包 ...
antd pro使用ajax,antd在线换肤定制功能
最近react项目,用的antd框架,然后看见他的antdPro例子里面有个定制功能很帅,老大说做,那就做吧,鼓捣了一晚终于实现了. css换肤入行前端的时候经常看鱼哥(张鑫旭)的博客,记得看过这 ...
ASP.NET2.0中themes、Skins轻松实现网站换肤！
ASP.NET2.0中themes.Skins轻松实现网站换肤! 可能有些朋友还不是很清楚themes.skins.下面先介绍下themes.skins.. 一.简介: 一看Themes.Skins这 ...
js变量传递给less_如何利用webpack实现一键换肤（CSS变量替换）
最近公司项目中有一个需要更换web端主题的需求,基本实现效果如下: 接收到这个需求的时候有三种思路: 打包的时候同时冗余打包多套CSS文件,并在切换主题的时候加载相应的样式文件. 在根组件上加上主题类 ...
asp.net动态换肤
直接上Demo:asp.net动态换肤.zip 转载于:https://www.cnblogs.com/wifi/articles/2484600.html
使用 css/less 动态更换主题色（换肤功能）
前言说起换肤功能,前端应该是非常熟悉了? 一般来说换肤的需求分为几种: 1. 纯前端,直接在页面前端通过点击自由切换限定的几种主题色,切换之后主题色变量存到本地浏览器 2. 在后台配置好色值,传到前 ...
JS一起学01：css复习、js基础知识、事件、参数、函数、网页换肤、if判断、className问题、浏览器执行顺序
一.html/css 1. 什么是盒子模型? padding+border+width/height 2. float 浮动 (1)浮动的特性脱离文档流行内 ...
在Ajax程序中实现无刷新换肤功能(asp.net2.0)
写了一年多的WEB程序,觉得程序中换肤的功能是非常吸引人眼球的技术.特别是在子父级的WEB平台与论坛上应用广泛,可以突出不同人的风格与个性. 从文章的标题上看是Ajax的无刷新换肤,只是本 ...

ASP.Net 使用css换肤(转)

ASP.Net 使用css换肤(转)相关推荐

最新文章

热门文章