elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado:


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  [Resuelto] jquery create checkbox con slider
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: 1 [2] Ir Abajo Respuesta Imprimir
Autor Tema: [Resuelto] jquery create checkbox con slider  (Leído 8,001 veces)
gAb1


Desconectado Desconectado

Mensajes: 731


Ver Perfil
Re: jquery create checkbox con slider
« Respuesta #10 en: 22 Mayo 2015, 01:58 am »

Ya tengo algo mas solido, el problema es que no consigo obtener el id del checkbox seleccionado:

Código
  1. $('body').on('click', '#showChck input', function() {
  2.    var $id = event.target.id;  // ID DEL CHECKBOX
  3.        $( "#test" ).val($id);
  4.        if ($("#slider-" + $id).length) { // COMPROBAR SI EXISTE
  5.            $("#slider-" + $id).fadeToggle();
  6.    }
  7.        else { // SI NO EXISTE SE CREA
  8.            $("#showSldr").append(
  9.                  $('<div></div>', {id: "slider-" + $id, class: "slider", }),
  10.                  $('Lineas: <span>1</span>', {id: 'result-' + $id}).text($id)
  11.             );
  12.    }
  13. });
  14.  

Ya casi lo tengo! Jejeje

Edito: Me empané! El id del checkbox sera: checkbox-XX y solo necesito el numero... :(

Aunque realmente no me importa que el id del slider sea "slider-checkbox-XX". Mientras funcione me conformo :)

Edito2: Vale ya lo arreglé usando this.id

Ahora necesito saber como puedo inicializarlos, seguramente será justo despues de que se crean habra que añadirlo. Voy a probar.

Edito3: Si que funciona, pero encontre un problema:
Si hay un checkbox activado y mueves el primer slider el activado se desactiva pero el slider sigue visible, y al activarlo se oculta el slider (justo al reves de como debería funcionar).

Asi quedó el código:

Código
  1. $('body').on('click', '#showChck input', function() {
  2.    var x = this.id;
  3.    var $id = x.replace(/\D/g, '');
  4.  
  5.    if ($("#slider-" + $id).length) {
  6.        $("#slider-" + $id).fadeToggle();
  7.        $("#result-" + $id).fadeToggle();
  8.    }
  9.    else {
  10.        $("#showSldr").append(
  11.            $('<div/>', {id: "slider-" + $id, class: "slider"}),
  12.            $('<span/>', {id: 'result-' + $id}).text('4')
  13.        );
  14.        $("#slider-" + $id).slider({
  15.            min: 4,
  16.            max: 100,
  17.            value: 4,
  18.            step: 2,
  19.            slide: function( event, ui ) {
  20.                $( "#result-" + $id ).html( ui.value );
  21.            }
  22.        });
  23.    }
  24. });

Estoy intentando hacer pruebas a ver si consigo que si el checkbox esta desactivado pero el slider esta visible pues que al activarlo no se oculte por el toggle...


« Última modificación: 22 Mayo 2015, 04:35 am por gAb1 » En línea

EFEX


Desconectado Desconectado

Mensajes: 1.171


"Dinero Facil"


Ver Perfil WWW
Re: jquery create checkbox con slider
« Respuesta #11 en: 22 Mayo 2015, 07:53 am »

Código
  1. $("body").on("click", "#showChck input", function() {
  2.  var x = this.id;
  3.  var $id = x.replace(/\D/g, "");
  4.  
  5.  // Obtenemos el slider nuevo
  6.  var slider = $("#slider-" + $id);
  7.  
  8.  // El slider no existe?
  9.  if (!slider.length) {
  10.  
  11.    // Nota que <span> ira dentro del div, sino
  12.    // se complica
  13.    var nuevoSlider = $("<div/>", {
  14.      id: "slider-" + $id,
  15.      "class": "slider"
  16.    }).append($("<span/>", {
  17.      id: "result-" + $id
  18.    }).text("4"));
  19.  
  20.    // Si no existe creamos uno nuevo, nota que
  21.    // estamos en la posision sobre el checkbox
  22.    // asi que al slider nuevo lo ponemos despues
  23.    // de <label>
  24.    $(this).next("label").after(nuevoSlider);
  25.    nuevoSlider.slider({
  26.      min: 4,
  27.      max: 100,
  28.      value: 4,
  29.      step: 2,
  30.      slide: function(event, ui) {
  31.        $("#result-" + $id).html(ui.value);
  32.      }
  33.    });
  34.  }
  35.  
  36.  // Si el checkbox esta seleccionado, mostramos
  37.  // el slider, sino lo ocultamos
  38.  if ($(this).is(":checked")) {
  39.    slider.show();
  40.  } else {
  41.    slider.hide();
  42.  }
  43. });


En línea

gAb1


Desconectado Desconectado

Mensajes: 731


Ver Perfil
Re: jquery create checkbox con slider
« Respuesta #12 en: 22 Mayo 2015, 17:10 pm »

Gracias esta funcionando, pero ¿sabes por qué los sliders creados se resetean (el valor) al mover el primer slider? Según la comprobación solo deberían ocultarse.
En línea

EFEX


Desconectado Desconectado

Mensajes: 1.171


"Dinero Facil"


Ver Perfil WWW
Re: jquery create checkbox con slider
« Respuesta #13 en: 22 Mayo 2015, 17:33 pm »

No debe pasar eso, solo se resetea si cambias el slider principal, por que recreara los checkbox de nuevo.
En línea

gAb1


Desconectado Desconectado

Mensajes: 731


Ver Perfil
Re: jquery create checkbox con slider
« Respuesta #14 en: 22 Mayo 2015, 18:09 pm »

Vale gracias, voy a dar el problema por solucionado (porque ya lo solucionaste hace varios mensajes). Abrire otro para otro problema.

Muchas gracias :)
« Última modificación: 23 Mayo 2015, 06:05 am por gAb1 » En línea

Páginas: 1 [2] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Problema carousel (slider) jQuery
Desarrollo Web
Spider-Net 0 2,974 Último mensaje 29 Julio 2011, 18:13 pm
por Spider-Net
Por favor para completar el código de formulario en php y checkbox? [Resuelto]
PHP
gh1E 4 3,256 Último mensaje 9 Mayo 2013, 18:30 pm
por gh1E
Slider Automatico Jquery (AYUDA)
Desarrollo Web
nevermind2403 0 3,127 Último mensaje 13 Noviembre 2013, 05:09 am
por nevermind2403
[Resuelto] checkbox debuelbe value aunque este desmarcado
PHP
Ethgar 1 2,671 Último mensaje 9 Marzo 2015, 03:01 am
por Ethgar
[Python] Obteniendo el valor de un checkbox HTML [RESUELTO]
Scripting
MA40 3 6,764 Último mensaje 16 Agosto 2016, 20:29 pm
por + 1 Oculto(s)
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines