Mootools framework [9]-tool class hash and color

Source: Internet
Author: User
Tags mootools

Mootools [9]-tool class hash and color

Note: The hash data structure is usually used to store key-value pairs. In JavaScript, there is no standard hash implementation. In general, we will simulate the implementation of such hash through packaging objects to implement standardized hash object operations.

In addition, operations on the color code are frequently performed on the UI, especially when the effects are very brilliant. You need to perform a lot of calculations on the color code, mootools has done a lot of work in this aspect. by extending the string and array types and providing color classes, we can convert and compute color data at any time.

 

1. Class: Hash

Constructor-input an object containing a key-Value Pair

Method:

Get: Key Value

Haskey: determines whether a specified key exists.

Set: store key-value pairs in hash

Remove: deletes a key-value pair of a specified key.

Each: its usage is similar to the each of array. Each key-Value Pair uses the function specified in each.

The first parameter (value) and the second parameter (key) are passed in.

Extend: merges an object containing a key-value pair into the current hash, and the value with the same key will be overwritten by the new value.

Empty: The functions of this method are completely different in mootools1.0 and 1.1dev,

In 1.0, it is used to determine whether there are no key-value pairs in hash, and in 1.1dev, it is used to clear all key-value pairs in hash. Note the difference.

Keys: obtains all keys in the hash.

Values: obtains all values in the hash.

Example:

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 );

});

In addition:

Quick Method for creating a hash:

$ H

$ H ({A: 1, B: 2 })

 

2. Class: Color

Function: Color objects, including many color management methods.

Constructor parameters:

Color: indicates the color of the Code, which can be hexadecimal code, representing the RGB or HSB code.

Array

Type: Optional. It is used to specify the code type, including RGB, HSB, and hex. When creating HSB code or hex array code, you must specify it explicitly.

VaR black = new color ('#000 ');

VaR Purple = new color ([255,0, 255]);

Method:

Mix: mix two or more colors with the current color

Parameters:

If the number of parameters is not fixed, multiple color codes can be mixed. When the last parameter is a number, this number is used as the percentage of the new color for each mixing.

VaR darkpurple = black. Mix ('# fff', purple, 10 );

$ ('Mydiv '). setstyle ('background-color', darkpurple );

 

Invert: returns the reversed color of the current color.

VaR c = new color ('# ff9900'). Invert ();

$ ('Mydiv '). setstyle ('background-color', C );

 

Sethue: Set the color.

VaR c = new color ('# ff9900'). sethue (10 );

$ ('Mydiv '). setstyle ('background-color', C );

 

Setsaturation: sets the color saturation.

VaR c = new color ('# ff9900'). setsaturation (50 );

$ ('Mydiv '). setstyle ('background-color', C );

 

Setbrightness: Set the color brightness

VaR c = new color ('# ff9900'). setbrightness (10 );

$ ('Mydiv '). setstyle ('background-color', C );

 

In addition:

Two shortcut methods for creating color:

$ RGB (R, G, B)-creates the color of the RGB mode

$ HSB (H, S, B)-create a color for the HSB Mode

 

 

If color. JS is loaded, array will be extended by two methods:

Rgbtohsb-the first three elements of the current array are converted to an array represented by the HSB value as RGB values.

Hsbtorgb-opposite to rgbtohsb

 

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.