asp.net程序中如何使用皮肤更换的小功能

写这篇文章,因要往OA系统上添加更换主题的功能,在网上仔细搜索了一下,主要有几种方法可以实现,

第一种:使用原生态javascript+Css来实现,(代码多,看着纠结,对于前台不熟悉的程序员来说看深奥一点的javascript代码无疑是雪上加霜,反正我是这么理解的)

第二种:使用Jquery+Css来实现,(代码较少,看着也纠结,对于前台不熟悉的程序员来说看深奥一点的Jquery代码也无疑是雪上加霜,反正也我是这么理解的)

第三种:当然是使用.net自己的解决办法喽!

前两种方法我也不介绍了,网上一搜一大把。主要介绍下第三种的使用方法,其实很简单。估计看一遍就知道怎么做了,

首先看前台代码:

 <form id="form1" runat="server">
<div>
<div id="header">
<ul>
<li><a href="#">首页</a></li>
<li><a class="skin" href="#">换肤</a>
<div class="Skin_div">
<asp:RadioButton ID="RadioBtnSkin1" GroupName="skin" AutoPostBack="true" Checked="true" runat="server" OnCheckedChanged="RadioBtnSkin1_CheckedChanged" />皮肤一<br />
<asp:RadioButton ID="RadioBtnSkin2" GroupName="skin" AutoPostBack="true" runat="server" OnCheckedChanged="RadioBtnSkin2_CheckedChanged" />皮肤二<br />
<asp:RadioButton ID="RadioBtnSkin3" GroupName="skin" AutoPostBack="true" runat="server" OnCheckedChanged="RadioBtnSkin3_CheckedChanged" />皮肤三
</div>
</li>
</ul>
</div>
<div id="content"></div>
<div id="footer"></div>
</div>
</form>

这里用到了jquery,用来显示与隐藏换肤菜单

 <link href="css/color1.css" id="color" runat="server" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript"> $(document).ready(function()
{
$(".skin").toggle(function()
{
$(this).next().show();
}, function () {
$(this).next().hide();
})
})
</script>
<link href="css/color1.css" id="color" runat="server" rel="stylesheet" type="text/css" />默认是color1.css样式,看这句链接样式表有个ID属性(自己加的),加上runat="server"之后

把他设置成服务器控件,这样的话,在后台就可以获取到它的属性了,可以随便设置了。

接下来就是要准备三个样式表,每个样式表里面都给头部,内容,尾部,设置了不同的颜色,随便你搞几个样式表都可以,

来看后台:
 protected void Page_Load(object sender, EventArgs e)
{
if (Request.Cookies["SkinCss"] != null)
{
this.color.Href = Request.Cookies["SkinCss"].ToString();
}
else
{
//如果有需要可以将skin字段存储于数据库,便于管理员切换页面主题,例如节日主题颜色
//从数据库读取skin的字段表,获取值赋给href,如果为空,使用默认的样式表
//this.color.Href = "数据库的skin值";
}
} protected void RadioBtnSkin1_CheckedChanged(object sender, EventArgs e)
{
this.color.Href = "css/color1.css";
Response.Cookies["SkinCss"].Value = this.color.Href.ToString();
Response.Cookies["SkinCss"].Expires = DateTime.Now.AddDays();
} protected void RadioBtnSkin2_CheckedChanged(object sender, EventArgs e)
{
this.color.Href = "css/color2.css";
Response.Cookies["SkinCss"].Value = this.color.Href.ToString();
Response.Cookies["SkinCss"].Expires = DateTime.Now.AddDays();
}
protected void RadioBtnSkin3_CheckedChanged(object sender, EventArgs e)
{
this.color.Href = "css/color3.css";
Response.Cookies["SkinCss"].Value = this.color.Href.ToString();
Response.Cookies["SkinCss"].Expires = DateTime.Now.AddDays();
}
至此,功能就实现了,样式表里面也可以把背景颜色替换成背景图片,主要还是使用了Cookie来实现,更换的时候把值存进Cookie,在页面加载的时候判断Cookie里面是否有值,如果有就直接拿出来用,

没有的话使用默认值。如果管理员想设置样式表那就要把SkinCss的值存到数据库,在页面加载的时候应用就可以了,其实想用Session,但是Session的ID还是要依靠Cookie来保存,万一用户的客户端

禁用了Cookie,可能会出现问题。所以就用Cookie了。

上一篇:HTML DOM应用案例1


下一篇:几个有用的JSON工具