MooRainbow – Crear nuestro propio selector de colores
MooRainbow un poderoso Javascript utilizando también mootools que nos permitirá montar en nuestra Web, un bonito selector de colores, donde podremos visualizar y elegir aquellos colores que serán útiles para nuestros proyectos. Inclusive permite una personalización realmente muy fácil, y brinda agradables variantes a la hora de ser utilizado.
- MooRainbow es completamente personalizable a través de un fichero CSS.
- MooRainbow mantiene limpio su DOM y genera XHTML y CSS válido
- MooRainbow proporciona, como contrapartida, un objeto que contiene RGB, HSB y HEX del color seleccionado.
- MooRainbow es realmente rápido gracias a mootools.
- MooRainbow funciona bien en Firefox / Safari / Opera / IE
Ver demo - Descarga Demo - Mas info moorainbow
Instalacion:
Descargamos los archivos a utilizar (mi demo incluye todo) y realizamos la llamada correspondiente a ellos desde nuestro encabezado.
<script type="text/javascript" src="js/mooRainbow.js"></script>
Incluyendo también el llamado a la hoja de estilo
Ahora debemos crear un nuevo objeto MooRainbow. Lo haremos dentro de nuestra etiqueta < head >
window.addEvent('domready', function() {
var r = new MooRainbow('myRainbow', {
'startColor': [58, 142, 246],
'onChange': function(color) {
$('myInput').value = color.hex;
}
});
});
</script>
Para finalizar, ya podremos insertar nuestra estructura en body. O mejor dicho nuestro selector de colores MooRainbow, donde deseamos mostrarlo en nuestra web. La forma de hacerlo:
<img id="myRainbow" src="images/rainbow.png" alt="[r]" width="16" height="16" />
<input id="myInput" name="myInput" type="text" size="13" />
</label>
Este selector que acabamos de insertar aquí, es algo así como su versión estándar. En mi demo, seria el ejemplo numero UNO. Una pequeña imagen, que al hacer clic sobre ella abrirá nuestro selector de colores, y un casillero que almacenara los valores Hexadecimal de cada color que hemos seleccionado.
Pero MooRainbow posee otras variantes, u otra forma de utilizar nuestro selector. Me remitiré solo ha comentar los demos que he creado. Lo que seria el ejemplo DOS de mi demo. Básicamente, una imagen que nuevamente abrirá nuestro selector de colores (pro cierto, esta vez mucho mas pequeño), pero evitando almacenar en un casillero los valores hexadeciamles generados al seleccionar cada color. Lo que significa, que si deseamos un color o el valor de un tono, lo obtendremos directamente copiándolo desde el mismo selector, ya que posteriormente no quedara almacenados en ningún casillero. De todas sigue siendo muy útil, al acostumbrarnos, y es otra buena opción, dependiendo el fin que deseamos darle a cada uno de estos selectores en cuestión.
Instalacion ejemplo DOS:
Si bien al comienzo hemos realizado la llamada a un fichero css, esta vez necesitaremos insertar unas líneas más de css para este demo. El código lo encontraran aquí.
Una vez agregado las líneas de código css nuevas, nuevamente necesitaremos crear un objeto desde nuestro encabezado. Dentro de nuestra etiqueta < Head >
window.addEvent('domready', function() {
var demo3 = new MooRainbow('demo3', {
id: 'myDemo3',
imgPath: 'images/'
});
});
</script>
y por ultimo, la imagen que abrirá nuestro selector de colores en nuestro contenido
<img id="demo3" src="images/rainbow.png" rainbow.png" alt="[r]" width="16" height="16" class="rain" id="demo3" />
Click en el arco iris para abrir la paleta de colores miniatura
</label>
De todas formas, podrán ver y probar desde el demo a descargar
