.net换肤

最新推荐文章于 2017-07-18 17:42:32 发布

wwwyan

最新推荐文章于 2017-07-18 17:42:32 发布

阅读量1k

点赞数

分类专栏： div+css 文章标签： .net stylesheet css 浏览器 object string

div+css 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

常常看到有的网站通过DropDownList、菜单或按钮实现对整个网站改变页面风格（换肤）。
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 = " 现在设为红色 " ;

          }

wwwyan

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
.net换肤

常常看到有的网站通过DropDownList、菜单或按钮实现对整个网站改变页面风格（换肤）。 1、整个网站统一使用一个CSS文件，保证一类风格。通过切换不同风格的CSS文件实现换肤。这种方法实现起来比较简单。2、不同风格、不同布局的UseControl，使用相同的后台代码（业务逻辑、功能）。通过重定向页面实现页面换肤。这种方法比较复杂，以后再讨论。
复制链接

扫一扫

专栏目录