Jacascript Color-Picker für Farb-Sets ohne jQuery
Auf der Suche nach einem simplen Javascript Color-Picker mit definierbaren Farbsets wurde ich nicht fündig. Ein als 'really simple' annonciertes Werk entpuppte sich als Konzert in jQuery in mehreren Sätzen, inkl. der modischen Einladung 'fork me on github'.

Auf dem Wege fand ich ausserdem ein kleines Javascript aus der Internet-Bronzezeit: Javascript Colorpicker von 1999
Minimalistischer Color-Picker ohne jQuery
Minimalistische Javascript Color-Picker für definierbare Farbsets ohne jQuery:




Erläuterung:
  1. Der Farb-Set wird als Javascript-Array ('aProjectColors') notiert
  2. Ein relativ positioniertes div 'pickerdiv' enthält das Link mit dem Aufruf der Color-Palette (im body)
  3. Die Javascript-Funktion 'buildPalette()' erzeugt dynamisch on-the-fly ein div 'palette', sowie die darin enthaltenen Farbfelder
  4. Die Farbfelder rufen bei Klick eine kleine Funktion 'pickc()' auf, welche die gewählte Farbe in ein input-Feld schreibt und das div 'palette' wieder zerstört und auf display='none' zurückstellt
  5. Die styles sind in diesem Fall unverzichtbar
  6. Der Internet-Explorer versteht styles.className nicht recht, daher die leichten Verschiebungen, die sich per einzelner JS style Anweisungen oder durch ein separates Stylesheet für IE korrigieren lassen
HTML/Javascript
1  <html><head>
2  
3  <!-- Javascript Color-Picker für definierbare Farbsets von Sebastian Heimpel M.A. 2013 -->
4  
5  <style>
6  #pickerdiv { display:block; position:relative; float:left; margin-right:10px; }
7  .palette   { display:none;  position:absolute; width:120px; height:auto; padding:4px 0 0 4px; border:4px solid #ccc; bottom:15px; left:18px; background:#ffffff; box-shadow: 2px 2px 10px #ccc; }
8  a.palettec { display:inline-block; width:56px; height:20px; margin:0 4px 4px 0; }
9  #myc       { color:#fff; }
10  </style>
11  
12  <script>
13  
14  //Farb-Set als Array
15  var aProjectColors = new Array();
16  aProjectColors[1] = '#FF9900';
17  aProjectColors[2] = '#FF6600';
18  aProjectColors[3] = '#FF3300'; 
19  aProjectColors[4] = '#FF3366'; 
20  aProjectColors[5] = '#FF33FF'; 
21  aProjectColors[6] = '#9966CC'; 
22  aProjectColors[7] = '#6633CC';
23  aProjectColors[8] = '#3333FF';
24  aProjectColors[9] = '#336699';
25  aProjectColors[10] = '#009966';
26  
27  //Palette aufrufen
28  function buildPalette() {
29  
30      //Falls palette schon erzeugt, Funktion abbrechen
31      if ( document.getElementById("palette") != null ) { 
32          document.getElementById("palette").style.display = "none"; //FF
33          document.getElementById("pickerdiv").removeChild(document.getElementById("palette")); 
34          return false; 
35      }
36  
37      //absolutes div dynamische erzeugen, innerhalb relativem div "pickerdiv"
38      var crDiv = document.createElement('div'); 
39      document.getElementById("pickerdiv").appendChild(crDiv);
40      crDiv.id = 'palette'; 
41      crDiv.className = 'palette';
42      
43      //erzeugtes div "palette" sichtbar stellen
44      document.getElementById("palette").style.display = "block";
45      
46      //style-Werte für den unsäglichen Internet-Explorer nachführen (unvollständig)
47      if(document.all) {
48      document.getElementById("palette").style.position = "absolute"; //IE 
49      document.getElementById("palette").style.top      = "-112px";   //IE 
50      document.getElementById("palette").style.left     = "18px";     //IE 
51      document.getElementById("palette").style.width    = "132px";    //IE 
52      document.getElementById("palette").style.paddingRight = "0px";  //IE
53      } 
54  
55      //div "palette" mit Farbfeldern aus Array füllen
56      for(i=1;i<aProjectColors.length;i++) {
57          document.getElementById("palette").innerHTML += '<a href="#" onclick="pickc(' + i + ')" class="palettec" style="background:' + aProjectColors[i] + '" title="' + i + '"></a>';
58      }
59      
60      return false;
61      
62  }
63  
64  //Farbe picken und Palette schliessen
65  function pickc(i) {
66      //input feld: wert mit geklickter Farbe füllen
67      document.getElementById("myc").value = aProjectColors[i];
68      document.getElementById("myc").style.backgroundColor = aProjectColors[i];
69      //div "palette" wieder zerstören  
70      document.getElementById("palette").style.display = "none"; //FF  
71      document.getElementById("pickerdiv").removeChild(document.getElementById("palette"));   
72  }
73  
74  </script>
75  
76  </head>
77    
78  <body>
79  
80  <br><br><br><br><br><br><br><br>  
81  
82  <div id='pickerdiv'>
83      <a href='#' onclick='buildPalette()' title='Klick & Pick'><img src='cpick.png' border='0'></a><br>    
84  </div>
85  <input type='text' id='myc' name='c' value=''>
86    
87  </body>
88  </html>
© 2012 Sebastian Heimpel M.A.