AntColorPicker jQuery plug in

Sample of custom AntColorPicker

In this sample, you can see how to customise CSS and content of an AntColorPicker. I used a predefined palette with 4 colors.

Source Code

JavaScript used

//function to replace tags
function TagConvertor(chaine, TagList, joker) {
    var _mask = (joker == undefined)? "#":joker;
    for (var val in TagList) chaine = chaine.replace(new RegExp(_mask+val+_mask, "g"), TagList[val]);
    return chaine;
}

//initialisation of AntColorPicker and customisation
$("#colorPicker").AntColorPicker(
{
    //Custom parameters
    "labelClose":"Close color picker",
    "labelRAZColor":"Clear field",

    //Custom function to build the palette
    "builder":function(contentTemplateLine, contentTemplate, labelClose) { //méthode construisant la palette
        var content = ""
        var values = ['#068241', 'rgb(86, 168, 38)', '#CC0079', '#FFCC00'];
        for (i = 0; i < values.length; i++) {
            content += TagConvertor(contentTemplateLine,{"color":values[i]});
        }
        //Warning : tag starts and ends with #
        content = contentTemplate.replace("#contentLineTemplate#",content);
        return content;
    }
}

                
					

CSS used

    #AntColorPicker {
    width:  62px !important;
    background-color: #fff;
    border: none;
    border-radius: 4px;
    box-shadow: 2px 2px 2px #444;
    height: 43px;
    }
    #AntColorPicker ul {
    margin-right: 20px;
    padding: 5px;
    }
    #AntColorPicker li {
    border: 2px white solid;
    border-radius: 4px;
    margin: 1px;
    box-shadow: 1px 1px 2px #444;
    }