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!





Form Elements – SelectBox con Ajax

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.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
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>
Funciones públicas:
Convierte un elemento triste y aburrido, en uno sexy!
Convierte un elemento sexy, en uno aburrido y triste.
El script es publicado bajo la licencia MIT.
Este artÃculo contiene los siguientes archivos:
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
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.
Interesante manera de exigir.
A diferencia de tu opinión a mi me parece formidable al igual que SexyLightBox2 y SexyTooltip (son las que he implementado hasta el momento en mi web). Si tienes alguna sugerencia, hasla bajo una mejora propia en el código, lo que nos estan ofreciendo aqui es un excelente punto de partida.
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!
Hey, there seems to be a great catch. The onclick eventhandler is disabled when sexyforms are activated – thus destroying my ajax implementation. Is there a way around this? Also my dropdown lists are all cut in the lower third part, which isn’t nice at all – any ideas why?
Best regards: Jan.
PS: whish I could some spanish too
I guess there is not much you can do. You must live without using the onclick event because sexy-forms uses this event!
Holla,
Como puedo usar captcha?
Desculpe pero hablo portugues no espanhol.
Você pode ver essas alternativas como implementar captcha em seus >
Antes que nada agradesco tu libreria, me servirá mucho para un trabajo que estoy realizando, tube también el problema de la libreria mootools, creo que no vendria nada mal agregar el comentario al inicio de la publicación, por que solo di con la solucion al leer los comentarios.
En fin, otra cosa aparte te comento sin ningun afan, que una vez terminado haré con todo gusto un donativo
estoy comenzando, pero no hay plazo que no se cumpla.
Aparte..
Ricardo, yo no falo português
pero… tienes que ser más especifico en tu pregunta.
Pero si tu problema es agregar CAPTCHA a tus formularios necesitarás probablemente usar PHP, o Jscript, también dependera de que tanto sepas programar en esos lenguajes, por eso es necesario que seas más especifico.
saludos!
Hi,
Have you any idea when the version of jQuery will end ?
Thanks.
Hola buenas,tengo problemas con el Sexylightbox, resulta que en mi web creo que tengo todo bien insertado en su sitio, pero a la hora de mostrar la imagenm solo me muestra un borde negro alrededor de la imagen, sin mostrar el marco superior donde tambien irÃa el botón de cerrar y el marco inferior donde si me aparece el titulo de la foto pero no los correspondientes botones de sig. y ant.
Si no es mucho problema me gustarÃa que me respondierais al correo ya que en los foros no suelo entrar y el correo lo miro todos los dias.
Un saludo a todos
Pues una felicitación más para Eduardo, realmente haces un trabajo estupendo en todos los sentidos, eres todo un maestro.
Creo que al igual que muchos me encuentro en espera de la versión jQuery de SexyForms, de verdad si puedo colaborar en algo para agilizar su lanzamiento, pues aqui estoy.
Por otro lado empece a buscar alternativas, pero no me funcionaron. Creo que mi probléma como el de muchos es el conflicto de tener jQuery y Mootools juntos. si alguien conoce como solucionar esto, le agradeceria mucho que me diera más información. Ya estuve probando jQuery.noConflict() (y variantes) pero no consigo resultados. Para mi caso en particular estoy implementando SexyForms y SexyToolTips (con Mootools y jQuery respectivamente),provisionalmente podrÃa solucionarse simplemente implementando Sexytooltips también con Mootools, pero uso jQuery para otras cosas también
Ojala puedan orientarme un poquitin, con que me den un punto de partida estaria genial.
_Saludos.
Tienes que ser mnas especifico en las preguntas…Cual es tu problema isVai???? El problema de incopatibilidad se soluciona simplemente usando lo que dices:jQuery.noConflict() y reemplazando los $ por jQuery
Hola, me parece increible el sexyform, pero estoy teniendo un pequeño problema.
Por lo general me ha funcionado perfecto, pero por algun motivo, cuando veo mi form en IE no me funciona, pero si me funciona con el Demo que tienen acá. Porque es eso? gracias