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
-
Ünsal:
I’ m use old version sexy lightbox and NO PROBLEM Now. but this new versiın have a... -
Ünsal:
hi, i have a problem. please look this. photo. i am useing to this jquary... -
Maxi:
Hola, hay alguna posibilidad de cerrar la sexyalert de forma externa al plugin?. Es decir... -
Carolina in trouble:
hola! este lightbox me ha funcionado de forma excelente para mi pagina web en... -
Roberto:
Hola… estoy teniendo problemas con socket_create ya que me esta devolviendo... -
alexis:
quiero ser un programador autodidacta necesito una asesoria -
hdennison:
Tiene una pinta estupenda, llevo bastante tiempo esperando a la versión para jQuery.... -
Gaston:
Hola Eduardo! una consulta, como puedo hacer para usar este script pero como pop up, es...
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
La verdad las formas que se tiene como download, no sirven!!! No puedes hacer selecciones por que desaparecen y la verdad que se ha comenatdo de esto pero los host no hacen nada. Por favor arreglenla senores.
Interesante la manera en que exiges las cosas
pero no aportas nada.
primero te felicito eduardo por tu trabajo, oye has pensado ponerle un validador a sexyforms, que es lo único que le falta para que sea completamente funcional, te comento que le he tratado de agregar algunos como livevalidation http://livevalidation.com/ pero esta el incoveniente de que mueve todo, espero puedas incluir algun validador proximamente…. saludos
hi eduardo..
i am using the great sexyforms:)
i would like to give each select list a unique id number.. so i can fetch them in an easy through JS.
could you please give a reply of how i can solve this?
Hm i have a “small” problem using sexyForms…
perhaps you could mail me (project is not public) so you could see yourself?
Necesito saber como arreglar en su forma que se bajo y cuado le doy click en diferente color de theme, la forma se desaparece y la manda hasta abajo de la pagina y no muestra la forma bonita como se ve cuado abres el archivo.
I need to know hot to fix this form, when i change the theme, the form distorts and I am not able to see the form in sexy form. Can u anyone help.
Thanks
Te aconsejo primero aprender urbanidad, y segundo un poco más de javascript. Es demasiado fácil manipular los SF. La arquitetura de los SF es inpecable, felicitaciones a Eduardo un gran programador.
Solo quisiera comentar que haces un excelente trabajo. Felicidades Eduardo.
Hola, perdonen pero tengo un problema y es que se transforman todos los campos excepto los select y los textarea…
¿Qué puede estar ocurriendo?
MI problema esq los SELECT no funcionan!!!! cuando estan en la pagina de DEMO estan bien..pero cuando se descarga el .zip los SELECT se dañan por completo…porq? a alguin le pasa lo mismo?….. Ojala eduardo respondiera almenos una pregunta!!
@Carlos cambia la versión del mootools a la 1.2.4. Verás como te funciona sin problemas!
Gracias Pablo…en efecto al descargar esta version funciono perfectamente..Gracias por tu ayuda..
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, lo primero deciros que ya no hay un site en el que no piense como primera opcion en vosotros ENHORABUENA!!!!!
Tengo una dudilla, al cargar sexyform, los desplegables sale un cuadrado negro rodeando al icono, en caso de tenerlo, alguna idea?
Muchas gracias de antemano y seguid así, increible vuestro trabajo si señor!!!
PD: el mootools que uso es el 1.2.3 tambien lo he probado con el que recomendais el 1.2.2
hey que tal, oye eduardo primeramente un saludo, bueno te cuento que hace poquito acabo de cambiar mis tristes y aburridos forms por los sexysform, pero me ha surgido un problema con los select, lo que pasa es que en un formulario tengo selects dependientes (estados y municipios), bueno el problema es que cuando elijo un estado deberia de limpiarse el select de municipio, pero aun no he podido hacer esto, ya que el select de los municipios no se limpia y se queda el registro que anteriormente se habia seleccionado.
¿qué puedo hacer para corregir eso?
nota: ya intente algo como $(’select’).lenght = 0;
pero no me sale.
de antemanos gracias y si alguien me puede ayudar se lo agradeceria mucho.
el problema es q no se puede reiniciar un select a su valor inicial!!! como se podra hacer???? oviamente sin tener q recargar la pagina!!!
Hey, if I take a class list like:
$$(”.smart4u input”, “.smart4u textarea”).each(function(el) {
el.DoSexy();});
It takes ALL input/textarea elements and not just the ones with class=”smart4u” in it. Is this a bug?
Aha, I guess that it has to be on the form element – and unfortunately, the form element must not be nested? It’s such a fine product – can’t you extend it to check the class on every element in the form instead?
Good job: Jan
Hola, primero te quiero agradecer por el trabajo que esta muy bueno y me simplificaste mucho todo, de verdad, gracias!…
Segundo, tengo un pequeño problema y es que te en mi formulario tengo un SELECT que adentro tiene código PHP porque lo que hace ese SELECT es que muestra la información desde una base de datos. El problema es que cambian todos los INPUT, etc, pero los SELECT quedan normales, se me hace que es por eso del código PHP que tienen dentro. Alguna idea?.
Desde ya muchas gracias…
Juan,los select t quedan de esa forma porq estas usando la libreria equivocada….Debes descargarla de su web oficial…La ultima version es la 1.4.4,usandola los select quedaran perfectos…Aca te dejo el link para q la bajes:
http://mootools.net/download
como cambio el color de la opacidad…???
Dejame felicitarte, eres un vacan hermano. Este fin de mes te compro un par de café tengo por seguro. Gracias y sigue asi.
When gets the jquery version released?
Hola uso ajax, y siempre tengo problemas con las librerias al traer los datos las librerias se pierden….. Alguien que use ajax y haya solucionado este problemas?????? =/
Tiene una pinta estupenda, llevo bastante tiempo esperando a la versión para jQuery.
Sigue por el buen camino!