当前博客:一个切换主题的方案

130 次浏览【转载需注明来源】

博客作者:【qiang】

个性签名:请输入个性签名___________

我这里的方案是切换网页主体元素类名,来改变下面元素的样式。

首先还是新建一个网页项目,我这里是演示一个切换主题的方案,我们这里就跳过了,如何不会的可以去学习一下创建项目。

<区块 类名="文本区域">
	<下拉列表 类名="切换主体">
		<列表选项 列表值="白天">白天</列表选项>
		<列表选项 列表值="黑夜">黑夜</列表选项>
		<列表选项 列表值="护眼">护眼</列表选项>
	</下拉列表>
	<标题1>夜晚</标题1>
	<段落>夜晚,指的是太阳低于地平线的期间(傍晚起至凌晨日出为止),地面光线和温度减少的现象。依照各地时区和季节不同,进入夜晚时段的时间也有所差别。 极高纬度地区在特定季节,会发生「永昼」(太阳整日未落入地平线)或「永夜」(太阳整日未探出地平线)的现象。</段落>
	<换行 />
	<换行 />
	<标题1>夜生活</标题1>
	<段落>在人类社会里,以往照明设施并不发达,当时的多数民众遵循「日出而作、日落而息」的规律, 商家常在夜晚时段便正式打烊,民众除非遭遇特殊紧急事件,否则绝不在夜晚任意外出远行, 加著在夜晚时段发生不法事件和危险事件的机率也会增加,所以也会安排特定的夜间巡守警备, 负责维持当地夜间秩序。随著人类历史、科技、文化发展,有部分的地区居民晚间时段仍需要工作维生乃至于熬夜加班, 开始出现许多夜晚时段的特殊活动(特别是娱乐活动), 例如夜市、宵夜、庆祝或交谊性的晚会、夜唱KTV、在特定餐厅、咖啡厅、茶馆、酒馆享用餐饮聚会或约会、光顾夜间娱乐场所(通称「夜总会」)等。 此外,有部分庆典或节日是在夜晚进行相关活动(尤其是满月之夜),特定影视节目则会选在晚间乃至于深夜时段才播出。 夜晚期间盛行的活动则称为「夜生活」。</段落>
</区块>
Markup

这里是html代码的内容,我们先默认一个主题。

网页主体 {
	外边距: 0;
	内边距: 0;
	过渡: 所有 0.5s;
}
.切换主体 {
	定位: 绝对定位;
	顶部: 10px;
	右侧: 0;
}
.文本区域 {
	宽度: 1200px;
	内边距: 15px;
	盒子模型: 边界框;
	外边距: 0 自动;
	定位: 相对定位;
}
.白天 {
	背景: #fff;
	颜色: #333;
}
.黑夜 {
	背景: #000;
	颜色: #fff;
}
.护眼 {
	背景: #e1fbe2;
	颜色: #2e2e2e;
}
CSS

我们这里定义了3个主题样式。

局部变量 当前主题 = "白天";
$(".切换主体").绑定事件("@事件_元素改变", 定义函数 () {
	局部变量 主题 = $(本对象).设置或获取值();
	调试输出(主题);
	$(".主体").删除HTML样式类(当前主题).添加HTML样式类(主题);
	当前主题 = 主题;
});
JavaScript

这里的脚本意思就是,监听切换主题的下拉列表,然后取出选择的下拉列表,更改网页主体的类名,这样就达到了一个切换主题的效果。

下载源码:网页多套主题功能之简单解决方案-快码编程源码下载 (fofstudio.net)

一个切换主题的方案