El ejemplo que os voy a enseñar os parecerá la mayor estupidez que hayais visto nunca, pero de verdad, menudo curro que lleva la tonteria. En el afan de conquistar el mundo que tengo jijijiji (es brooooma), se me ocurrio intentar copiar un detalle muy curioso que tiene gmail, y que en realidad me parece util y de lo más interesante. La "tonteria" consiste en poder seleccionar varios campos checkbox mientras pulsamos la tecla shift. El objetivo es poder seleccionar los campos como si se tratasen de archivos… o registros en una aplicación de escritorio. En la secciónAJAX podeis ver el funcionamiento… (esto quiere decir que lo he conseguido) y mañana os podré el codigo fuente ya que no está muy limpio que digamos.
¿Donde estoy?
Hace muy poco
Tag Cloud
abrazos ajax apache aplicaciones Apple arduino blogak Ciencia code consolas crack crossover css Curiosidades day debian desarrollo devc++ disco diseño DRM duro euskal euskalparty examenes explorer fiestas flickr fonera fonera wifi fotos fowa frases freak geek Geeks General google independence java javascript juegos leopard Linux mac macbook pro mldonkey musica mysql NAS osx OS X padre de familia Paranoias php png Programación prototype psp python rol SGAE simplebd software subversion tecnología themes Universidad virus Web2.0 wifi wii consolas windows wireless wordpress wow xajax youtube
Archivo mensual
2008 :: Octubre 2008 |
Agosto 2008 |
Julio 2008 |
Mayo 2008
2007 :: Noviembre 2007 | Octubre 2007 | Septiembre 2007 | Agosto 2007 | Julio 2007 | Enero 2007
2006 :: Diciembre 2006 | Noviembre 2006 | Octubre 2006 | Septiembre 2006 | Agosto 2006 | Julio 2006 | Junio 2006 | Mayo 2006 | Abril 2006 | Marzo 2006 | Febrero 2006 | Enero 2006
2005 :: Noviembre 2005 | Octubre 2005 | Septiembre 2005 | Agosto 2005 | Marzo 2005 | Enero 2005
2007 :: Noviembre 2007 | Octubre 2007 | Septiembre 2007 | Agosto 2007 | Julio 2007 | Enero 2007
2006 :: Diciembre 2006 | Noviembre 2006 | Octubre 2006 | Septiembre 2006 | Agosto 2006 | Julio 2006 | Junio 2006 | Mayo 2006 | Abril 2006 | Marzo 2006 | Febrero 2006 | Enero 2006
2005 :: Noviembre 2005 | Octubre 2005 | Septiembre 2005 | Agosto 2005 | Marzo 2005 | Enero 2005
8 Comentarios
La verdad que el modificador Shift es super util. Solo una sugerencia, no se si Gmail lo hace, pero sería ideal si usarás el tag LABEL para el texto que va con el checkbox, de esa forma (según el estandar) pulsando sobre el texto cambiaría el estado de la casilla
Ojeando el código creo que una forma sencilla de implementarlo sería cambiando el DIV por un LABEL y el evento OnClick por un OnChange.
saludos,
Ivan
mmm pues tienes razon… ahora lo pruebo.
Ivan… una cosa el tema de hacerlo con in onchange… ( no estoy muy seguro porque yo de javascript… no mucho ) pero, estas seguro que un checkbox permite onchange ?? me s onaba que si pero he probado y he mirado algunas páginas y…. no tiene pinta.
http://www.javascriptkit.com/jsref/checkbox.shtml
Me puedes pasar algo de información ??
mmm según el estándar no está muy claro si un checkbox soporta OnChange, ya que como se lee en http://www.w3.org/TR/REC-html40/interact/forms.html#h-17.4, el elemento Input lo soporta pero tambien dice que onchange solo es elevado cuando el valor cambia, lo cual en un checkbox no parece ser posible, ya que solo el atributo ‘checked’ cambia pero no el valor en si.
He hecho un par de pruebas y utilizando un pequeño truco parece funcionar en Firefox e IE.
Fila 1
el evento onclick lo único que hace es forzar la perdida de foco por parte del elemento para que así se dispare el evento onchange. Aunque pensandolo bien, como el elemento checkbox solo tiene dos estados, bien podría usarse directamente el handler onclick directamente.
Por cierto, fijate que he usado el Label con el atributo ‘for’ en vez de incluir el input dentro de ella. Aunque el estándar define el segundo metodo, IE no parece hacerle demasiado caso
Otra cosilla, Opera no tiene muy buen soporte para eventos en elementos ‘exoticos’ como Label, por lo que no disparará el evento ha hacer click en el texto. Yo he optado por olvidarme de Opera casi totalmente en mis desarrollos, ya que se pierde muchisimo tiempo cuando se intenta soportar su anticuado motor de javascript.
ciao,
ivan
vaya, no escape el ejemplo….
<input type=”checkbox” name=”row1″ id=”row1″ onchange=”seleccioname(this)” onkey=”this.blur(); this.focus();”/>
<label for=”row1″> Fila 1<label>
Si ivan… así lo he preparado ( lo del label ) lo del onchange… pues la verdad yo creo que tratandolo con el onclick no ha de ser muy problemático no ? o… hay algún problema?
Puedes ver el ejemplo …
http://art-xtreme.com/blog/code/gmail2/
Tengo ahora problemas al ahcer la selección con el Shift, no se… como tú dices el tema del label, ¿no es muy exotico? .
Por otro lado no se podría hacer la selección conel Shift y pulsando en los elementos label porque lo que hace es seleccionar el texto. ( Aunque si se usase el onchange si funcionaría no ) ?
La cosa es que programar en DHTML es más un arte que una ciencia, así que no sabría decirte si usando el onchange daría buenos resultados.
A lo largo de los años he encontrado una metodología que me da buenos resultados, es la de programar un prototipo siguiendo los estándards y a partir de hay hacer branches de código para cada navegador.
Para el problema de la selección de texto que me comentas, usando los estándars se solucionaría si cancelamos el burbujeo del evento (evitando que el evento llegue al navegador y seleccione el texto):
En IE: window.event.cancelBubble = true;
En W3C: e.stopPropagation();
Aunque es posible que no funcione correctamente, ya que muchos navegadores disparan los eventos genericos en primer lugar. Otra forma sería cancelando la selección desde el mismo código con los objetos Range.
A ver si tengo algo de tiempo esta noche y me pego un poco con el código para ver que sale.
ivan
Hola de nuevo,
Me he puesto un rato con esto y ha salido bastante fácil. Simplemente basta con deseleccionar programaticamente el texto
Te dejo las modificaciones en http://netxusfoundries.com/tmp/gmail2/index.html
ciao,
ivan
Incoming Links
Deja tu granito de arena