Nueva pregunta

Pregunta:

Fecha: 28-12-2017 18:04:23 (En Español)

Cómo crear nuevas pestañas al darle click a una pestaña ya existente? (ejemplo: asi como las pestañas de los navegadores google chrome y morzila firefox)[Resuelta]

Hola amigos del foro phpcentral, tengo una pequeña app diseñada en el framework Materializecss a la cual quiero integrarle un elemento tab que me va a controlar la cantidad de secciones que tendré en mi app. Ese elemento tab debe tener algunas características especiales como: poder editarle el nombre a una tab al darle doble click sobre el nombre ya existente y generar nuevas tabs al darle click a una tab ya existente que funcionara más como botón. Lo primero ya lo tengo gracias a aportes de personas de este grupo, pero en el caso de intentar generar nuevas tabs al darle click a una tab ya existente he tenido ciertos problemas. Mostrare a continuacion el codigo que ya poseo.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>

<div class="row">
    <div class="col s12">
      <ul class="tabs">
        <li class="tab col s3" id="first"><a class="active" id="Tab1" href="#test1">New Filter</a><input style="text-align: center; color: pink;" type="hidden" name="tab1" id ="inputTab1" value="" placeholder="Nuevo Nombre"/></li>
        <li class="tab col s3" id="second"><a id="Tab2" href="#test2" onclick="NewTab()">New Tab<input type="hidden" name="tab2" value="New Tab" /></a></li>
      </ul>
    </div>
    <div id="test1" class="col s12">
      texto de la primera pestaña</div>
    <div id="test2" class="col s12">Texto de la segunda pestaña</div>
  </div>


//renombrar las tabs
//Obtengo el dobre clic en la tab
$("#Tab1").dblclick(function () {
        $("#Tab1").remove();
        $("#inputTab1").attr("type", "text");
        $("#inputTab1").focus();
});
//Detecto el keyup para ver cuando den enter
$('#inputTab1').on('keyup', function(e) {
    if(e.keyCode === 13) {
            //Valor del imput
        var input1 = $(this).val();
        //Agrego el enlace antes del imput dentro de la li para que quede como al inicio
        $("#inputTab1").before('<a class="active" id="Tab1" href="#test1">' + input1 +  '</a>');
        //Limpio el campo
        $("#inputTab1").val("");
        //Oculto el campo
        $("#inputTab1").attr("type", "hidden");
        
        //Reinicio el monitoreo del doble clic o ciclo
        $("#Tab1").dblclick(function () {
        //Ya sabes el resto
          $("#Tab1").remove();
          $("#inputTab1").attr("type", "text");
          $("#inputTab1").focus();
        });
    }
});

//generar nuevas tabs
function NewTab () {
  var i = 1;
  var k = ++i; 
$("#second").before('<li class="tab col s3"><a id="Tab'+k+'"'+' href="#test3">New filter<input type="hidden" name="tab2" value="New Tab" /></a></li>');
}


con la funcion NewTab lo que trato de hacer es generar nuevas tabs(pestañas) al darle click en la pestaña "New Tab", de hecho se generan las tabs pero lo que deseo es que se generen nuevas tabs y que a esas tabs se le pueda editar el nombre (como es el caso de la primera tab que su nombre se puede editar) y que tengan su elemento div asociado (en el cual se situa el contenido de cada tab). Si se fijan en el codigo html, luego de la lista no ordenada "<ul>" vienen unos elementos divs los cuales estan asociados a cada elemento "<li>" y sirven para albergar el contenido de cada tab, además cada tab debe tener un pequeño botón para poder eliminar la tab cuando se desee.

Cómo podria lograr esto dinamicamente haciendo uso de javascript/jquery? Básicamente ya tengo el script para editar el nombre a cada tab pero lo que deseo es generar nuevas tabs al darle click a la tab(pestaña) "New Tab" y que cada tab que se genere se le pueda editar el nombre y que tengan su div asociado (asi como la primera tab de mi codigo), asi se le puede agregar contenido a dichas tabs. un ejemplo del comportamiento que deseo es el de las pestañas de los navegadores google chrome o morzila, ya que poseen una especie de tab pequeña que sirve para agregar nuevas pestañas. es más o menos lo que deseo. Mi codigo solo crea las nuevas tabs pero a estas no se les puede editar el nombre ni mucho menos tienen elementos div asociados, aparte no tienen el botón con la "x" para eliminar o cerrar la pestaña.

Alguna ayuda que me puedan dar? se los agradeceria muchísimo.


