mootools(九) - 工具类Hash和Color
时间:2007-08-18 来源:linxh
本文转自: http://blog.csdn.net/zarknight/archive/2007/04/14/1564551.aspx
Hash数据结构,我们通常用来存放键值对。在javascript中,没有规范的Hash的实现,一般,我们都会通过包装对象来模拟实现这样的Hash,来实现规范化的Hash对象操作。
另外,颜色代码的操作在做UI的时候很频繁,尤其是要做十分绚丽的效果的时候,需要对颜色代码做很多的计算,mootools在这个方面做了比较多的工作,通过对String,Array的扩展,以及提供的Color类,我们随时可以对颜色数据进行转换和计算。
类: Hash
方法:
构造方法 - 传入一个包含键值对的object
get - 按键取值
hasKey - 判断是否有指定的键
set - 把键值对存放入Hash
remove - 删除指定键的键值对
each - 用法和Array的each相似,每个键值对的通过each中指定的函数的第一个参数(值)和第二个参数(键)传入。
extend - 把一个包含键值对的对象合并到当前Hash中,相同键的值将被新的值覆盖。
empty - 这个方法的功能在mootools1.0和1.1dev版本中是完全不一样的,1.0中是判断Hash中是否已经没有键值对,而在1.1dev中是清空Hash中的所有键值对,请注意区别。
keys - 获取Hash中的所有键
values - 获取Hash中的所有值
![](/bbs/images/405b18b4b6584ae338e0f6ecaf736533.png)
var hash = new Hash(...{
one: 1,
two: 2,
three: 3
});
var one = hash.get('one');
var hk = hash.hasKey('three');
hash.set('four',4);
![](/bbs/images/405b18b4b6584ae338e0f6ecaf736533.png)
hash.each(function(v,k)...{
alert(k+'-'+v);
});
创建Hash的快捷方法:
$H
另外,颜色代码的操作在做UI的时候很频繁,尤其是要做十分绚丽的效果的时候,需要对颜色代码做很多的计算,mootools在这个方面做了比较多的工作,通过对String,Array的扩展,以及提供的Color类,我们随时可以对颜色数据进行转换和计算。
类: Hash
方法:
构造方法 - 传入一个包含键值对的object
get - 按键取值
hasKey - 判断是否有指定的键
set - 把键值对存放入Hash
remove - 删除指定键的键值对
each - 用法和Array的each相似,每个键值对的通过each中指定的函数的第一个参数(值)和第二个参数(键)传入。
extend - 把一个包含键值对的对象合并到当前Hash中,相同键的值将被新的值覆盖。
empty - 这个方法的功能在mootools1.0和1.1dev版本中是完全不一样的,1.0中是判断Hash中是否已经没有键值对,而在1.1dev中是清空Hash中的所有键值对,请注意区别。
keys - 获取Hash中的所有键
values - 获取Hash中的所有值
![](/bbs/images/405b18b4b6584ae338e0f6ecaf736533.png)
![](/bbs/images/1c53668bcee393edac0d7b3b3daff1ae.png)
![](/bbs/images/33d02437d135341f0800e3d415312ae8.png)
![](/bbs/images/33d02437d135341f0800e3d415312ae8.png)
![](/bbs/images/33d02437d135341f0800e3d415312ae8.png)
![](/bbs/images/05dd8d549cff04457a6366b0a7c9352a.png)
![](/bbs/images/a6339ee3e57d1d52bc7d02b338e15a60.png)
![](/bbs/images/a6339ee3e57d1d52bc7d02b338e15a60.png)
![](/bbs/images/a6339ee3e57d1d52bc7d02b338e15a60.png)
![](/bbs/images/a6339ee3e57d1d52bc7d02b338e15a60.png)
![](/bbs/images/405b18b4b6584ae338e0f6ecaf736533.png)
![](/bbs/images/1c53668bcee393edac0d7b3b3daff1ae.png)
![](/bbs/images/33d02437d135341f0800e3d415312ae8.png)
![](/bbs/images/05dd8d549cff04457a6366b0a7c9352a.png)
创建Hash的快捷方法:
$H
$H({a:1,b:2})
------------------------------------------------------------------------------------------------------------------------------------------------
类:Color
构造方法参数:
color - 代表颜色的代码,可以是十六进制代码,代表RGB或HSB代码的数组
type - 可选,用于明确指定代码的类型,有rgb,hsb,hex。当你要创建hsb代码或hex数组形式代码的时候,需要明确指定。
作用:颜色对象,包含了很多颜色管理方法。
------------------------------------------------------------------------------------------------------------------------------------------------
类:Color
构造方法参数:
color - 代表颜色的代码,可以是十六进制代码,代表RGB或HSB代码的数组
type - 可选,用于明确指定代码的类型,有rgb,hsb,hex。当你要创建hsb代码或hex数组形式代码的时候,需要明确指定。
作用:颜色对象,包含了很多颜色管理方法。
var black = new Color('#000');
var purple = new Color([255,0,255]);
方法:mix
作用: 把两种或更多的颜色和当前颜色混合
参数:
参数个数不定,可以把多个颜色代码混合,当最后一个参数是一个数字的时候,这个数字被用作每次混合时取新颜色的百分量。
var purple = new Color([255,0,255]);
方法:mix
作用: 把两种或更多的颜色和当前颜色混合
参数:
参数个数不定,可以把多个颜色代码混合,当最后一个参数是一个数字的时候,这个数字被用作每次混合时取新颜色的百分量。
var darkpurple = black.mix('#fff', purple, 10);
$('myDiv').setStyle('background-color', darkpurple);
方法:invert
作用:取当前颜色的反色
$('myDiv').setStyle('background-color', darkpurple);
方法:invert
作用:取当前颜色的反色
var c = new Color('#FF9900').invert();
$('myDiv').setStyle('background-color',c);
方法:setHue
作用:设置颜色的色相
$('myDiv').setStyle('background-color',c);
方法:setHue
作用:设置颜色的色相
var c = new Color('#FF9900').setHue(10);
$('myDiv').setStyle('background-color',c);
方法:setSaturation
作用:设置色饱和度
$('myDiv').setStyle('background-color',c);
方法:setSaturation
作用:设置色饱和度
var c = new Color('#FF9900').setSaturation(50);
$('myDiv').setStyle('background-color',c);
方法:setBrightness
作用:设置色彩亮度
$('myDiv').setStyle('background-color',c);
方法:setBrightness
作用:设置色彩亮度
var c = new Color('#FF9900').setBrightness(10);
$('myDiv').setStyle('background-color',c);
创建Color的两个快捷工具方法:
$RGB(r, g, b) - 建立RGB模式的Color
$HSB(h, s, b) - 建立HSB模式的Color
如果加载了Color.js,那么Array还会被扩展两个方法:
rgbToHsb - 当前数组前三个元素将被作为rgb值,转换为hsb值代表的数组
hsbToRgb - 和rgbToHsb 相反的功能
$('myDiv').setStyle('background-color',c);
创建Color的两个快捷工具方法:
$RGB(r, g, b) - 建立RGB模式的Color
$HSB(h, s, b) - 建立HSB模式的Color
如果加载了Color.js,那么Array还会被扩展两个方法:
rgbToHsb - 当前数组前三个元素将被作为rgb值,转换为hsb值代表的数组
hsbToRgb - 和rgbToHsb 相反的功能
相关阅读 更多 +