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>
<a class="btn" data-skin="12">12</a>
$('#skinExample').skin({skin: 'random'});
用来指定着色颜色,允许以下值:
'random'
或 ''
(默认),每次使用随机的颜色;'random'
作为前缀的字符串,例如 'random1'
,使用随机的颜色,但具备相同名称的实例会使用上次生成的随机颜色,而不是创建一个新的;123
,从色环上选择一个确定的颜色,任意一个正整数都会对应一个全局的唯一的颜色;#340982
;$.Skin.set()
设置过的颜色名称,例如 'mySkinName'
。是否确保将最终颜色为亮色,如果指定或计算后的的颜色为暗色则保留色调但转换为亮色。允许值:true
, false
, undefined
(默认)。
该选项可以直接在元素上添加 .pale
来启用。
是否确保将最终颜色为暗色,如果指定或计算后的的颜色为亮色则保留色调但转换为暗色。允许值:true
, false
, undefined
(默认)。
该选项可以直接在元素上添加 .dark
来启用。
是否为最终外观应用轮廓样式。允许值:true
, false
(默认)。
该选项可以直接在元素上添加 .outline
来启用。
是否为文本着色。允许值:true
, false
(默认)。
该选项可以直接在元素上添加 .text-tint
来启用。
当使用整数从色环上取色时,相邻整数在色环上的距离,一般为一个质数,以便于遍历整个色环。默认值为 47
。
当使用整数从色环上取色时,最终颜色使用的饱和度,默认值为 0.7
,取值范围为 0 ~ 1
。
当使用整数从色环上取色时,最终颜色使用的亮度,默认值为 0.6
,取值范围为 0 ~ 1
。
当根据颜色亮度判断是否为亮色还是暗色的阈值,默认值为 0.5
,取值范围为 0 ~ 1
。
当需要将一个亮色转换为暗色时所使用的亮度值,默认值为 0.4
,取值范围为 0 ~ 1
。
当需要将一个暗色转换为亮色时所使用的亮度值,默认值为 0.92
,取值范围为 0 ~ 1
。
设定一个全局命名的颜色。
参数:
name
,颜色名称;skin
,颜色值,该值可以整数 或者 16 进制颜色字符串;skins
,JS 对象,其键值分别对应颜色名称和颜色值,用于同时设置多个全局命名颜色。// 定义全局命名颜色
$.Skin.set('mySkinColor', '#859342');
<a class="label" data-skin="mySkinColor">使用 mySkinColor</a>
获取已设定的全局命名颜色。
// 获取所有设定的全局命名颜色
var allSkins = $.Skin.all;
// 获取指定名称的全局命名颜色
var mySkinColor = $.Skin.all['mySkin']
// 删除指定名称的全局命名颜色
$.Skin.all['mySkin'] = null;