示例

Skin.js 提供一种快捷方法来为控件添加自定义外观着色选项。

基础 > 外观选项 预定义了常用的着色选项,但有时需要按需定义新的着色选项。

<a class="btn" data-skin="12">12</a>
<a class="btn" data-skin="#345264">#345264</a>
<a class="btn text-tint" data-skin="#80CBC4">#80CBC4</a>
<a class="btn pale" data-skin="#345264">#345264 浅色</a>
<a class="btn" data-skin="random">随机外观</a>
使用方法
[data-skin]
<a class="btn" data-skin="12">12</a>
$().skin()
$('#skinExample').skin({skin: 'random'});
选项
skin

用来指定着色颜色,允许以下值:

pale

是否确保将最终颜色为亮色,如果指定或计算后的的颜色为暗色则保留色调但转换为亮色。允许值:true, false, undefined(默认)。

该选项可以直接在元素上添加 .pale 来启用。

dark

是否确保将最终颜色为暗色,如果指定或计算后的的颜色为亮色则保留色调但转换为暗色。允许值:true, false, undefined(默认)。

该选项可以直接在元素上添加 .dark 来启用。

outline

是否为最终外观应用轮廓样式。允许值:true, false(默认)。

该选项可以直接在元素上添加 .outline 来启用。

tint

是否为文本着色。允许值:true, false(默认)。

该选项可以直接在元素上添加 .text-tint 来启用。

hueSpace

当使用整数从色环上取色时,相邻整数在色环上的距离,一般为一个质数,以便于遍历整个色环。默认值为 47

saturation

当使用整数从色环上取色时,最终颜色使用的饱和度,默认值为 0.7,取值范围为 0 ~ 1

lightness

当使用整数从色环上取色时,最终颜色使用的亮度,默认值为 0.6,取值范围为 0 ~ 1

threshold

当根据颜色亮度判断是否为亮色还是暗色的阈值,默认值为 0.5,取值范围为 0 ~ 1

darkLight

当需要将一个亮色转换为暗色时所使用的亮度值,默认值为 0.4,取值范围为 0 ~ 1

paleLight

当需要将一个暗色转换为亮色时所使用的亮度值,默认值为 0.92,取值范围为 0 ~ 1

设置全局命名颜色
设定或修改命名颜色

设定一个全局命名的颜色。

参数:

// 定义全局命名颜色
$.Skin.set('mySkinColor', '#859342');
<a class="label" data-skin="mySkinColor">使用 mySkinColor</a>
$.Skin.all

获取已设定的全局命名颜色。

// 获取所有设定的全局命名颜色
var allSkins = $.Skin.all;

// 获取指定名称的全局命名颜色
var mySkinColor = $.Skin.all['mySkin']

// 删除指定名称的全局命名颜色
$.Skin.all['mySkin'] = null;