Für ein Projekt brauchte ich einen kleinen Farbwähler, fand' aber keinen passenden, also musste ich das Rad mehr oder weniger neu erfinden.

Die ergoogelten jQuery-ColorPicker waren entweder nicht jQuery genug (keine Möglichkeit, nach der Farbwahl auf das Objekt zuzugreifen, das angeklickt wurde), ließen sich nicht in einen jQuery-UI-Dialog einbinden oder waren einfach um ein paar Funktionen zu reich (Farbwähler als voller Photoshop-Dialog).

Hier meine jQuery-Erweiterung jColorpicker mit 15 vorgegebenen Farbfeldern.

// v1.0
(function( $ ){
        $.fn.jColorpicker=function(options) {
                var colors = ['ffffff','000000','ff0000','c22626','b4ff00','00ff00','188b20','0000ff', '18cddd', '00ffff','ffff00', 'ff00ff', '9f4375', 'eea21d', '8b6618'];
                if (options.colors != null) colors = options.colors;
                $(this).bind('click', function(e) {
                        e.stopPropagation();
                        var picker = document.createElement("div");
                        var parent = $(this);
                        var docOnClick = document.onclick;
                        document.onclick = function() { $(picker).remove(); document.onclick = docOnClick; }
                        picker.className = "jColorPicker";
                        for (var x=0; x<colors.length; x++) {
                                var pick = document.createElement("div");
                                pick.className = "pick";
                                pick.style.background = "#"+colors[x];
                                pick.innerHTML = "&nbsp;";
                                if (options.rowBreak && options.rowBreak > 0 && (x/options.rowBreak) == parseInt(x/options.rowBreak)) pick.style.clear = "both";
                                $(pick).on("click", function() {
                                        var color = rgb2hex($(this).css("background-color"));
                                        $(picker).remove();
                                        document.onclick = docOnClick;
                                        if (typeof options.onSelect == "function") options.onSelect(color, parent);
                                        });
                                $(pick).on("mouseover", function() {
                                        $(this).css("border-color", "#535353");
                                        if (typeof options.onHover == "function") {
                                                var color = rgb2hex($(this).css("background-color"));
                                                options.onHover(color, parent);
                                                }
                                        });
                                $(pick).on("mouseout", function() {
                                        $(this).css("border-color", "#000000");
                                        if (typeof options.onHoverEnd == "function") {
                                                var color = rgb2hex($(this).css("background-color"));
                                                options.onHoverEnd(color, parent);
                                                }
                                        });
                                picker.appendChild(pick);
                                }
                        $("body").append(picker);
                        $(picker).position({"my": ((options.position && options.position.my) ? options.position.my : "left top"), 
                                "at": ((options.position && options.position.at) ? options.position.at : "right top"), 
                                "of": $(parent)});
                                });
                        };
                function rgb2hex(rgb) {
                if (rgb.search("rgb") == -1) {
                        return rgb;
                } else {
                        rgb = rgb.match(/^rgba?((d+),s*(d+),s*(d+)(?:,s*(d+))?)$/);
                        function hex(x) { return ("0" + parseInt(x).toString(16)).slice(-2); }
                        return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]); 
                        }
                }
        })( jQuery );

Zugehöriges CSS

.jColorPicker {
        border:#000000 1px solid;
        padding:5px;
        background:#ffffff;
        position:absolute;
        z-index:9999;
        }
.jColorPicker .pick {
        width:10px;
        height:10px;
        float:left;
        border:#000000 1px solid;
        margin:0px 3px 3px 0px;
        cursor:pointer;
        }

Benutzung

Jedem DOM-Element kann der jColorpicker angehängt werden. Es muss sich weder um ein Input-Element handeln, noch wird nach Farbauswahl das Element entsprechend der gewählten Farbe umgefärbt, wie es so gut wie alle anderen Plugins machen.

Alle übergebenen Optionen sind optional.

$(selector).colorpicker({
        colors: [Hex-Colors],
        rowBreak: 0,
        position: {"my": "left top", "at": "right top"},
        onSelect: function(color, el) {},
        onHover: function(color, el) {},
        onHoverEnd: function(color, el) {}
        });

Optionen

colors
Array mit Hex-Farbwerten, die im Farbwähler zur Verfügung gestellt werden

rowBreak
Standardmäßig werden alle Farbkästchen nebeneinander angezeigt.
Es kann wahlweise nach rowBreak Farb-Kästchen ein Zeilenumbruch erfolgen, so dass der Farbwähler aus mehrere Zeilen besteht
Standardwert 

0

position 
Positionierung des Farbwählers relativ zum Objekt, das angeklickt wurde, um ihn zu öffnen
Standardwert

{"my": "left top", "at": "right top"}

Methoden

onSelect
Wird ausgeführt, wenn ein Farbkästchen angeklickt wurde.
Rückgabe: Hex-Farbwert (inklusive vorangestelltem "#") und Eltern-Element, welches zum Öffnen des Farbwählers angeklickt wurde

onHover
Wird ausgeführt, wenn mit der Maus über ein Farbkästchen gefahren wird.
Rückgabe: Hex-Farbwert (inklusive vorangestelltem "#") und Eltern-Element, welches zum Öffnen des Farbwählers angeklickt wurde

onHoverEnd
Wird ausgeführt, wenn die Maus ein Farbkästchen verlässt.
Rückgabe: Hex-Farbwert (inklusive vorangestelltem "#") und Eltern-Element, welches zum Öffnen des Farbwählers angeklickt wurde

Version

  • 1.0 – erstes Release