MooColorPicker 颜色选择器插件

MooColorPicker 插件 是基于MooTools 开发的,它的作用是从颜色列表方块中选择颜色。我在以前的一篇的 《简单的颜色选项卡,基于CSS and MooTools 》文章中,介绍过类似的效果,功能无法与MooColorPicker 插件相比。不过它的有些思想和部分代码可用应用到“网页换肤” 中,这样写出来的程序更有可移植性。

如何使用

The MooTools JavaScript:

1
2
3
4
5
6
7
8
9
10
11
12
13
// Create the color picker with some colors
var cp = new MooColorPicker($('cp'), {
    colors: [
        "#001B2E", "#479096", "#4A7390",
        "#036564", "#4F2634", "#B6BFAD", "#2D0D10"],
    defaultColor: 3 // Select #4A7390
});
 
// Display current color
$('current_color').set('html', 'Current color is: ' + cp.getCurrentColor());
cp.addEvent('change', function(col, box) {
    $('current_color').set('html', 'Current color is: ' + col);
});

The HTML :

1
2
3
 
<div id="cp">Color picker container</div>
<div id="current_color">No color selected</div>

The CSS :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
div.moocolorcheckbox {
    width: 24px;
    height: 24px;
    margin: 4px 2px 4px 0px;
    border: 1px solid white;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -moz-box-shadow: 1px 1px 5px #cccccc;
    overflow: hidden; }
 
div.moocolorcheckbox_selected {
    width: 32px;
    height: 32px;
    margin: 0px 2px 0px 0px;
}

 

Download Files »

View Demo »

 

MooColorPicker DOCS

Implements:

Options, Events  

Syntax and options:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var cp = new MooColorPicker(container, options);
 
container: 
    The &lt;div&gt; container (will be empty).
 
options (object, optional): 
    Initial options for the class. Options are:
        colors: An array of strings, like ["#0123456", "#789ABC"].
        defaultColor: Index of preselected color 
            (default -1, none).
        className: CSS class for single color &lt;div&gt; boxes 
            (default 'moocolorcheckbox').
        selectedClassName: CSS class for selected color &lt;div&gt; box 
            (default 'moocolorcheckbox_selected').

Events:

1
2
3
4
5
6
change(color, item): 
    Fires when selected color is changed. Color is selected color, 
    item is the selected color &lt;div&gt; box.
 
mouseenter(div), mouseleave(div):
    Fires when mouse over or leave a color &lt;div&gt; box.

Methods:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
addColor(color): 
    Adds a color to the list.
 
removeColor(color): 
    Removes a color from the list.
 
selectColor(color): 
    Select a color if it is in the list.
 
getCurrentColor():
    Returs current color as "#HHHHHH" string.
 
getContainer():
    Return container &lt;div&gt;.

站点统计