Publicado em 23 de fev.

Adicionando Aba e conteúdo dinamicamente

Pessoal,

Preciso de ajuda com Tabs Dinâmicas.

Esse é o meu código:

<?php require_once('Connections/conecta.php')?>
<?php

// A sessão precisa ser iniciada em cada página diferente
if (!isset($_SESSION)) session_start();
// Verifica se não há a variável da sessão que identifica o usuário

if (!isset($_SESSION['UsuarioID'])) {
 // Destrói a sessão por segurança
 session_destroy();
 // Redireciona o visitante de volta pro login
 header("Location: index.php"); exit;
}
?>
<?php
 //Verifica se existe conexão com bd, caso não tenta criar uma nova
	//Porta, usuário, senha
 $conexao = mysql_connect("localhost","root","123pig")
	//Caso não consiga conectar mostra a mensagem de erro mostrada na conexão
 or die("Erro na conexão com banco de dados");
 //Seleciona o banco de dados
	$select_db = mysql_select_db("fimss");
 //Abaixo atribuímos os valores provenientes do formulário pelo método POST
 $host_servidor = mysql_real_escape_string($_POST['host_servidor']);
	$id_solic = mysql_real_escape_string($_POST['id_solic']);
	//String com consulta SQL da inserção
 $string_sql = "SELECT host_servidor FROM tb_servidores";
	//Realiza a consulta
 mysql_query($string_sql,$conexao);
	$resultado = mysql_query($string_sql, $conexao) or die(mysql_error());
	$row_resultado = mysql_fetch_assoc($resultado);
	$totalRows_resultado = mysql_num_rows($resultado);
	//Fecha conexão com banco de dados
	mysql_close($conexao);
?>
<?php
	//Abrindo conexão com o banco para efetuar a query da tabela servidores
	mysql_select_db($database_conecta, $conecta);
	$query_menu_servidor = "SELECT `host_servidor` FROM `tb_servidores` WHERE (`id_solic` = '". $id_solic ."')";
	$menu_servidor = mysql_query($query_menu_servidor, $conecta) or die(mysql_error());
	$row_menu_servidor = mysql_fetch_assoc($menu_servidor);
	$totalRows_menu_servidor = mysql_num_rows($menu_servidor);
	//Fecha conexão com banco de dados
	mysql_close($conecta);
?>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>.:: COTI Central de Operacoes de TI</title>

<script src="js/jqueryUI/external/jquery/jquery.js"></script>
<script src="js/jqueryUI/jquery-ui.js"></script>
<link href="js/jqueryUI/jquery-ui.css" rel="stylesheet">

<style type="text/css">
body {

	font: 70%/1.4 Verdana, Arial, Helvetica, sans-serif;
	background: #666;
	margin: 0;
	padding: 0;
	color: #000;
}
.container {
	width: 1200px;
	background: #FFFFFF;
	margin: 0 auto;
}
.header {
	background: #FFFFFF;
}
.content {
	padding: 0px 0;
	background: #FFFFFF;
	height:400px;
	width:600px;

}
.footer {
	padding: 1px 0;
	background: #F3F3F3;
	text-align:left
}
.fltrt {
	float: right;
	margin-left: 8px;
}
.fltlft {
	float: left;
	margin-right: 8px;
}
.clearfloat {
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}

ul{

	padding:0;
	margin:0
}

li{

	list-style:none;
}
#menu{
	width:1200px;
}

#menu ul{

	background:#F3F3F3;
	height:20px;
	position:relative;
	padding:0 5px;
	border:1px dotted #aaaaaa;
	top:-2px;
}

#menu li{

	float:left;
	color:#F3F3F3;
}

#menu a,#menu a:visited{

	font-size:11px;
	display:block;
	width:20px;
	color:#333;
	font-weight:normal;
	padding:2px 45px 10px 0;
	text-decoration:none;
}

#menu a:hover{

	text-decoration:none;
	}

#menu li:hover > a{

	font-weight:normal;
	color:#FFF;
	background:#1A4876;
	}

#menu ul ul{

	width:100px;
	display:none;
	position:absolute;
	top:17px;
	height:auto;
	padding:0;
	}

#menu ul ul a,#menu ul ul a:visited{

	color:#333;
	width:100px;
	font-size:11px;
	padding:0px 0px;
	}

#menu ul ul li{

	clear:both;
	background:#FFFFFF;
	width:100px;
	}

#menu ul ul li:hover > a{

	clear:both;
	background:#F3F3F3;
	}

#menu li ul {

z-index: 1;
}

#tabs {
	width:1190px;
	height:300px;
	margin-top:-29px;
	border:dash;
}

</style>
</head>
<body>

