Foros del Web » Creando para Internet » CSS »

Selección multiple con distintos colores

Estas en el tema de Selección multiple con distintos colores en el foro de CSS en Foros del Web. Hola, estoy programando un intervalo horario en un formulario y me gustaría saber como puedo hacer una select o un grupo de checkbox pero que ...
  #1 (permalink)  
Antiguo 22/12/2011, 13:14
 
Fecha de Ingreso: diciembre-2011
Mensajes: 3
Antigüedad: 12 años, 10 meses
Puntos: 0
Selección multiple con distintos colores

Hola,

estoy programando un intervalo horario en un formulario y me gustaría saber como puedo hacer una select o un grupo de checkbox pero que contenga una selección múltiple en el mismo elemento.

Es decir, yo quiero que en la franja horaria, poder seleccionar por ejemplo de las 2 a las 4 con un color, de las 4 a las 7 de otro color, etc, hasta 5 colores, que se corresponden con los 5 intervalos.

Previamente tendría que haber un check para seleccionar el color (intervalo horario que quiero activar).

He visto este control fancy checkbox, pero claro, solo me permite seleccionar con un color:

http://craftyman.net/fancy-checkbox-con-css-y-jquery/

Saludos.
  #2 (permalink)  
Antiguo 23/12/2011, 07:49
 
Fecha de Ingreso: octubre-2011
Ubicación: Barcelona
Mensajes: 115
Antigüedad: 13 años
Puntos: 4
Respuesta: Selección multiple con distintos colores

Puedes usar el "OPTGROUP" para agrupar las franjas horarias y darle estilo.
  #3 (permalink)  
Antiguo 23/12/2011, 12:55
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 17 años, 4 meses
Puntos: 1567
Respuesta: Selección multiple con distintos colores

Partamos de la base de que esto involucra más a JavaScript que al propio Css
Para usar un select, vi varios plugins de jquery, pero ninguno hacía exactamente lo que queres. Con checkboxes si es posible algo similar, utilizando imágenes, o una capa a la que se le cambie el texto y el color, yo he usado el primer método, con imágenes

Código PHP:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2.     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <title>chk img</title>
  6. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  7.  
  8. <style type="text/css">
  9. /*<![CDATA[*/
  10. .boxes {
  11.     /* descomentar la siguiente linea para ocultar los checkboxes */
  12. /* display: none; */
  13. }
  14. /*]]>*/
  15. </style>
  16. <script type="text/javascript">
  17. //<![CDATA[
  18.  
  19.  function testchk(){
  20. var valor = document.getElementById('chk_id').checked;
  21. var valor2 = document.getElementById('chk_id2').checked;
  22. alert(valor + '-' +valor2);
  23. }
  24. function check(checkboxid,imag,reemplazo,defecto) {  
  25. var valor = document.getElementById(checkboxid).checked;
  26.  
  27. if (valor == false){
  28. document.getElementById(checkboxid).checked = true;  
  29. document.getElementById(imag).src = reemplazo;  
  30. }else{
  31. document.getElementById(checkboxid).checked = false;  
  32. document.getElementById(imag).src = defecto;  
  33. }
  34.  
  35. }  
  36. //]]>
  37. </script>
  38. </head>
  39. <body>
  40. <img src="checkboxbg.gif" onclick="check('chk_id',this.id,'checkboxbg2.gif','checkboxbg.gif');" width="110" height="150" alt="" id="uno" />
  41. <img src="checkboxbg.gif" onclick="check('chk_id2',this.id,'checkboxbg2.gif','checkboxbg.gif');" width="110" height="150" alt="" id="dos" />
  42. <form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="get">
  43. <p class="boxes">
  44. <input type="checkbox" id="chk_id" name="preferencias[]" value="internet" />
  45. <input type="checkbox" id="chk_id2" name="preferencias[]" value="deportes" />
  46. </p>
  47. <p>
  48. <br />
  49. <input type="submit" name="procesar" value="enviar"/>
  50. </p>
  51. </form>
  52. <p>
  53. <br />
  54.  <a href="#" onclick="testchk();">Verificar</a>
  55. </p>
  56.  
  57. <?php
  58.  
  59. if(isset($_GET['procesar'])){
  60.  
  61. $prefs = $_GET['preferencias'];
  62.     if(!empty($prefs)){
  63.     echo "tus preferencias son: <br />";
  64.     $N = count($prefs);
  65.         for($i=0; $i < $N; $i++){
  66.         echo $prefs[$i] . "<br />";
  67.         }
  68. }
  69.  
  70. }
  71. ?>
  72. </body>
  73. </html>

La función de js function testchk(), solo está para verificar el funcionamiento, y los checkboxes estan visibles por la misma razón, edita el css para ocultarlos.
Te dejo una demo (las imágenes son solo de prueba, tendrías que hacer algo descriptivo)

http://foros.emprear.com/javascript/checkboxes-ocultos/

y seguramente se le pueden hacer algunas optimizaciones

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.

Última edición por emprear; 23/12/2011 a las 13:54

Etiquetas: colores, distintos
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 17:47.