@alterebro

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

  1. 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>
  2. 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: , , ,

0 comentarios

Publicar un comentario en la entrada

Suscribirse a Enviar comentarios [Atom]

Enlaces a esta entrada:

Crear un enlace