Foros del Web » Programando para Internet » Jquery »

Implementacion de pestañas en Jquery

Estas en el tema de Implementacion de pestañas en Jquery en el foro de Jquery en Foros del Web. Hola amigo. Trato de implementar un código muy util ahora con tres pestañas pero resulta que en la segunda le coloque un botón para avanzara ...
  #1 (permalink)  
Antiguo 06/07/2014, 21:59
 
Fecha de Ingreso: septiembre-2013
Ubicación: Bogota
Mensajes: 139
Antigüedad: 8 años, 3 meses
Puntos: 0
Implementacion de pestañas en Jquery

Hola amigo. Trato de implementar un código muy util ahora con tres pestañas pero resulta que en la segunda le coloque un botón para avanzara hacia la tercera pero el boton no hace nada. En la tercera pestaña coloque un boton para retroceder a la segunda pestaña pero me devuelve a la primera. Me podrían colaborar por favor. Dejo mi código para mostrar lo que he hecho.


Código HTML:
Ver original
  1. <div id="tabs">
  2. <ul>
  3. <li><a href="#tabs-1">Datos personales</a></li>
  4. <li><a href="#tabs-2">Datos victimizantes</a></li>
  5. <li><a href="#tabs-3">Datos complementarios</a></li>
  6. </ul>
  7. <div id="tabs-1">
  8. * N&uacute;mero de documento:<input class="required" type=text name="numdoc" id="numdoc" onKeyPress="cargando(this)" onBlur="comprobarU(this)" MAXLENGTH=20 onKeypress="if (event.keyCode < 45 || event.keyCode > 57) event.returnValue = false;"></input>
  9. * Nombres:<input type="text" class="required" name="nombres" MAXLENGTH="45"></input><br>
  10. <button id="btnToVictimizantes" name="btnToVictimizantes" type="button">Siguiente >></button>
  11. </div>
  12. <div id="tabs-2">
  13. * Apellidos: <input type=text class="required" name="apellidos" MAXLENGTH=45></input>
  14. * Edad:<select class="required" name="edad">
  15. <option value="">Seleccione...</option>
  16. <option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option>
  17. <br>
  18. <button id="btnToPersonales" name="btnToPersonales" type="button"><< Anterior</button>
  19. <button id="btnToComp" name="btnToComp" type="button">Siguiente >></button>
  20. </div>
  21. <div id="tabs-3">
  22. * Sexo:<input type="text" class="required" name="sexo" MAXLENGTH="45"></input><br>
  23. <button id="btnToVict" name="btnToVict" type="button"><< Anterior</button>
  24. <input name="enviar" type="submit" class="button white" value="Guardar formulario">
  25. </div>
  26. </div>


Código Javascript:
Ver original
  1. jQuery.fn.validateTab = function (toTab) {
  2. var isValid = true;
  3. $(this).find("input, select").each(function () {
  4. if (isValid) {
  5. isValid = $(this).valid();
  6. } else {
  7. $(this).valid();
  8. }
  9. });
  10. if (isValid) {
  11. if (!toTab) {
  12. toTab = 0;
  13. }
  14. $("#tabs").tabs('select', toTab);
  15. }
  16. return false;
  17. }
  18. $(document).ready(function () {
  19. $('#btnToVictimizantes').click(function (e) {
  20. e.preventDefault();
  21. $("#tabs-1").validateTab(1);
  22. });
  23. $('#btnToPersonales').click(function (e) {
  24. e.preventDefault();
  25. $("#tabs-2").validateTab(0);
  26. });
  27. $('#btnToComp').click(function (e) {
  28. e.preventDefault();
  29. $("#tabs-2").validateTab(1);
  30. });
  31. $('#btnToVict').click(function (e) {
  32. e.preventDefault();
  33. $("#tabs-3").validateTab(0);
  34. });
  35. });

Estoy implementando de acuerdo a este blog donde lo encontré:

http://pixelcoblog.com/jquery-ui-tab.../#.U7ob2ZR5P1Z
  #2 (permalink)  
Antiguo 06/07/2014, 22:46
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.538
Antigüedad: 10 años, 2 meses
Puntos: 969
Respuesta: Implementacion de pestañas en Jquery

Hace unos meses hice un ejemplo con pestañas creadas usando solo CSS. Aquí puedes ver el código y así es como resulta:



Para tu caso, solo te quedaría colocar cada bloque de tu formulario en un contenedor diferente y asignarle una pestaña a cada uno.

Saludos
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand
  #3 (permalink)  
Antiguo 07/07/2014, 09:08
 
Fecha de Ingreso: septiembre-2013
Ubicación: Bogota
Mensajes: 139
Antigüedad: 8 años, 3 meses
Puntos: 0
Respuesta: Implementacion de pestañas en Jquery

Hola Alexis. Gracias disponer de tu tiempo y responder. En realidad las pestañas las utilizo solo para dividir mi formulario, En realidad lo que me interesan son los botones que hacen pasar a la siguiente pestaña. Inicialmente el ejemplo venia con dos pestañas que pasaba de la primera a la segunda presionando el boton "Siguiente" pero como en mi caso tengo que hacer tres pestañas pense que iba a ser facil agregarle otra funcion al JS y ya pero en realidad me ha costado trabajo. El problema lo tengo aqui.

Código Javascript:
Ver original
  1. $(document).ready(function () {
  2. $('#btnToVictimizantes').click(function (e) {
  3. e.preventDefault();
  4. $("#tabs-1").validateTab(1);
  5. });
  6. $('#btnToPersonales').click(function (e) {
  7. e.preventDefault();
  8. $("#tabs-2").validateTab(0);
  9. });
  10. $('#btnToComp').click(function (e) {
  11. e.preventDefault();
  12. $("#tabs-2").validateTab(1);
  13. });
  14. $('#btnToVict').click(function (e) {
  15. e.preventDefault();
  16. $("#tabs-3").validateTab(0);
  17. });
  18. });

La verdad no entiendo por que en la pestaña dos el botón "siguiente" no me pasa a la tercera pestaña y en la tercera pestaña el boton "Anterior" no me devuelve a la segunda sino a la primera pestaña. Si me pudieras colaborar en que estoy fallando te lo agradeceria mucho. llevo Dias estancado en este paso y pues pense que iba a ser mas facil. Gracias

Etiquetas: implementacion, pestañas
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 04:34.