Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

xtroino

Bootstrap tabs com php

Recommended Posts

Olá galera!

 

Preciso de criar com PHP e Bootstrap umas Tabs mas cujo conteúdo venha do BD.

Queria que numa determinada condição fossem inseridas  funções mas não estou a conseguir. Os dados das função aparecem sempre, fora das Tabs e não de acordo com as tabs selecionadas.

Alguém pode ajudar?

 

$var = $_GET['p'];
$tab_query = "SELECT * FROM tab1 INNER JOIN tab2 WHERE tab2.tab1id=tab1.tab1id AND  idtab = $var ORDER BY tab1.tab1id ASC";
$tab_result = mysqli_query($con, $tab_query)
or die("Error: ".mysqli_error($con));
$tab_menu = '';
$tab_content = '';
$i = 0;
while($row = mysqli_fetch_array($tab_result))
{
 if($i == 0)
 {
  $tab_menu .= '
   <li class="active"><a href="#'.$row["tab1id"].'" data-toggle="tab">'.$row["tab1"].'</a></li>
  ';
  $tab_content .= '
   <div id="'.$row["tab1id"].'" class="tab-pane fade in active">
  ';
 }
 else
 {
  $tab_menu .= '
   <li><a href="#'.$row["tab1id"].'" data-toggle="tab">'.$row["tab1"].'</a></li>
  ';
  $tab_content .= '<div id="'.$row["tab1id"].'" class="tab-pane fade">';
 }

 $tab3_query = "SELECT * FROM tab2 WHERE tab1id = '".$row["tab1id"]."' ";
 $tab3_result = mysqli_query($con, $tab3_query);
 while($sub_row = mysqli_fetch_array($tab3_result))
$cat=$row["tab1id"];

 {            
  if ($cat==1){
  $tab_content .= '<div class="col-md-12" style="margin-bottom:36px;">'.funcao1().'</div>';
  } else if ($cat==2)
  {
  $tab_content .= '<div class="col-md-12" style="margin-bottom:36px;">'.funcao2().'</div>';
  } else if ($cat==3)
  {
	$tab_content .='<div class="col-md-12" style="margin-bottom:36px;">'.funcao3().'</div>';
  }

  
 }

 $tab_content .= '<div style="clear:both"></div></div>';
 $i++;
}

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Vamos por partes.

Você já domina o conceito de Tabs do Bootstrap?

 

http://getbootstrap.com/components/#nav-tabs

 

Basicamente você precisa de um elemento cujo a 'data-toggle' seja tab:

data-toggle="tab"

E o 'href' desse cara é quem você aponta  (usando um # antes)

Exemplo completo:

<ul class="nav nav-tabs">
	<li class="nav active"><a href="#A" data-toggle="tab">A</a></li>
	<li class="nav"><a href="#B" data-toggle="tab">B</a></li>
	<li class="nav"><a href="#C" data-toggle="tab">C</a></li>
</ul>

 

Agora só criar os 'tab-content' que possuem um id:

<!-- Tab panes -->
<div class="tab-content">
	<div class="tab-pane fade in active" id="A">Content inside tab A</div>
	<div class="tab-pane fade" id="B">Content inside tab B</div>
	<div class="tab-pane fade" id="C">Content inside tab C</div>
</div>

 

Obviamente não podemos esquecer de de importar o CSS (de preferencia no HEAD), muito menos O JS (que faz tudo funcionar):

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
	<!-- Latest compiled and minified CSS -->
	<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

	<!-- Optional theme -->
	<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
</head>
<body>
  ...
  
  <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
</body>
</html>


 

Exemplo completo:

https://jsfiddle.net/dajyc658/

 

Após criar isso 'estaticamente esquecendo do PHP' e funcionar você pensa em PHP.

 

 

Obviamente pode ser um erro de JavaScript tambem.

nesse caso você precisa abrir o Console do seu browser:

 

Mozilla:

Ctrl + Shift + K

 

Google Chrome:

Ctrl + Shif + J

 

Veja se tem algum erro.

....

 

Após isso você tenta gerar dinamicamente os campos que gera estaticamente.

Compartilhar este post


Link para o post
Compartilhar em outros sites

gabrieldarezzo agradeço a resposta.

Não coloquei o código todo. 

Acontece que em html tudo funciona bem. Aqui o código todo:

$var = $_GET['p'];
$tab_query = "SELECT * FROM tab1 INNER JOIN tab2 WHERE tab2.tab1id=tab1.tab1id AND  idtab = $var ORDER BY tab1.tab1id ASC";
$tab_result = mysqli_query($con, $tab_query)
or die("Error: ".mysqli_error($con));
$tab_menu = '';
$tab_content = '';
$i = 0;
while($row = mysqli_fetch_array($tab_result))
{
 if($i == 0)
 {
  $tab_menu .= '
   <li class="active"><a href="#'.$row["tab1id"].'" data-toggle="tab">'.$row["tab1"].'</a></li>
  ';
  $tab_content .= '
   <div id="'.$row["tab1id"].'" class="tab-pane fade in active">
  ';
 }
 else
 {
  $tab_menu .= '
   <li><a href="#'.$row["tab1id"].'" data-toggle="tab">'.$row["tab1"].'</a></li>
  ';
  $tab_content .= '<div id="'.$row["tab1id"].'" class="tab-pane fade">';
 }

 $tab3_query = "SELECT * FROM tab2 WHERE tab1id = '".$row["tab1id"]."' ";
 $tab3_result = mysqli_query($con, $tab3_query);
 while($sub_row = mysqli_fetch_array($tab3_result))
$cat=$row["tab1id"];

 {            
  if ($cat==1){
  $tab_content .= '<div class="col-md-12" style="margin-bottom:36px;">teste 1</div>';
  } else if ($cat==2)
  {
  $tab_content .= '<div class="col-md-12" style="margin-bottom:36px;">teste 2</div>';
  } else if ($cat==3)
  {
	$tab_content .='<div class="col-md-12" style="margin-bottom:36px;">teste 3</div>';
  }
}

 $tab_content .= '<div style="clear:both"></div></div>';
 $i++;
}
   ...
     
     
    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="css/modern-business.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
...
     
     <div class="row">
		 <div class="col-lg-12">
               <br />
               <ul class="nav nav-tabs">
                <?php
                  echo $tab_menu;
                ?>
               </ul>
                  <div class="tab-content">
                    <br />
                    <?php
                    echo $tab_content;
                   ?>   
				   </div>
          </div>
	  </div>
  
 

Eu apenas quero substituir onde está teste 1 por uma função php, teste 2 por outra funcao, etc. Não sei se é possível

Obrigado pela ajuda.

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.