1

Me he guiado con un ejemplo funcional que me ha dado Javi Mollá, por lo poco que entendí he realizado cambios en el código.

Mi idea es generar las pestañas de acuerdo con la cantidad de listas de canales de url que existen separadas por comas y al mismo tiempo agregue el canal de la url en cada iframe, eso funciona pero no adecuadamente, no se genera al orden deseado.

Opciones del tabs

        <ul class="resp-tabs-list">
            <li class="resp-tab-item resp-tab-active"><span data-target="#1">Opción 1</span></li>
            <li class="resp-tab-item"><span data-target="#2">Opción 2</span></li>
            <li class="resp-tab-item"><span data-target="#3">Opción 3</span></li>
        </ul>

Contenedor:

            <div id="1" class="resp-tab-content resp-tab-content-active">
                <div class="tab-content">
                    <!-- Div contenedor del iframe -->
                    <div style="position:relative;width:100%;display:inline-block;"><iframe src="" allowfullscreen style="border:none;position:absolute;top:0;left:0;width:100%;height:100%;"></iframe></div>
                </div>
            </div>

Este es mi código PHP, que me genera el HTML.

<div class="container-tabs">
  <div id="horizontalTab" style="display: block; margin: 0px; width: 100%;">
    <ul class="resp-tabs-list">
<?php
$list_channel = "http://www.example.com/channel/1/,http://www.example.com/channel/2/,https://www.youtube.com/watch?v=ZdP0KM49IVk";
  $channels = [];
  for ($indexchannel = 0; $indexchannel < 5; $indexchannel++) { 
    $channels[] = array(
      'id' => $indexchannel,
      'urls' => $list_channel
    );
  }
?>

<?php
for ($indexchannel = 0; $indexchannel < count($channels); $indexchannel++) {
  $urls = explode(',', $channels[$indexchannel]['urls']);
  for ($indexUrl = 0; $indexUrl < count($urls); $indexUrl++) {
?>
        <li class="resp-tab-item resp-tab-active"><span data-target="#<?=$indexchannel?>">Option <?=$indexchannel?></span></li>
    <div id="<?=$indexchannel?>" class="resp-tab-content resp-tab-content-active">
    <div class="tab-content">
      <div style="position:relative;width:100%;display:inline-block;">
        <iframe src="<?=$urls[$indexUrl]?>" allowfullscreen style="border:none;position:absolute;top:0;left:0;width:100%;height:100%;"></iframe>
      </div>
    </div>
    </div>
<?php
  }
}
?>
    </ul>
  </div>
</div>

En el siguiente enlace se puede visualizar los resultados: https://ideone.com/ygTn7j

El diseño que deseo generar con PHP:

jQuery(document).ready(function(){
  $(".resp-tab-content").hide();
  $("ul.resp-tabs-list li:first").addClass("active").show();
  /*Folling line changed to support multi tabs*/
  $(".resp-tabs-container .resp-tab-content:first-child").show();
  $("ul.resp-tabs-list span").click(function(){
  //$("ul.resp-tabs-list a").click(function(){
    $("ul.resp-tabs-list li").removeClass("resp-tab-active");
    $(this).parent("li").addClass("resp-tab-active");
    /*Following line removed to support multi tabs
    $(".resp-tab-content").hide();
    */
    var activeTab = $(this).attr("data-target");
    //var activeTab = $(this).attr("href");
    /*Folliwng line added to support multi tabs*/
    $(activeTab).siblings(".resp-tab-content").hide();
    $(activeTab).fadeIn();
    return false;
  });
});
ul.resp-tabs-list {
    list-style: none;
    background: none;
    margin: 0 auto;
    padding: 0;
    display: flex;
    border-bottom: solid 1px #EAEAEA;
}

.resp-tab-item {
    color: #343a4e;
    font-size: .875em;
    cursor: pointer;
    /*padding: 0 .6em .5em;  MOVE THIS TO THE A Style*/
    display: inline-block;
    list-style: none;
    /*float: left; - Don't need this with Flexbox*/
    border-bottom: solid 1px #FFFFFF;
    outline: none;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    text-transform: capitalize;
}

.resp-tab-item span, .resp-tab-item span:visited, .resp-tab-item span:active, .resp-tab-item span:hover {
  text-decoration:none;
  color: #343a4e; 
  list-style: none;
  padding: 0 .6em .5em; /*Move from LI style*/
  display:inline-block; /*Makes vertical padding meaningful*/
}

.resp-tab-active {
    text-shadow: none;
    color: #1ca0de;
    border-bottom: solid 1px #3E9CCA;
    /*padding-bottom: .5em;*/
}

.resp-tabs-container {
    padding: 0px;
    clear: left;
    border-top: none;
    background: none;
}

.tab-content {
    margin: 1em 0 0 0;
    border-bottom: solid 1px #EAEAEA;
    padding-bottom: 1em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


	<div class="container-tabs">
		<div id="horizontalTab" style="display: block; margin: 0px; width: 100%;">
			<ul class="resp-tabs-list">
				<li class="resp-tab-item resp-tab-active"><span data-target="#1">Option 1</span></li>
				<li class="resp-tab-item"><span data-target="#2">Option 2</span></li>
				<li class="resp-tab-item"><span data-target="#3">Option 3</span></li>
			</ul>
			<div class="resp-tabs-container">
				<div id="1" class="resp-tab-content resp-tab-content-active">
					<div class="tab-content">
						<div style="position:relative;width:100%;display:inline-block;"><iframe src="" allowfullscreen style="border:none;position:absolute;top:0;left:0;width:100%;height:100%;"></iframe></div>
					</div>
				</div>
				<div id="2" class="resp-tab-content">
					<div class="tab-content">
						<div style="position:relative;width:100%;display:inline-block;"><iframe src="" allowfullscreen style="border:none;position:absolute;top:0;left:0;width:100%;height:100%;"></iframe></div>
					</div>
				</div>
				<div id="3" class="resp-tab-content">
					<div class="tab-content">
						<div style="position:relative;width:100%;display:inline-block;"><iframe src="" allowfullscreen style="border:none;position:absolute;top:0;left:0;width:100%;height:100%;"></iframe></div>
					</div>
				</div>
			</div>
		</div>
	</div>

1 respuesta 1

2
$urls = explode(',', $channels[$indexchannel]['urls']);

En primera, el explode, lo tienes que hacer a la cadena donde tienes tus urls, eso de da como resultado un arreglo que strings que las guardaremos en $chanels

 $channels = explode(',',  $list_channel);

despues, tendremos que generar primero solo los elementos li, ya que de la forma en que lo estabas haciendo aparecerian intercalados

        <ul class="resp-tabs-list">
        <?php
            foreach ($channels as $key => $value)
            {   
        ?>
            <li class="resp-tab-item resp-tab-active"><span data-target="#<?echo $key?>">Option <?echo $key?></span></li>
        <?php
            }            
        ?>
    </ul>

y generamos los divs de la misma manera, y con un poco de magia e imaginacion!! vualá!!

https://ideone.com/7aoZFP

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.