<div class="container">

	<div class="header"><a href="#"><img src="images/header.jpg" alt="logo_net" name="logo_net" width="1200" height="29" id="logo_net" style="background: #C6D580; display:block;" /></a>
 <div id="botao_sair"><div style="position: absolute; margin-left:80px; margin-top: -24px; width:57px; height: 20px; left: 1155px; top: 29px;">
 <form name="botao_sair" method="post" action="http://localhost/sm/index.php">
 <input type="submit" name="botao_sair" id="botao_sair_2" value="Sair">
 </form>
 </div>
 </div>
	<!--DIV Menu CSS-->
	<div id="menu">
 <ul>
 <li>
 <a id="fimss" style="width:0px; height:5px;" href="">Fimss</a>
 <ul>
 <li>
 <a id="novo_fimss" title="Criar um novo FIMSS" href="[http://localhost/sm/dados_iniciais.php](http://localhost/sm/dados_iniciais.php)">Novo Fimss</a>
 </li>
 <li>
 <a href="">Pesquisar Fimss</a>
 </li>
 <li>
 <a href="">Excluir Fimss</a>
 </li>
 </ul>
 </li>
 <li>
 <a id="monitor" style="width:7px; height:5px;" href="">Monitor</a>
 <ul>
 <li>
 <a href="">Incluir Monitor</a>
 </li>
 <li>
 <a href="">Alterar Monitor</a>
 </li>
 <li>
 <a href="">Excluir Monitor</a>
 </li>
 </ul>
 </li>
 <li>
 <a style="width:21px; height:5px;" id="requisitos" href="">Requisitos</a>
 <ul>
 <li>
 <a href="">Banco de Dados</a>
 </li>
 <li>
 <a href="">Unix</a>
 </li>
 <li>
 <a href="">Windows</a>
 </li>
 <li>
 <a href="">SOA</a>
 </li>
 </ul>
 </li>
 </ul>
	</div>
	</div>
<br>
<br>
	<!--DIV Content-->
	<div class="content">
 <div id="tabs">
 <?php
 do {
 ?>
 <ul>
 <li><a href="#tabs-<?php echo $row_menu_servidor['host_servidor']?>"><?php echo $row_menu_servidor['host_servidor']?></a></li>
 <!--DIV Conteúdo da DIV tabs-->
 <div id="tabs-ndcingmgm001">
 <div id="id_solic"><div style="position: absolute; margin-left:10px; margin-top:-10px; width:100px; height: 10;"><br/>
 <h4>ID Solicitação<br>
 <form name="form1" method="post" action="">
 <input name="id_solic" id="id_solic" type="text" value="<?php echo $_POST['id_solic'];?>" size="5" readonly="readonly">
 <br><br>
 </form>
 </div>
 </div>
 </div>
 <?php
 } while ($row_menu_servidor = mysql_fetch_assoc($menu_servidor));
 $rows = mysql_num_rows($menu_servidor);
 if($rows > 0) {
 mysql_data_seek($menu_servidor, 0);
 $row_menu_servidor = mysql_fetch_assoc($menu_servidor);
 }
 ?>
 </ul>

 <div id="tabs-netpron10">
 TESTE1
 </div>
 <div id="tabs-ndcingmgm002">
 TESTE
 </div>
 </div>
	</div>
<div class="footer"><div style="position: absolute; width:1200px; height:50;"></div>
<div id="rodape"><b style="font-size: 8pt;">Usuário:</b> <?php echo $_SESSION['UsuarioNome'];?>
</div>
</div>
</body>
</html>

<script>
jQuery(document).ready(function($){
	$("#tabs").tabs();
});
$(document).ready(function(){

 $("#menu li a").mouseover(function(){
 var index = $("#menu li a").index(this);
 $("#menu li").eq(index).children("ul").slideDown();

 if($(this).siblings('ul').size() > 0){
 return false;
 }
 });

 $("#menu li").mouseleave(function(){
 var index = $("#menu li").index(this);
 $("#menu li").eq(index).children("ul").slideUp();
 });
});

$("#tabs a").click(function( e ){
e.preventDefault();
var href= $( this ).attr("href");
$("#tabs-1").load( href +" #tabs-1");
});

var total = $(".tabs-1 ul").size();
$(".tabs-1").text(total);

var contador = 0;

function createElement(index){
 return '<div class="filho">Div '+index+'</div>';
}

function addDiv(){
 $("#container").append(createElement(contador++));
}

$("#bt_add").click(addDiv);

</script>

<?php
mysql_free_result($menu_servidor);
?>

Na DIV #tabs eu estou passando o Href como um POST, nome do servidor e estou pedindo para ele abrir a quantidade de abas de acordo com o resultado da query.

O meu problema é que eu preciso fazer o mesmo com o conteúdo dessas abas.

Na <div id="tabs-ndcingmgm001">, ao ínvés de ser o nome do servidor (ndcingmgm001) deveria ser uma varivável ou id igual ao que foi criado para o href da DIV #tabs.

Eu preciso que o ID das divs sejam dinâmicos ao carregar a página de acordo com o resultado da query.

Espero ter explicado de forma que todos entendam.

Obrigado.

Aguardo uma resposta.

Discussão (1)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Carregando comentários...