Sexyforms is a javascript library that improves the appearance of XHTML forms. It’s compatible with all of modern browsers, and also with Internet Explorer. It’s no-intrusive and it lets you create your own styles!
Demo
Form Elements – SelectBox with Ajax
Features
How to Install
You can install it as another 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>
Where… :
sexyforms-vista.css is the name of the style to use. You can choose among these styles:
- 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 is the name of the script. If you want to get speed, you can try using the simplified version: sexyforms.v1.3.mootools.min.js
Using SexyForms
In mootools:
$$("input", "select", "textarea").each(function(el) {
el.DoSexy();
});
Example: Search the form with the class ‘sexyform’ and beautify all its elements:
<script type="text/javascript">
window.addEvent('domready', function() {
$$(".sexyform input", ".sexyform select", ".sexyform textarea").each(function(el) {
el.DoSexy();
});
});
</script>
Example: Beautify an single element:
<input type="text" id="name" value="" />
<script type="text/javascript">
$('name').DoSexy();
</script>
Documentation
Public Functions:
-
element.DoSexy()
Converts a sad and boring element in a sexy one!
-
element.reset()
Converts a sexy element in a sad and boring one.
License
This script is published under license 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
-
Carlos Daniel Estrad:
Muy bueno el sistema, solo me gustaria que me respondieras una duda, quiero... -
Alex RUS:
It works great -
sites para anunciar:
Otimo. adorei esse site vocês escrevem muito bem os artigos…vou salvar... -
ray:
hi -
Elliot:
estamos en las mismas yo termine la carrera ya no entre a ejercer esta profesión y eso que... -
brokenwalls:
La identación es mas importancia de la que se le suele dar, por mi parte utilizo... -
Yukiko Gahn:
La mente de uno lleva a una manera de hacerse sin conocimiento de nadie , además de que... -
Billy:
Hola, me encanta la Sexy Lightbox 2, pero tengo un problema en una de mis páginas, en donde...
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
ola eduardo he probado en ie6 y el problema que presenta es que al desplegar el combo no muestra nada solo los items vacios….
Para hacerlo compatible con Mootools añadiremos la función jQuery.noConflict() y cambiaremos las $ por jQuery, dejando asà el código javascript:
jQuery.noConflict();
jQuery(document).ready(function(){
Hola tu script es muy bueno!!! Realmente me encanta, sólo tengo una duda, como se puede se obtiene el valor de un “select” cuando cambia???
Gracias amigo!!!
buenas
si esta muy bueno el script pero tengo un problema con el select, no me funciona el evento onchange :S saves a q se debe?
Todos tenemos el mismo problema y no se que paso con eso, yo estoy esperando una nueva version hace mucho para poder implementarlo, realmente esta genial si no fuera por ese detalle que supongo no debe ser fácil de solucionar.
Exacto, no es algo fácil de solucionar debido a que cada navegador maneja diferente los eventos.
Prometo traer novedades.
Excelente script Eduardo aparte he notado que en ie al menos en el 7 cuando scrolea uno la pagina los textos de los botones como que se degradan o desaparecen y vuelven hasta de pasas el cursor del raton sobre uno de los botones
saludos
Eduardo el select de tu ejemplo no funciona en chrome version 3.01, no hace seleccion
Gracias por avisar, yo estoy usando el 4 y no me doy cuenta.
A ver si puedo hacer un fix para hacerlo compatible…
Hola Eduardo
Mirando un poco más los sexyform en estos dÃas, he notado que en Chrome y Safari los tabindex no funcionan adecuadamente en especial en los input de tipo radio y los checkpoint. Tambien para recordarte que en chorme no funcionan los select.
Si existe alguna manera de que te ayude a solucionar estos problemas guÃame, muchas gracias Eduardo.
waiting for jQuery, thanks
Hola Eduardo!
¿Como puedo hacer para activar un boton del formulario? Te explico, inicialmente el boton esta disabled, pero al rellenar todos los campos el campo se activa pero la imagen sigue siendo la de disbaled, aunque si clico en el el formulario se envia. lo que quiero es que el boton pase a verse activado de forma visual…
La comprobacion la hago mediante onblur en cada campo del formulario y hasta que todos no estan rellenos no lo activo, por si sirve de algo la aclaracion.
Muchas gracias y felicitaciones por todos los scripts que haces!
Hola creo que puede hacer algo como esto
// en mootools $('id_button').fireEvent('click');// en jquery $('#id_button').trigger('click');Espero te sirva.
v1.3 version, the selection have a bug under firefox. the dropdown menu display a wrong positon. when change back to V1.1, it works well. please check.
Hola Eduardo, como puedo poner sexy a varios checkpoints, teniendo en cuenta primero que no están dentro de un formulario, y segundo se generan de manera aleatoria con un id secuencial.
Solucionado, dentro del ciclo que genera los checkpoints los vuelvo sexys
muy bueno el sexy form realmente muy facil de aplicar.
Pero tengo un problema cuando apreto en el select la lista se desplaza envez de que este justo debajo del select esta o mas arriba o mas abajo, que puede ser?
gracias!
hola utilice este script en un formulario pero para validar los campos he utilizado livevalidation y cuando se valida un campo este se desarma queda una parte de arriba y otra abajo, que podria hacer o que script me recomiendan que no tenga problemas con sexyforms.
gracias
hola eduardo, bueno comentando lo mismo que Raul, sigue existiendo ese problema de los SELECT,
bueno antes se desplazaban las opciones, y se ubica mas arriba, en vez de justo abajo.
Ahora aparecen dos Select, uno SEXY y otro ABURRIDO, y solo funciona el ABURRIDO.
Incluso en tu demo pasa eso.
Bueno encontre, un posible error(quizas equivocacion), en linea: 583, en la funcion createlist
Tu habias colocado:
yo eh reemplazado eso, quitando el document.id por un $ quedando asi:
Lo que si no puedo hacer la modificacion es en el archivo sexyforms.v1.3.mootools.min.js
Si podrias hacer eso Edu, seria chevere, gracias.
Hola amigo Eduardo, quier preguntarte si el soporte de SexyForms para SexyLightBox fue eliminado porq he intentado con el método q indicaste en un post anterior y no me funciona, y si cambió el método, podrÃas mostrarlo para ponerlo en funcionamiento?
Hola! Me encanta su libreria para volver sexy los formularios, pero he encontrado una cosa: Saben que uso bastante la etiqueta para los formularios y me he dado cuenta que la libreria no funciona para estas etiquetas. Se podria hacer que funcionaran?
hola @Carlos Morales no lo dudes, creeme q estamos en buenas manos y la idea es q nuestro amigo Eduardo sea quien lo implemente para conservar los SexyForms Originales… considerando lo q tu dices serÃa tomar todas las propiedades For de los label y agregarle un evento onClick para luego ejecutar un FireEvent al input… {espero no estar errado}
Los label si funcionan. ¿o no?
Los labes si fncionan
disculpen.. es que no me di cuenta que no estaba apareciendo la etiqueta html que les queria mostrar, es para crear los botones con “” lo que pasa es que no me habia acordado que tenia que escribirlo dentro de comillas para que aparezcan las etiquetas, Yo suelo usar esas button para los botones y con la libreria de sexy forms no me las detecta..
Disculpen.. las etiquetas html a las que me refiero son button /button, lo que pasa es que si las encierro entre los simbolos “menor que” y “mayor que” no se muestran aqui.
I’ve been developing an online store with oscommerce and have already integrated some jquey functions for the project which respective files are called in … By now the site is making use of the jqTransform (jquery) plugin to style the form elements, but I’d really like to have SexyForms working together with jquey along the project. Is there a way to have mootools working with other jquery plugins? I’ve read in the comments something about changing the selectors.. I’ve tried to install Sexyforms with no sucess since jquery is been called in the same page. Any suggestions or soltutions? Sorry for the dumb question, but I’m a new user of those js libraries.
The site can be seen here:
Thanks in Advance.
Sorry, but I dont think so.
Mootools hate jQuery xD
Sorry, confusion with the link tag, click in ‘thanks in advance’ to see the mentioned site.
See you all later!
sexy-forms hace que desaparezca un componente visible llamado Calendar que utilizo del framework YUI de yahoo.com (yui version 2.8.0r4), pero esto unicamente sucede en el browser Firefox 3.5.5, ya que en IE8 aparece correctamente!
ya hice pruebas y solamente vuelve a aparecer hasta que quito el mootools de mis librerias de javascript (ya probé con varias versiones de mootools 1.2.2 , 1.2.3 y 1.2.4).
También ya probé mezclarlas con las versiones de yui 2.6.0, 2.7.0b y 2.8.0r4 y aun sigo con ese mismo detalle.
Al parecer hay un conflicto en el componente Element de mootools con el componente Element de YUI. Espero que me puedas ayudar a resolverlo!!!!
holas trata de buscar alguna funcion para que no haya conflictos entre mootools y YUI yo tenia con jquery pero lo solucione con noConflict()
Hi all i have a little problem with sexyform and all browser. I can’t see the text in the select!!
did someone have and idea??
Hola amigo, felicitaciones por esta gran libreria! Yo tengo un problema, es que uso las etiquetas y no me las reconoce la libreria, quedan con el estilo normal. Hay alguna solucion para esta estiqueta? muchas Gracias!
Les ruego me disculpen por mi spam, ya tengo un comentario mas arriba donde varias personas me han respondido, lo que pasa es que no me percate de que no se estaba mostrando las etiquetas html a las que me referia.. estas son button /button y sirven para crear botones con cualquier tipo de media dentro de ellos, hasta una tabla.. Al parecer sexy forms no soporta estas etiquetas..
SexyForms si soporta las etiquetas button.
Lo que pasa es que estas preguntando algo al aire, y como ninguno de nosotros no lee las mentes (por ahora) no podemos decirte que error estas cometiendo (o si es un error del script) hasta no ver el ejemplo en cuestión.
Hola Eduardo: Como te puedo ayudar para que en los SF funcionen de nuevo los campos select que están presentando problemas incluso en la demo. Si existe alguna forma en la cual te pueda ayudar a programar, dime y con muchÃsimo gusto te ayudo.
Hola Eduardo, estoy de visita en unapc con Explorer 8 y veo q lapagina de demo tiene errores, en el combo y en los checks para ser mas especifico, espero puedas solucionar ese tema (Y)
ESUTORAIKI, yo postee la solucion unos cuantos comentarios arriba, o posible solucion a ese problema sobre los combos.
En linea: 583, en la funcion createlist:
Reemplazar quitando el document.id por un $ quedando asi:
Espero haberte ayudado
El error se soluciona utilizando la última versión de mootools la 1.2.3
En cuanto al error del select estoy conciente y sé que es un problema de position:relative pero aún no ando inspirado como para solucionarlo.
Te refieres Eduardo al bug que presentan los select cuando los visualizas en Chrome. O al bug de posición del campo de lista del select.
CUando corro la pagina, el formualrio desaparece, mas sin embargpo en el formulario de html sirve, pero tampoc ahi cuando cambio los themes no se muestran. Qu ehago?
El problemo con los lista exista con mootools 1.2.4. Hay une solucion??
this is a really amazing script..
kepp up the good work guys:)
hi again,
by the way the script at the link at
http://www.coders.me/ejemplos/sexy-forms/demo/
doesnt work properly.. when i click at select a country, on the modified version it doesnt show up anything.. what is the problem?
please help me to solve this.
/regards
i found the problem.. it links to the script:
http://ajax.googleapis.com/ajax/libs/mootools/1.2.2/mootools-yui-compressed.js
but it should be:
http://ajax.googleapis.com/ajax/libs/mootools/1.2.3/mootools-yui-compressed.js
/regards
Thanks! now is working.
mi duda es. si quisiera añadir varias funciones basadas en mootools digase sexyforms, sexyalerts, y otras más, solo debo bajar un solo archivo de mootools ? (1.2.3 en este caso) y que archivos necesitaria de cada funcion? pregunto esto para no tener que tener varias versiones modificadas de mootools innecesarias… saludos
Exactamente, y siempre es conveniente tener sólo la última versión de mootools (que actualmente es la 1.2.4)
Los necesarios de cada funcion, dependen de la funcion.