`
zarknight
  • 浏览: 148254 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

mootools【九】- 工具类Hash和Color

阅读更多
     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中的所有值
var hash = new Hash(...{
        one: 
1,
        two: 
2,
        three: 
3
}
);
    
var one 
= hash.get('one');
var hk  
= hash.hasKey('three');
hash.
set('four',4);
hash.each(function(v,k)
...{
        alert(k
+'-'+v);
}
);


创建Hash的快捷方法:
$H
$H({a:1,b:2})


------------------------------------------------------------------------------------------------------------------------------------------------

类:Color
构造方法参数:
color - 代表颜色的代码,可以是十六进制代码,代表RGB或HSB代码的数组
type - 可选,用于明确指定代码的类型,有rgb,hsb,hex。当你要创建hsb代码或hex数组形式代码的时候,需要明确指定。
作用:颜色对象,包含了很多颜色管理方法。
var black = new Color('#000');
var purple = new Color([255,0,255]);



方法:mix
作用: 把两种或更多的颜色和当前颜色混合
参数:
参数个数不定,可以把多个颜色代码混合,当最后一个参数是一个数字的时候,这个数字被用作每次混合时取新颜色的百分量。
var darkpurple = black.mix('#fff', purple, 10);
$('myDiv').setStyle('background-color', darkpurple);


方法:invert
作用:取当前颜色的反色
var c = new Color('#FF9900').invert();
$('myDiv').setStyle('background-color',c);


方法:setHue
作用:设置颜色的色相
var c = new Color('#FF9900').setHue(10);
$('myDiv').setStyle('background-color',c);


方法:setSaturation
作用:设置色饱和度
var c = new Color('#FF9900').setSaturation(50);
$('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 相反的功能

 

分享到:
评论

相关推荐

    mootools-1.2.2-core-nc.js

    mootools-1.2.2-core-nc

    mootools-release-1.11

    MooTools 是一个轻量级且模块化的JavaScript库,它为Web开发提供了丰富的功能和工具。"mootools-release-1.11"是MooTools的一个特定版本,发布于2010年,旨在提供稳定性和兼容性的更新。这个版本在当时是一个重要的...

    mootools-core-1.4.5

    mootools,Javascript只能提示工具所必须的js文件

    MooTools1.4中文PDF手册+MooTools-Core-1.5.1.js

    MooTools 1.4中文PDF手册与MooTools-Core-1.5.1.js是学习和使用MooTools的核心资源。 1. **MooTools的基本概念** - **类与对象**:MooTools基于原型的面向对象系统使得创建和继承类变得简单。你可以定义类并为它们...

    mootools-core-1.5.1

    Mootools从Prototype.js中汲取了许多有益的设计理念,语法也和其极其类似。但它提供的功能要比Prototype.js多,整体设计也比Prototype.js要相对完善,功能更强大,比如增加了动画特效、拖放操作等等。总之,Mootools...

    mootools-1.2.1-core-nc.js

    开源js框架,非常不错,没什么很多介绍的,如果你是做web开发的,千万不要错过

    mootools-core-1.4.5-full-compat.js

    mootools-core-1.4.5-full-compat.js

    Python库 | django-mootools-behavior-0.1.tar.gz

    `django-mootools-behavior-0.1.tar.gz` 是一个针对Python编程语言和Django框架的扩展库,主要用于增强网页前端的行为交互。这个库将MooTools JavaScript库与Django后端紧密结合,为开发者提供了一种更方便的方式来...

    mootools-12-cheat-sheet

    ### Mootools-12 Cheat Sheet详解 #### 一、Mootools简介 Mootools 是一个简洁且功能强大的 JavaScript 框架,它提供了一系列的工具和方法来简化前端开发工作。Mootools 的设计哲学是“写少做多”,这使得开发者...

    mootools-12-cheat-sheet-pf.pdf

    ### Mootools核心知识点解析:mootools-12-cheat-sheet-pf.pdf概览 Mootools是一款轻量级且功能强大的JavaScript框架,旨在简化Web开发中的常见任务,如DOM操作、事件处理、动画以及AJAX交互。本文将根据提供的文件...

    mootools1.2 core

    MooTools是一个强大的JavaScript库,它的1.2版本核心(Core)是整个框架的基础部分,提供了许多基础功能和工具,使得开发者能够更加高效地编写和组织JavaScript代码。这个压缩包包含两个核心文件:`mootools-1.2.4-...

    MooTools-1.2-Beginner

    1. **广泛的适用性**:无论是简单的网页互动还是复杂的Web应用,MooTools都能提供必要的工具和技术支持。 2. **丰富的资源**:由于MooTools拥有庞大的用户群和支持者,因此在网络上可以找到大量教程、文档和示例...

    前端项目-mootools-more.zip

    **前端项目-mootools-more.zip** 是一个...同时,利用其强大的类系统和工具集,可以编写出高效、可维护的前端代码。在实际项目中,还需要结合HTML、CSS和其他前端技术,共同构建出功能丰富、用户体验良好的Web应用。

    mootools-中文教程

    #### 九、工具类Hash和Color Mootools 提供了 Hash 和 Color 类,用于存储键值对和处理颜色值,增强了数据处理能力。 #### 十、window的扩展 Mootools 扩展了 window 对象,提供了一些全局可用的方法和属性,方便...

    Ajax-mootools-doc教程--手册.rar

    MooTools是一个轻量级且功能强大的JavaScript库,它提供了一系列工具和方法,使得开发人员可以方便地使用Ajax技术。 **MooTools核心特性** 1. **模块化设计**:MooTools遵循CommonJS规范,采用模块化设计,允许...

    mootools 1.5.1 最新版下载.rar

    mootools插件 1.5.1 最新版下载,目前,mootools插件的最新版本是1.5.1,这个插件实现的功能不亚于jquery,是一款同样优秀的js插件,为了大家方便,在此与大家... mootools JS文件在mootools-core-1.5.1\dist目录下。

    基于mootools的菜单Mootree

    MooTools是一个轻量级且功能丰富的JavaScript框架,它提供了一系列用于创建交互式网页的工具。Mootree则是这个框架下专门用于构建树状结构的菜单系统,允许用户在网页上动态地添加、删除和操作菜单项,为网站或应用...

    mootools.js插件 1.4.5 core下载.zip

    mootools.js可以生成较为复杂的、动态的网页交互效果,和jquery一样强大。。Mootools从Prototype.js中汲取了许多有益的设计理念,语法也和其极其类似。但它提供的功能要比Prototype.js多,整体设计 也比Prototype.js...

    mootools源代码说明

    总之,Mootools 是一个非常优秀的Javascript框架,更多精髓部分等待你去发掘,希望你也能通过学习和使用而喜欢上Mootools,甚至喜欢上 Javascript :) 用editplus打开看mootool源码说明。对想深入研究mootool代码者...

    mootools 1.3 core 核心js库

    总的来说,MooTools 1.3 Core是一个强大而全面的JavaScript库,它为开发者提供了丰富的工具和API,简化了前端开发过程,提高了代码质量和性能。无论是在创建动态网站、开发富互联网应用还是进行复杂DOM操作,...

Global site tag (gtag.js) - Google Analytics