Tabs com jQuery, menu com abas e Ajax no jQuery

04jun08

Se você está procurando uma solução robusta e complexa de menu com abas (tabs), meu script certamente não é a solução. Mas então por quê eu cheguei a fazê-lo? Para suprir uma necessidade básica que o TABS do jQuery UI3 não atende.

Ao mínimo estranho alguém dizer isso né? Pois bem, se alguém ainda não conhece essa UI do jQuery vale a pena testá-la, ah, para um bom teste, abra a página de testes de abas com o Javascript do seu navegador desabilitado para ver o que acontece.

Simplesmente o conteúdo da Aba que deveria vir logo abaixo dela, não é carregado. E isso se explica porque este conteúdo é carregado de uma outra URL logo durante o carregamento da página e o DIV (onde entra o conteúdo) também é gerado dinamicamente, ou seja, sem JS posso te adiantar que teremos erro de layout no site. Para quem quiser testar: http://www.stilbuero.de/jquery/tabs_3/

Bom, a idéia aqui é criar um menu com abas superiores, que mesmo sem o JS ativo ele mantenha o seu layout correto, e ao menos, o conteúdo da primeira aba ativa seja carregado. Outra funcionalidade é que cada aba possa ter 2 classes independentes, uma para o estado Ativo e outra para o estado Inativo. Digo que são classes independentes para cada aba, justamente para você poder adicionar Imagens de Fundo diferentes em cada Tab. Além disso, você pode definir para cada aba, uma mensagem de “Loading” customizada, ou usar a mensagem padrão definida pelo html, para o carregamento das abas do menu em questão.

Vamos ao código:

XHTML:

<div class=”tab_menu_container”>
<ul id=”tab_menu_1″ class=”tabs-nav” attrLoadingMessage=”Carregando…”>
<li class=”tab_cama_on”><a href=”www.exemplo.com/1″><span>Cama</span></a></li>
<li class=”tab_mesa_off”><a href=”www.exemplo.com/2″ attrLoadingMessage=”Carregando Mesa…”><span>Mesa</span></a></li>
<li class=”tab_banho_off”><a href=”www.exemplo.com/3″><span>Banho</span></a></li>
</ul>
<div class=”tabs-container”></div>
</div>

JAVASCRIPT – jQuery

$().ready(function() {

$(“.tabs-nav li a”).livequery(‘click’,function() {

/* Set Variables */
var URL = $(this).attr(‘href’);

var TabMenu = $(this).parents(“li:first”).parents(“ul:first”).attr(‘id’);
var CurrentTab = $(this).parents(“li:first”);
var ContentArea = $(this).parents(“li:first”).parents(“ul:first”).nextAll(“div:first”);
var LoadingMessageDefault = $(this).parents(“li:first”).parents(“ul:first”).attr(‘attrLoadingMessage’);
var LoadingMessageCustom = $(this).attr(‘attrLoadingMessage’);

/* Set Up the Loading Message */
if (typeof(LoadingMessageCustom) == “undefined” || LoadingMessageCustom == null)
{
var LoadingMessage = LoadingMessageDefault;
}
else
{
var LoadingMessage = LoadingMessageCustom;
}

var LoadingContent = ‘<div class=”tabs-loading”>’ + LoadingMessage + ‘</div>’;

/* Set All Tabs to the Inactive State */
$(“#” + TabMenu + ” > *”).each(function() {
var ActiveClass = $(this).attr(‘class’).replace(‘_off’,”_on”);
var InactiveClass = $(this).attr(‘class’).replace(‘_on’,”_off”);
$(this).removeClass(ActiveClass);
$(this).addClass(InactiveClass);
});

/* Set the Current Tab to the Active State */
var ActiveClass = CurrentTab.attr(‘class’).replace(‘_off’,”_on”);
var InactiveClass = CurrentTab.attr(‘class’).replace(‘_on’,”_off”);
CurrentTab.removeClass(InactiveClass);
CurrentTab.addClass(ActiveClass);

$.ajax({url: URL,
data: URL,
beforeSend: function() {
ContentArea.html(LoadingContent);
},
success: function(response){
ContentArea.html(response);
},
error: function(data) {
alert(‘erro…’);
},
type: “GET”,
dataType: “html”
});

return false;
});

});

