Ajaxman - Ajax, Javascript, Xul, Internet, Recursos, Informatica …

Les estoy preparando unos buenos tutoriales sobre Apache, y sobre javascript, y poco a apoco pienso darles salida.

Pues mientras estoy preparando eso, que les parece, un link que me encontré en Ajaxian.

Bueno resulta que a veces muchos desarrolladores, no le damos el trato que se merece al campo HTML de tipo FILE.
Pero para poderlo personalizar usaremos css y javascript veamos el ejemplo.

Tenemos primero el campo file, les recomiendo seguir el ejemplo y luego ajustarlo a nuestros gustos ya que el ejemplo lo tome de la web del autor.

Luego ponemos este css

.SI-FILES-STYLIZED label.cabinet
{
width: 79px;
height: 22px;
background: url(btn-choose-file.gif) 0 0 no-repeat;

display: block;
overflow: hidden;
cursor: pointer;
}

.SI-FILES-STYLIZED label.cabinet input.file
{
position: relative;
height: 100%;
width: auto;
opacity: 0;
-moz-opacity: 0;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
}

Para personalizarlo a nuestro gusto debemos de utilizar una minilibreria, la cual nos permitira hacer los cambios pertinentes, no pesa mucho; su nombre es SI

Una vez cargados los campos, podemos llamar a la funcion, recuerden que esto lo pueden hacer desde la cabecera de nuestro HTML siempre y cuando los elementos del DOM esten cargados, o bien pueden usar la minilibreria JXS.

SI.Files.stylizeAll();

Y por ultimo para hacer referencia a que campo queremos darle formato lo hacemos de dos formas.

Por ID

SI.Files.stylizeById(‘input-id’);

O por nodo del elemento

SI.Files.stylize(HTMLInputNode);

Ejemplo de llamadas a la funciones

SI.Files.htmlClass = ‘SI-FILES-STYLIZED’;
SI.Files.fileClass = ‘file’;
SI.Files.wrapClass = ‘cabinet’;

Recuerden que usa la libreria SI

Via | A Cheaky Way to Style an input type=”file”
Pagina Demo | http://www.shauninman.com/assets/examples/styling-file-inputs/

Descarga de el ejemplo | styling-file-inputs.zip
Enlace del autor | http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom

Related Photos

No related photos.