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 posts:

1. [Javascript] JavaScript HTML Parser: Mejorando nuestros HTML’S Muchos quizas creyeron que ya no postearia, pero se equivacaron,...
2. [Manual] Uso de APT: Ayudantes muy útiles Continuamos con el manual de APT. Cómo instalar paquetes localmente...
3. [Javascript] Menú deslizante usando Jquery El seraphinux ultimamente le ha dado por escribir mas que...
4. :: Live Query :: El nuevo plugin de Jquery He andado algo ocupado , mas bien bastante ocupado, llevo...

Related posts brought to you by Yet Another Related Posts Plugin.