CSS:

/* CSS FROM http://stilbuero.de/jquery/tabs_3/ */
/* Caution! Ensure accessibility in print and other media types… */
@media projection, screen { /* Use class for showing/hiding tab content, so that visibility can be better controlled in different media types… */
.tabs-hide {
display: none;
}
}

/* Hide useless elements in print layouts… */
@media print {
.tabs-nav {
display: none;
}
}

/* Skin */
.tabs-nav {
list-style: none;
margin: 0;
padding: 0px;
}
.tabs-nav:after { /* clearing without presentational markup, IE gets extra treatment */
display: block;
clear: both;
content: ” “;
}
.tabs-nav li {
border: 1px solid #ccc; /* TAB ITEM */
border-bottom: 0px;
float: left;
margin: 0 0 0 0px;
min-width: 84px; /* be nice to Opera */
}
.tabs-nav a, .tabs-nav a span {
display: block;
padding: 0 10px;
background: url(tab.png) no-repeat;
}
.tabs-nav a {
position: relative;
top: 1px;
z-index: 2;
padding-left: 0;
color: #000 !important;
font-size: 12px;
font-weight: bold !important;
line-height: 1.2;
text-align: center;
text-decoration: none !important;
white-space: nowrap; /* required in IE 6 */
}
.tabs-nav .tabs-selected a {
color: #000;
}
.tabs-nav .tabs-selected a, .tabs-nav a:hover, .tabs-nav a:focus, .tabs-nav a:active {
background-position: 100% -150px;
outline: 0; /* prevent dotted border in Firefox */
}
.tabs-nav a, .tabs-nav .tabs-disabled a:hover, .tabs-nav .tabs-disabled a:focus, .tabs-nav .tabs-disabled a:active {
background-position: 100% -100px;
}
.tabs-nav a span {
width: 64px; /* IE 6 treats width as min-width */
min-width: 64px;
height: 18px; /* IE 6 treats height as min-height */
min-height: 18px;
padding-top: 6px;
padding-right: 0;
}
*>.tabs-nav a span { /* hide from IE 6 */
width: auto;
height: auto;
}
.tabs-nav .tabs-selected a span {
padding-top: 7px;
}
.tabs-nav .tabs-selected a span, .tabs-nav a:hover span, .tabs-nav a:focus span, .tabs-nav a:active span {
background-position: 0 -50px;
}
.tabs-nav a span, .tabs-nav .tabs-disabled a:hover span, .tabs-nav .tabs-disabled a:focus span, .tabs-nav .tabs-disabled a:active span {
background-position: 0 0;
}
.tabs-nav .tabs-selected a:link, .tabs-nav .tabs-selected a:visited, .tabs-nav .tabs-disabled a:link, .tabs-nav .tabs-disabled a:visited { /* @ Opera, use pseudo classes otherwise it confuses cursor… */
cursor: text;
}
.tabs-nav a:hover, .tabs-nav a:focus, .tabs-nav a:active { /* @ Opera, we need to be explicit again here now… */
cursor: pointer;
}
.tabs-nav .tabs-disabled {
opacity: .4;
}
.tabs-container {
border: 1px solid #ccc;
padding: 1em 8px;
background: #fff; /* declare background color for container to avoid distorted fonts in IE while fading */
min-height: 150px;
}
.tabs-loading {
padding: 0 0 0 20px;
background: url(/images/loading.uitabs.gif) no-repeat 0 50%;
}

