文档中心

BingoTouch提供一种简易换肤的方式。

前言

目前实现换肤的功能无非就两种做法。

1.写几个皮肤文件,然后切换使用这几个文件达到换肤的目的。

不得不说这是最常见的方式,效果也比较明显,但是它有几个缺点。
缺点:

  1. 如果更改一个皮肤的内容,那其他的皮肤文件也要做相应修改(这挺麻烦,不过可以用less管理css解决,所以也不是什么大问题)。
  2. 它是固定的,在使用的时候皮肤文件已经是写好的了,而当我需要动态设置一些属性的时候就无可奈何了。

2.使用less这种工具,在页面加载时才动态生成皮肤样式。

但这种方式的缺点却很明显。
缺点:

  1. 效率低,为了一个换肤的功能,却要引一个less工具(压缩后大概126KB),在终端Web是无法忍受的。
  2. 速度慢,因为有一个皮肤文件编译(姑且把它叫做编译)生成的过程,在终端也难以接受(有可能还出现页面皮肤闪),如果更换皮肤又要重新编译。

3.总结

鉴于上面两种方法的缺点,一种无法动态,另一种效率低。所以BingoTouch并不用这两种方式做换肤。

简易换肤

BingoTouch简易换肤的思路,就是获取需要动态设置的属性,然后设置到需要换肤的DOM元素就可以了(就是这个简单想法)。
可能需要换肤的元素:

  1. 导航栏
  2. 底部栏
  3. 默认图标(字体图标)

内置可设置的属性:

  1. 背景色
  2. 字体颜色
  3. 字体图标颜色
  4. 边框颜色

PS:这样可以配合Link,保持界面风格一致。
示例:

var color = "#27AE60";
//皮肤设置
ui.Skin.init({
    bgColor : color,
    iconFontColor : color, 
    iconFontColorSelector :[".thumbnail [class^='icon-']",".list-view .icon"]
});

可设置的参数:

  • color : 字体颜色 | 默认值 #FFFFFF
  • colorSelector : 字体颜色CSS选择器
  • bgColor : 背景颜色 | 默认值 #278cca
  • bgColorActive : active 背景颜色 | 默认值 是背景色加深20%
  • bgColorSelector : 背景颜色CSS选择器
  • borderColor : 边框颜色 | 默认值 是背景色加深30%
  • borderColorSelector : 边框颜色CSS选择器
  • iconFontColor : 字体图标颜色 | 默认值 #333333
  • iconFontColorSelector : 字体图标颜色CSS选择器

PS:header和footer默认添加到bgColorSelector
演示示例请查看:modules/ui-icon/skin_section.html