[工作问题总结]日志系统更换主题总结

最新推荐文章于 2024-04-29 14:23:48 发布

mavis

最新推荐文章于 2024-04-29 14:23:48 发布

阅读量451

点赞数

分类专栏： JS 文章标签：换肤样式

本文链接：https://blog.csdn.net/shadow815/article/details/8573506

版权

JS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

------------------------------ASP.Net+Android+IO开发 .Net培训期待与您交流！------------------------------

来Grandsys快三年了,作为程序员还算新手.这几天GrandsysDaily[2.0]新增了换肤功能,前后更换了三种方法和思路,在此想总结下,
面对高手和前辈不敢说分享自己的心得,只是希望如果今后谁再写换肤,可以少走一些弯路...

在搜Google之前,我想的是切换css样式表,还要记录Cookie.网上一搜代码一大堆,十之八九如下(这也是写的第一种方法):
1.前台引用几种css,点击换肤按钮时调用js并记录Cookie
重点代码如下:
前台页面-->
head中
<script src="js/styleswitch.js" type="text/javascript"></script>
<link title="css1" href="CSS/styles/style_1.css" rel="stylesheet" type="text/css" />
<link title="css2" href="CSS/styles/style_2.css" rel="stylesheet" type="text/css" />
<link title="css3" href="CSS/styles/style_3.css" rel="stylesheet" type="text/css" />
body中
<div class="bs">
<a class="styleswitch a1" style="cursor: pointer" title="黄" rel="css1"></a>
<a class="styleswitch a2" style="cursor: pointer" title="绿" rel="css2"></a>
<a class="styleswitch a3" style="cursor: pointer" title="蓝" rel="css3"></a>
</div>
js中大致为
$(document).ready(function () {
    $('.styleswitch').click(function () {
        switchStylestyle(this.getAttribute("rel"), true);
    });
});
function switchStylestyle(styleName,isButton) {
    $("link[rel*=style][title]").each(function (i) {
        this.disabled = true;
            if (this.getAttribute('title') == styleName) this.disabled = false;
    });
}
...(读取和创建Cookie网上代码好找)
在这个方法里遇到的第一个问题是,系统是通过<frameset>标签布局的,换肤按钮在top中,在点击时,
left,center以及foot都要更新,所以在switchStylestyle方法里抓取reload就ok.
这个方法没有通过测试的原因有两点,当然最重要的一点是我们的测试太挑剔和严格了,其实也是问题所在,
由于先引用了css再切换的所以会有一个由style_3(最终被引用的)到目前样式的过度,会看到先是由蓝变绿的...

2.那前台就不引用,直接js引入要切换到主题就是了
重点代码如下:
var fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet")
fileref.setAttribute("type", "text/css")
fileref.setAttribute("href", filename)
这个方法写的时候还是蛮顺利的,测试结果两个bug:
第一个是,当后台从前台打alert的时候,会出现图片还没显示全就有弹出框的情况,这个bug,
暂时仅是setTimeout了,也觉得这样处理不是很好...不知道大家有没有其他的方法...
第二个是,页面是由无样式到有样式的过程,所以会有很短暂的无样式停顿,当然了,作为程序员我是觉得真的很短暂了,
测试觉得停顿久了些,又不能借口说'机子反应的问题吧...'

3.改吧...但此时真的已无方法了,这个时候,就能体现身边前辈的作用了,我是真觉得有经验的程序员最大的优点是,
原本真觉的无路可走的时候,他会告诉你,不是没路可走,只是你压根就没看到前面还有路.
前辈给的思路是,后台加载时给样式...
好吧...继续...虽然有点抓狂了...
遇到的第一个问题是,当<head>中用了后台打过来的变量<%= %>,此时runat="server"就纠结了,我在网上只找到了原因分析,
道理一堆一堆的,其实没看懂多少,最难以忍受的是解析了过后,却没有解决方案...
那就后台生成link吧...重点代码如下...
var themeLink = new System.Web.UI.HtmlControls.HtmlGenericControl("link");
themeLink.Attributes["type"] = "text/css";
themeLink.Attributes["rel"] = "Stylesheet";
themeLink.Attributes["href"] = "CSS/styles/" + ThemeName + ".css";
Header.Controls.Add(themeLink);
我先是在login页面尝试了这个方法,ok,然后就把它放在了BasePage的OnPreRender这个里面,但就是报错,
检查了半天,真开始怀疑是不是自己的人格问题了...
之后才查到Header.Controls.Add(themeLink);这句话对<head>如果有<%= %>就报错
这个问题是前辈解决的...之后丢到了Session里
前台这样写
<link type="text/css" rel="stylesheet" href="<%= Session ["Theme"] %>" />
BasePage里这样写
var href = "CSS/styles/" + (cookie.Value ?? "theme_1") + ".css";
Session["Theme"] = href;

目前暂时测试还没丢bug回来...

------------------------------ASP.Net+Android+IO开发 .Net培训期待与您交流！------------------------------