PD: Cada elemento <li> posee un input debido a que el nombre de cada tab se guardara en una base de datos asi, a la hora de refrescar la pagina, el nombre que se haya editado va a aparecer en la tab.
Etiquetas: AJAX - Aporte - Array Javascript - CSS - CSS3 - Desarrollo - Formulario - Framework - HTML - HTML5 - Javascript - Javascript JSON - JQuery - Librería - Microsoft - MySQL - Navegador Web (Web Browser) - Opinión - PHP - PHP Avanzado - Pregunta - Query - Red - Sugerencia - Validaciones - Web - Webservices Votos: 0 - Respuestas: 4 - Vistas: 13 Compartir en: Google Facebook Twitter LinkedIn Link
 

Respuestas:

  • Fecha: 29-12-2017 02:24:40
    //Detecto el keyup para ver cuando den enter
    $('#inputTab1').on('keyup', function(e) {
        if(e.keyCode === 13) {
        		//Valor del imput
            var input1 = $(this).val();
            //Agrego el enlace antes del imput dentro de la li
            $("#inputTab1").before('<a class="active" id="Tab1" href="#test1">' + input1 +  '</a>');
            //Limpio el campo
            $("#inputTab1").val("");
            //Oculto el campo
            $("#inputTab1").attr("type", "hidden");
            
            //Reinicio el monitoreo del doble clic o siclo
            $("#Tab1").dblclick(function () {
            //Ya sabes el resto
              var texto = $("#Tab1").text();
              $("#Tab1").remove();
              $("#inputTab1").attr("type", "text");
              $("#inputTab1").val(texto);
              $("#inputTab1").focus();
            });
    
        }
    });
    
    function agregar(){
    	$(".pestanas").each(function(){
      	$(this).removeClass('active');
      });
      $(".contenidos").each(function(){
      	$(this).removeClass('active').css('display','none');
        
      })
      var id = Math.floor((Math.random() * 10000) + 1);
      var pesta = '<li class="tab col s3"><a class="pestanas active" id="Tab'+id+'" href="#test'+id+'">Nueva Tab<input type="hidden" name="tab2" value="New Tab" /></a></li>';
      var conte = '<div id="test'+id+'" class="col s12 contenidos active">Testo pestaña nueva '+id+'</div>';
      $("#tabControl").before(pesta);
      $("#tabs").after(conte);
    }
    
    


    MUESTRA

    Juega con eso para darle nuevas funcionalidades, la id es aleatoria ve si te sirve asi o crea tu propio algoritmo para las id y así evitar ids repetidas. Saludos
      Votos: 2 - Link respuesta
     
  • Fecha: 29-12-2017 05:44:10 el codigo no funciona al 100%, o sea, como hago para que el contenido de las tabs nuevas no se me repita en las tabs que ya existen?? Porque probando el condigo me di cuenta que el contenido de cada tab que se agrega nueva también se coloca en las tabs que ya existen, y eso no esta bien...me explico: cuando le doy al botón para agregar una nueva tab, esta se crea y tiene un div asociado que seria donde estara alojado el contenido de dicha tab, ese div actualmente tiene un texto que dice "Testo pestaña nueva + id", pero cuando reviso las tabs que ya estaban creadas con anterioridad el texto de la tab que se acaba de agregar tambien aparece alli...   Votos: -1 - Link respuesta
     
  • Fecha: 29-12-2017 06:15:18 Ya veo que leíste y analizaste el código.

    Pues si lees bien el codigo eso no esta ocurriendo, el problema esta en la asignacion de clases, es decir, si le das clic a una tab existente inmediatamente cuando creas ua tab nueva va a dar la ilusion de que el contenido de la nueva esta en las viejas tambien.

    Por el contrario si creas una tab nueva y le das clic primero a la tab n ueva y luego a las viejas esa ilusion desaparece.

    eso se resuelve reiniciando las tabs de materialize con cada agregado

    function agregar(){
    	$(".pestanas").each(function(){
      	$(this).removeClass('active');
      });
      $(".contenidos").each(function(){
      	$(this).removeClass('active').css('display','none');
        
      })
      var id = Math.floor((Math.random() * 10000) + 1);
      var pesta = '<li class="tab col s3"><a class="pestanas active" id="Tab'+id+'" href="#test'+id+'">Nueva Tab<input type="hidden" name="tab2" value="New Tab" /></a></li>';
      var conte = '<div id="test'+id+'" class="col s12 contenidos active">Testo pestaña nueva '+id+'</div>';
      $("#tabControl").before(pesta);
      $("#tabs").after(conte);
      $('ul.tabs').tabs();
    }
    


    MUESTRA

    te invito a que estudies mas de javascript y sobre todo indagar más sobre los frameworks que uses para así dar con soluciones más rápidamente a pequeños inconvenientes como este.

    Saludos
      Votos: 1 - Link respuesta
     
  • Fecha: 30-12-2017 07:58:15 si, tienes razón algunos elementos en materialize hay que reiniciarlos, como es el caso también de los elementos selects...Gracias por las sugerencias y el codigo!!   Votos: 0 - Link respuesta
     
Para participar activamente de la comunidad primero debes autenticarte, ingresa al sistema.Iniciar Sesión