SexyForms es una librería javascript que se encarga de mejorar increíblemente la apariencia de los formularios XHTML. Es compatible con todos los navegadores modernos, y con Internet Explorer también. Es completamente no-intrusivo y permite crear tus propios estilos!
Demostración
Form Elements – SelectBox con Ajax
Características
Instalación
Se instala como cualquier script:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.2/mootools-yui-compressed.js"></script> <link type="text/css" rel="stylesheet" href="sexyforms-vista.css" media="all"/> <script type="text/javascript" src="sexyforms.v1.3.mootools.js"></script>
Donde… :
sexyforms-vista.css es el nombre del estilo a usar. Puedes elegir entre estos estilos:
- sexyforms-blue.css
- sexyforms-red.css
- sexyforms-green.css
- sexyforms-dark.css
- sexyforms-clean.css
- sexyforms-vista.css
- sexyforms-orange.css
- sexyforms-simple.css
- sexyforms-gamma.css
sexyforms.v1.3.mootools.js es el nombre del script. Si quieres ganar velocidad, puedes probar usando la versión comprimida: sexyforms.v1.3.mootools.min.js
Usando SexyForms
En mootools:
$$("input", "select", "textarea").each(function(el) {
el.DoSexy();
});
Ejemplo: Buscar el formulario con clase ‘sexyform’ y embellecer todos sus elementos:
<script type="text/javascript">
window.addEvent('domready', function() {
$$(".sexyform input", ".sexyform select", ".sexyform textarea").each(function(el) {
el.DoSexy();
});
});
</script>
Ejemplo: Embellecer un elemento individual:
<input type="text" id="name" value="" />
<script type="text/javascript">
$('name').DoSexy();
</script>
Documentación
Funciones públicas:
-
element.DoSexy()
Convierte un elemento triste y aburrido, en uno sexy!
-
element.reset()
Convierte un elemento sexy, en uno aburrido y triste.
Licencia
El script es publicado bajo la licencia MIT.
Download
Este artículo contiene los siguientes archivos:
Changelog
SexyForms 1.3.1 - Octubre 30, 2009 * BugFixed: La lista del elemento Select no aparecia en el top correcto. SexyForms 1.3.0 - Octubre 03, 2009 * Mas compatibilidad con IE6 * Nuevo SelectBox con manejo de eventos * Bugs de posición en selectbox arreglados * SelectBox ahora recibe el foco * SelectBox ahora muestra iconos en IE6 & IE7 * Bug de Textarea en Opera arreglado SexyForms 1.2.0 - Septiembre 29, 2009 * Elemento Select eliminado. Ahora se usa el nativo para evitar errores. * Agregado InputFile * BugFixed: Se hace mejor uso de la herencia. * BugFixed: El textarea es del mismo tamaño en todos los navegadores. SexyForms 1.1.0 - Junio 20, 2009 * BugFixed: Float elements compatible * Decenas de cambios menores. SexyForms 1.0.0 - Abril 04, 2009 * Versión Inicial. * Mootools 1.2.2
-
Jospito:
Hola, He implementado tu clase en un plugin de symfony pero me da el siguiente error... -
rravi:
como puedo llamar a una pagina luego de presionar el boton OK, ayudenme -
mensajes claro movis:
A mi tambien me pasa el mismo error en un servidor propio de mi casa, por mas... -
Lashanda Mammoccio:
Mainly need to post and inquire where you obtained your template? I’m... -
Alberto Gaulke:
Sorry, unfortunately I will have to dispute with this story. Having said that, I... -
Arshi:
I am using your amazing sexylight box on a site…the problem is when I view a website on... -
Natalia_New_Mexico:
The reality is that the establishment in the Senate HATE CCB, modest as it... -
Alexandra_Pennsylvan:
I see two basic options for you: Reduce visibility and do something completely...
www.coders.me © 2007-2010 / Theme diseñado por Eduardo Daniel Sada
Queda prohibida la reproducción total o parcial, en Español o cualquier otro idioma, sin el expreso consentimiento del autor. / Políticas de uso
Powered by Wordpress - Social Network Icon Pack by Komodo Media
No se preocupen, ya arregle el problema despues de un par de horas. Simplemente pasé todos los archivps denuevo
in sexyforms.v1.3.mootools.js
var option = document.id(this.element.options[iiC]);
should be
var option = this.element.options[iiC];[/js]
hola! Tengo una grave problema…lo q pasa esq tengo formularios en los q uso selects…con un boton reset para cancelar…pero resulta q los select no ovedecen al boton de reset!!!! claro oviamente porq son diferentes a un select normal ya q estan contruidos a base de imagenes!!! PERO ALGUIEN SABE ALGUNA FORMA DE REINICIARLOS SIN RECARGAR LA PAGINA????? De antemano muchas gracias..ojala alguien sepa como hacerlo!
Hola!
Tengo un problema, los listados no se ven bien, me aparece el listado con la clase y junto a el el mismo sin la clase y el que tiene la clase no responde, solo el sin clase.
Precisamente lo quiero para los listados!!! Mala suerte la mia!
Ayuda!!!
ASE...ESO ES PORQ TIENES LA LIBRERIA INCORRECTA..A MI ME PASABA ..DESCARGUE LA VERSION COMPLETA 1.2.4 Y SE ARREGLO EL PROBLEMA DE LOS SELECT…!!!!
http://mootools.net/download EN Download MooTools 1.2.4
mmmmmm
Como puedo aplicar SexyForm en SexyLigthBox ose quiero que al hacer click en “ingresar” me aparesca un SexyForm
de Antemano muchas gracias
Hi,
thanks, its great.
SexyForms navigation in open selectbox by keys doesn’t works with FF. Check on the demo page – you cannot reach esperanto, after russian it jumps to english.
Hello,
Have you an idea of the date when Sexy Forms can be used with JQuery ?
Thanks
Amigos disculpen la molestia, no se si ya alguien pudo con el problema de los select anidados la libreria del sexyform es muy buena y no quiero dejar de usarla.
el detalle esta en q necesito trabajar con select anidados y no me muestra nada, es mas bajo el ejemplo q tienen aqui y no me muestra nada ni marca error. Estoy usando el mootools 1.3 y el sexyforms 1.3.1 supuestamente y no me actualiza la informacion. Me urge es para el trabajo de la escuela. Gracias y disculpen la molestia
Con caracter de urgente… alguien q me ayude porfavor, no me funciona ningun evento en los checkbox. por favor alguien podria explicarme como usarlo.
se los agradecere. saludos
si logras solucionar tu problema por favor puedes compartirlo, por que la verdad tampoco se que hacer!!!!
use otro componente el ezmark pero tiene problemas con el ie en los demas exploradores funciona correctamente. Ahora tengo un problema con un modulo el cual la idea es q filtre los resultados de una tabla con ajax y un select todo funciona bien el detalle esta que al actualizar la tabla se me pierde el formato del sexyform de del select y hasta el tooltips deja de funcionar. Alguna sugerencia?
Ayudaaa no funciona el select de sexyform en google chrome si alguien sabe como arreglar este problema por favor colaboren para solucionar este problema por que chrome tiene en estos momentos mucha demanda y si no funciona el sexy form entonces ni para que implementarlo
de antemano gracias los que puedan colaborar
Camilo: me pasaba lo mismo, asi que actualicé la libreria de mootools y se soluciono, espero te sirva ya que a mi si
,
atte skandelabro
Bro… creo que no me expliqué bien. el diseño del select está bn pero no me deja seleccionar los elementos con el evento click en google chrome, es mas mira el ejemplo de este blog en un chrome actualizado y te das cuenta que no funciona.
pero si me funciona… , al querer seleccionar un elemento del select, si me lo hace.. en todos los navegadores men.. mañana subire un ejemplo a un servidor… para ver que onda
saludos
Nada… en todos los navegadores funciona perfectamente pero en el chrome actualizado no funciona al tratar de seleccionar un elemento de un select y mira que estoy usando la version 8.0.552.237 del chrome que es la ultima.
ahhh y pues lo he probado en varios equipos y es lo mismo… si subes un ejemplo a un server me cuentas.
me puedes agregar a messenger mi correo es: camilo_sistemas@hotmail.com y compartimos ideas o solucionamos problemas. Éxitos
oka, ahí te agregue men
estamos hablando
skandelabro como hiciste para que funcione la lib en un combo???
Ey man nose si este post sea demasiado tarde para vos pero al usar el api de google actual (30-Oct-11) si funcionan todos los controles ya lo chekie en Opera, Chrome, Firefox 7 y si funka a la perfección espero te sirva aún
https://ajax.googleapis.com/ajax/libs/mootools/1.4.1/mootools-yui-compressed.js
buen día. pues a mi me pasa lo mismo y no veo el porque… si abro esta misma pagina en el chrome no funciona el select pero si la abro por ejemplo en el firefox si funciona normalito, es mas se ve un bonito efecto de recorrido. alguien sabe como solucionarlo o aun nada???
gracias.
hola… que pena, efectivamente se pasa actualizando el moo, tenia el 2.2 y le puse el 1.3 y va de lujo.
Igual tengo otra pregunta… lo que pasa es que al momento de usar un select solo en un formulario… al darle click para que me liste el contenido.. se corre… por favor si alguien puede ayudarme
Veras no se si sea el mismo problema pero al abrir el proyecto con un diseñador(dreamweaver) aparecen espacios o el tamaño es muy reducido en caso de que lo tengas dentro de una tabla y no cuadra el tamaño de la celda con el del select entonces arreglas en el diseñador y se arregla tu problema de descudre.
no, no es ese el problema… mira intenta dejar solo un input de tipo select.. en el archivo, y veras que se deforma.. por el hecho de estar solo.,, al momento de listar el contenido..
:/
Hola Eduardo, bueno veo que aun tienes seguidores en la web y de tus plugins, exitos pues…
Este coments es para bueno animarte a trabajar este plugins(SexyForms) en jQuery, como eh visto en CodeCayon todos tus plugins que alli vendes, son enteramente en jQuery, y bueno creo que nos podrias dar la posibilidad de cumplir lo prometido por ti cuando desarrollaaste este plugins, ya que como hemos visto en todo el avance web, jQuery se ah llevado a mootools en fin, bueno creo que todos tus seguidores deseamos eso, en particular yo uso bastante el sexyform, te pedimos porfavor lo reconsideres. chau mucha suerte
En mi combo de mi formulario no funciona como puedo hacer para que se embellezca porq es muy bonita la libreria AYUDA!! alguien q haya podido