jQuery.NiceFileInput.js modificar estilos CSS en los inputs de tipo file
miércoles, septiembre 05, 2012 @10:18
NiceFileInput,js es un plugin de jQuery para modificar los estilos CSS del control de formularios en las etiquetas input
de subida de archivos de tipo file
(input type="file"
).
Personalizar los elementos de subida de archivos en los formularios es una tarea que requiere de tiempo, paciencia y además no obtiene los mismos resultados dependiendo del navegador. NiceFileInput elimina ese molesto proceso y te permite concentrarte simplemente en el estilo CSS de los elementos del control: el boton de subida, la caja de texto y el contenedor de ambos.
El Script degrada correctamente y si el usuario no tiene activado javascript en el navegador, se mostrará un elemento común <input type="file" />
.
NiceFileInput.js es un script basado en el trabajo previo de Shaun Inman, quien definio el concepto básico detras de NiceFileInput ( Personalizando controles de archivo con CSS y el DOM [EN] ) y el de Mika Tuupola, quien implemento de forma elegante la idea en un plugin jQuery pero con ciertas limitaciones ( FileStyle ). Asi que la mayor parte del credito de este plugin va para ellos.
Ejemplos y Descarga
Puedes ver una demo aquí: NiceFileInput.js o descargar el código desde la página del repositorio en GitHub alterebro / jQuery.NiceFileInput.js.
Requerimientos
NiceFileInput requiere de la libreria jQuery, disponible en el website jQuery.com o a través de la red de distribucion de contenido de Google: Librerias alojadas, Google CDN
Modo de uso
-
Primero asegurate de incluir la libreria jQuery y el plugin NiceFileInput en tu página.
- Usando una copia local de jQuery:
<script src="/your_path/jquery.min.js"></script>
<script src="/your_path/jquery.nicefileinput.min.js"></script>- O usando Google CDN:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script src="/your_path/jquery.nicefileinput.min.js"></script>
-
Añade el código que activa el plugin en los elementos jQuery donde quieras aplicarlo
<script type="text/javascript">
/* <![CDATA[ */
$(document).ready(function(){
// your code...
$("input[type=file]").nicefileinput();
});
/* ]]> */
</script>Puedes opcionalmente establecer el valor por defecto del texto en el botón de carga:
$("input[type=file]").nicefileinput({
label : 'Examinar...' // Custom label
});
Personaliza con CSS el File-Input
Puedes personalizar completamente el estilo y aspecto del control de formulario de dos formas:
- Usando el mismo código CSS para personalizar todos tus elementos file-input a través de las siguientes clases:
.NFI-wrapper {
// div contenedor
}
.NFI-button {
// botón
}
.NFI-filename {
// elemento text-input que muestra el valor del archivo.
}- O estableciendo un valor al atributo
class
de el elemento input-file que quieres personalizar individualmente. // Define una clase en el elemento input HTML
// <input type="file" class="nice" />
// Ahora puedes estabelcer tu código CSS del siguiente modo:
.nice {
// div contenedor
}
.nice .NFI-button {
// boton
}
.nice .NFI-filename {
// text input que recoje y muestra el valor
}
Etiquetas: graceful degradation, javascript, jquery, plugin
0 comentarios
Publicar un comentario