/* Tabs Customization – ready to use image backgrounds to each tab */
.tabs-nav .tab_cama_on {background-color: #FF6600; border:1px solid #FF6600;}
.tabs-nav .tab_mesa_on {background-color: #FF6600; border:1px solid #FF6600;}
.tabs-nav .tab_banho_on {background-color: #FF6600; border:1px solid #FF6600;}

.tabs-nav .tab_cama_off {background-color: #FF9966; border:1px solid #FF9966;}
.tabs-nav .tab_mesa_off {background-color: #FF9966; border:1px solid #FF9966;}
.tabs-nav .tab_banho_off {background-color: #FF9966; border:1px solid #FF9966;}



9 Responses to “Tabs com jQuery, menu com abas e Ajax no jQuery”

  1. tenho um blog.

    e la coloquei um menu com abas.

    não sou expert em programação web em geral.

    quero colocar nesses menu com abas abas inativas.
    vc clica na primeira aba e aparece outras 2 abas tipo isso ok ?

    tem como me ajudar nisso ?

    estou procurando na internet e não acho nada a respeiro e vi esses seus codigos.
    e não sei como implementar rs…

    me ajuda ?

    obrigado.

    • Então o seu menu terá 3 abas, sendo 1 ativa (por padrão) e 2 inativas, correto? Qual parte do código você não entendeu? Para que eu posa ajudá-lo.

  2. detalhe.
    cada aba eu posso colocar conteudos.

    alem disso.

    é possivel colocar gadget nas postagens ? de elemento java.

    é possivel colocar gadget dentro das abas ?

    obrigado.

    fico esperando sua resposta.
    🙂

    • Dentro de cada aba, o que é carregado é um outro HTML, onde você pode embedar o conteúdo que desejar, incluindo gadgets/widgets flash, js, flex, air, etc…

  3. Cara como disse não entendo praticamente nada de programação…
    eu venho pesquisando e dando uma estudada pra ver se entendo um pouquinho
    mais para tentar aplicar as minhas duvidas no meu blog !

    eu não consigo de forma alguma colocar gadget dentro das abas criadas. tipo
    ja é uma gadget a aba certo ?
    quero colocar outra dentro dela.
    alem disso quero colocar uma ou mais abas inativas dentro de cada aba.
    eu entendo que se eu conseguir colocar abas inativas dentro de outra aba ja
    soluciona os dois problemas que tenho !
    então se puder me auxiliar nisso ficarei eternamente grato !🙂
    Obrigado

    só uma ideia !!!
    eu não sei onde aplico esse codigo ok ?
    me ajuda !!!

    se puder via msn paulodududuedu@hotmail.com

  4. explicando melhor.
    vamos supor.

    tenho 3 abas.
    bem vindo | Utensilios | Reportagens

    Quero colocar mais 2 abas inativas em Utensilios e 3 em reportagens ficando assim

    “Aba inativa em utensilios apos clique do mouse.”
    Bem vindo | Utensilios | Reportagens_________________________________
    Aba 1 | aba 2

    Se clicar em reportagens.
    Bem vindo | Utensilios | Reportagem__________________________________
    Rep 1 | rep 2 | rep 3

    consegui explicar ?

  5. esqueceu de mim amigão ???
    me ajuda plis !

    rs…

    abraços

  6. Amigo olha o que aconteceu.

    Fiz assim.

    coloquei o codigo .js que vc forneceu no site com o nome de tabble
    http://javascripthost.com/s1/bin/tabble.js

    coloquei o codigo css antes de
    /* Profile.

    e codigo atml logo apos isso

    ele me retorno esse erro.
    Mensagem de erro em XML: Open quote is expected for attribute “{1}” associated with an element type “class”.

    me ajuda ?
    vi que seu menu tem 3 abas sendo duas inativas assim como a minha que tenho
    mas as abas são independente assim podendo colocar o conteúdo que estiver afim até imagens de fundo nela.

    como expliquei mais acima.
    quero colocar outras abas dentro dessas ja existentes.

    esperando sua resposta.

  7. vlw pela resposta.

    eu ja tinha achado aquele exemplo !
    mas nem o seu nem aquele exemplo eu consegui implementar.

    fico pensando se é por causa do nome em que salvei o arquivo java.
    se é a ahlm que referencia o codigo que não consigo configurar…
    entre outras coisas !!!

    estou para desisti !
    pois não encontrei ninguem que possa me ajudar !😦

    mas vlw pela atenção !


Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s


%d blogueiros gostam disto: