15.htmlayout 实现skin换肤功能!

target="_blank" rel="nofollow noopener noreferrer"

在 htmlayout 的 css 中支持自定义 CSS 常量,这给我们做界面设计带来了更多可能。

了解过 less 的童鞋,应该对 CSS 常量定义非常熟悉。

需求分析:更换皮肤一般是需要改变界面的颜色、图片、样式,

而在 htmlayout 中绝大部分内容都可以使用 css 来控制,非常酷!

 

 

步骤:

首先我们来建立一个 red.css,用来存储红色皮肤需要的样式:

@const BGROUND: RED;   //定义背景色

@const   BORDER1, BORDER2 : 5px solid #FF0000;  //定义两个边框色

@const MY_HATCH_BACKGROUND  : repeat url(sb-scroll-base.png);  //定义滚动条图片

@const WIDTH_EXPR: calc( 50% + 40px);  //定义宽度数值

@const INITIAL_TEXT: "RED SKIN";       //定义文本内容

 

同样的方法在定义 blue.css 用来存储蓝色皮肤需要的样式:

@const BGROUND: BLUE;   //定义背景色

@const   BORDER1, BORDER2 : 5px solid #FFFF00;  //定义两个边框色

@const MY_HATCH_BACKGROUND  : repeat url(sb-scroll-base2.png);  //定义滚动条图片

@const WIDTH_EXPR: calc( 50% + 40px);  //定义宽度数值

@const INITIAL_TEXT: "BLUE SKIN";       //定义文本内容

 

 

然后在建立个 master.css 用来存储真个界面框架的样式:

这里存放一些不需要改动的样式,同时引用常量值来加载 skin 样式。

 

body{background:@BGROUND;}

div{border:@BORDER1;}

.....

 

 

最后通过 HTML 来引入 master.css 和默认皮肤样式 red.css

 




R 大软件管理器




......


 

 

辣么 OK,现在我们只需要将 red.css 替换成 blue.css 就可以实现换肤的要求了!

 

实现代码:

注意:本段内容须成功“回复本文”后“刷新本页”方可查看!

是不是很 so easy?

 

 

 

 

 

编程语言

14.htmlayout CSS reset 一统界面样式

2016-12-13 12:39:26

编程语言

16.htmlayout & Aardio 按钮事件实现方法总结(2)

2016-12-13 16:39:32

17 条回复 A文章作者 M管理员
  1. 我来学习一下

  2. 来学习的,感谢分享!

有新私信 私信列表
搜索