无敌博皮 之 乾坤大变色——下篇:脚本讲解

如果你在看[上篇:使用方法]的时候没有下载脚本文件,请现在下载,在这里不再贴出大段的代码,请对照文件来看这篇文章,给您带来的不便敬请谅解。文件下载地址:http://files.cnblogs.com/dingxue/css1_script.js

脚本第一行的styleList定义了这里用到的七种样式的全部信息,三个信息依次表示:风格代码、风格颜色、文件地址。风格代码用于区别各个不同的风格,在下面会用这个来启用和禁用对应的CSS文件;风格颜色为显示在页面上切换区的那个小色块儿的颜色,这里都是取得每种风格的背景色作为风格颜色;文件地址是此风格对应的CSS文件的地址,如果选择了另存CSS文件到其他地方,只需要修改这里就可以了。

之后是“引入样式文件到 <head> 中”,因为XHTML标准要求 <link> 标签只能出现在 <head> 区域里,所以没有采取 document.write() 的方式来引入CSS文件,而采用了类似 Omar AL Zabir 提出的 ensure 的方式。这里设置了 <link> 的 title 属性和 disabled 属性:title在切换时用于判断应该启用哪一个样式,来自于上面定义中的“风格代码”;disabled 属性把所有CSS文件在初始时设置为禁用状态,在下面页面加载完之后有一次重置,这里只是为了防止页面加载过慢时这些CSS文件对页面展现的一些影响。在引入JS文件的情况下也需要设置自定义样式也是因为这里,这里加载的CSS全是禁用,所以博客园系统本身的自定义样式是必须的。

“添加初始化过程到 window.onload”,这一部分用于使页面加载完自动执行一些操作,这是一段来自“百度”的代码,避免了和博客园系统中自带的 window.onload 有冲突,这几行代码有点意思。

接下来是“初始化”部分,主要是创建切换区域和里面那几个小色块儿并放到适当的位置。试了几次直接在 switcher.innerHTML 上做字符串操作,都没有成功,只好引入一个字符串变量,不晓得是哪里搞错了什么,还是浏览器就这么诡异。这个切换区的插入位置,就是现在页面上这个样子,在 sideBarMain 之上,也就是在侧边栏的最上面,如果想修改一下样子,或者换个位置,可以修改这里,并修改对应的CSS文件即可。在这段代码最后,是一个用正则获取已保存到 cookie 中的风格,如果用户曾经选择过风格并且 cookie 还有效,那么会自动切换到他上次的选择,如果没有选择过,这里把 gray 设置为默认的风格,你也可以修改为其他风格,但建议与系统默认的风格一致,这样可以避免第一次加载时的“闪屏”。这里其实是有问题的,在页面加载完成后才做这个操作,“闪屏”无法避免,不知道谁有更好的主意,期待回复,感谢支持。

最后是“样式切换”,先获取到所有 <link>,然后在第一个for循环中启用指定CSS而禁用其他CSS,为了保持统一,这里把默认的样式也声明到了上面的样式列表中,所以这个for循环一上来不把系统自带的样式给禁用了,就是那个 id="MainCss" 的,也是这个for里面用到了上面定义的“风格代码”,上面引入样式文件时的title属性在这里用到了。在设置完文件的启用/禁用状态之后,在第二个for循环里,恢复了所有小色块儿的初始大小(这里是8x8),之后让当前选择的样式色块变大,以突出当前选择。在最后,将用户本次选择保存到了 cookie 中,用于到其他页面或下次访问时的自动加载,cookie 有限期设为30天,应该还算足够大。

结语:

代码写得不美,CSS也不完善,配色更别说,我自己是没什么信心,不过这依然是断断续续花了一天多时间写出来的,还是希望能对大家有所帮助。代码不高深,思路或许有可借鉴之处。同时欢迎大家继续完善这个功能,做出更好的样式出来。

感谢您能够看到这里,文章已经结束,有任何问题,请在下面发表评论,谢谢!

posted @ 2009-01-04 01:17 丁学 阅读(...) 评论(...) 编辑 收藏