我们需要实现的功能,是在asp.net+easyui框架下的网页页面各种颜色主题(皮肤)的切换。
第一步,在页面上创建标签,通过onclick事件,调用javascript代码。
<div class="default1" οnclick="javascrpit:changeTheme('default')">default</div>
<div class="default1" οnclick="javascript:changeTheme('gray')">gray</div>
<div class="default1" οnclick="javascript:changeTheme('ui-sunny')">ui-sunny</div>
<div class="default1" οnclick="javascript:changeTheme('ui-dark-hive')">ui-dark-hive</div>
<div class="default1" οnclick="javascript:changeTheme('ui-pepper-grinder')">ui-pepper-grinder</div>
<div class="default1" οnclick="javascript:changeTheme('ui-cupertino')">ui-cupertino</div>
第二步,javascript代码:
changeTheme = function (type) {
var $easyuiTheme = $('#easyuiTheme');
var url = $easyuiTheme.attr('href');
var href = url.substring(0, url.indexOf("themes")) +"themes/"+ type + '/easyui.css';
$easyuiTheme.attr('href', href);
$.cookie('easyuiThemeName', type, {
expires: 7
});
};
在函数changeTheme中,前两一行代码获取到id为easyuiTheme的标签的href的值。
<link id="easyuiTheme" href="~/Content/Default_Index/themes/@ViewData["easyuiThemeName"]/easyui.css" rel="stylesheet" />
这是我们前台的标签,可以看到,这个标签就是我们引入的easyui样式标签,路径是通过ViewData从后台获取的数据。
所以我们后台的代码是这样的:
public ActionResult Index()
{
//访问cookie中easyui的样式
string easyuiThemeName = "default";
HttpCookie cookie = Request.Cookies["easyuiThemeName"];
if (cookie != null)
{
easyuiThemeName = cookie.Value;
}
ViewData["easyuiThemeName"] = easyuiThemeName;
return View();
}
可以看到,这里的ViewData,在程序第一次运行的时候是调用的 default ,而之后都是从 cookie 中取到的名为 "easyuiThemeName"的键所对应的值。
我们再回头看上面的javascript代码,第三四行重新定义了标签href的值,并且在第五行,将值保存在了cookie中。这样我们在再次打开页面的时候,就可以直接从cookie中获取上次已经被保存下来的主题了。
这里需要导入进项目中的文件有easyui的几个样式,还需要jquery(easyui带jquery)和jquerycookie包,样式的目录如下图所示:
主题包的下载地址:
http://www.jeasyui.com/extension/themes_jui.php
jquery cookie包的下载地址:
http://plugins.jquery.com/?s=cookies
jquery cookie 引入要紧跟在jquery下面: