← Desenvolvimento

Ajuda com TABS do DynamicDrive

Lida 4136 vezes

Offline
T

Thomato 
Membro
Mensagens 4125 Gostos 3
Feedback +2

Troféus totais: 28
Trófeus: (Ver todos)
Apple User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3 Level 2

Bom dia.
Estou a tentar usar estas tabs (http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/).

No entanto ainda não consegui perceber como é que consigo fazer com que todas as tabs chamem um conteúdo diferente de uma DIV escondida, como acontece com a primeira tab do primeiro exemplo.

No exemplo que eles dão, a primeira tab chama conteúdo de uma DIV e os restantes de um ficheiro externo.
Eu quero que todas as tabs chamem conteúdos de DIVs.

Alguém me podia ajudar? :)
Offline

STronic 
Elite
Mensagens 546 Gostos 8
Feedback +5

Troféus totais: 30
Trófeus: (Ver todos)
Mobile User Search Apple User Super Combination Combination Topic Starter Poll Voter Level 5 Level 4 Level 3

Agora nao te consigo ver ao certo, mas tenho isso implementado numa intranet..

A primeira vista acho que basta meter o href="nome_da_div" ..
Se nao conseguires diz que depois passo-te aquilo que tenho ;)
Offline
N

Nazgulled 
Membro
Mensagens 552 Gostos 0
Troféus totais: 29
Trófeus: (Ver todos)
Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Poll Starter Level 5 Level 4 Level 3 Level 2

Recomendo que uses jQuery, fazes isso facilmente sem grandes chatices :)
Offline
T

Thomato 
Membro
Mensagens 4125 Gostos 3
Feedback +2

Troféus totais: 28
Trófeus: (Ver todos)
Apple User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3 Level 2

Citação de: STronic em 26/Set/2010 13:59
Agora nao te consigo ver ao certo, mas tenho isso implementado numa intranet..

A primeira vista acho que basta meter o href="nome_da_div" ..
Se nao conseguires diz que depois passo-te aquilo que tenho ;)
Já tinha tentado, o que acontece é que me carrega todas as tabs outra vez dentro dessa tab e por baixo disso tudo carrega a DIV correcta :|


O que está a verde, no início, são as tabs todas repetidas, o que está a verde em baixo é algo que já está fora do código.
Pelo tipo de erro, pensei que fosse alguma TAG mal fechada, mas parece-me estar tudo bem :|

Citação de: Nazgulled em 26/Set/2010 14:53
Recomendo que uses jQuery, fazes isso facilmente sem grandes chatices :)
Este script é mesmo o que preciso em termos de pormenores. Mas obrigado pela sugestão ;)
Offline

STronic 
Elite
Mensagens 546 Gostos 8
Feedback +5

Troféus totais: 30
Trófeus: (Ver todos)
Mobile User Search Apple User Super Combination Combination Topic Starter Poll Voter Level 5 Level 4 Level 3

Afinal o que tenho é mesmo JQuery

basta:
Código: (php) [Seleccione]
 <div id="tabs">
          
           <ul>
               <li><a href="#tabs-1">Tab1</a></li>
               <li><a href="#tabs-2">Tab2</a></li>
               <li><a href="#tabs-3">Tab3</a></li>
            </ul>
                    
            <div id="tabs-1">
            Conteudo Tab1
            </div>

            <div id="tabs-2">
            Conteudo Tab2
            </div>

            <div id="tabs-3">
            Conteudo Tab3
            </div>
</div>


Fácil ;) http://docs.jquery.com/UI/Tabs
Offline
T

Thomato 
Membro
Mensagens 4125 Gostos 3
Feedback +2

Troféus totais: 28
Trófeus: (Ver todos)
Apple User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3 Level 2

Não percebo nada de jQuery, mas diz-me.

Código: [Seleccione]
<script type="text/javascript" src="jquery-1.2.2.pack.js"></script>
 
 <div id="tabs">
         
            <ul>
                <li><a href="#tabs-1">Tab1</a></li>
                <li><a href="#tabs-2">Tab2</a></li>
                <li><a href="#tabs-3">Tab3</a></li>
            </ul>
                   
            <div id="tabs-1">
            Conteudo Tab1
            </div>

            <div id="tabs-2">
            Conteudo Tab2
            </div>

            <div id="tabs-3">
            Conteudo Tab3
            </div>
</div>Era suposto isto funcionar?  :-k
Offline
N

Nazgulled 
Membro
Mensagens 552 Gostos 0
Troféus totais: 29
Trófeus: (Ver todos)
Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Poll Starter Level 5 Level 4 Level 3 Level 2

Não, isso não chega... Falta fazer:
Código: [Seleccione]
$('#tabs').tabs();
Citação de: Thomato em 26/Set/2010 15:28
Este script é mesmo o que preciso em termos de pormenores. Mas obrigado pela sugestão ;)
Queres ser mais especifico? Pode ser que as tabs do jQuery faça exactamente o mesmo que precisas...
Offline
T

Thomato 
Membro
Mensagens 4125 Gostos 3
Feedback +2

Troféus totais: 28
Trófeus: (Ver todos)
Apple User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3 Level 2

Citação de: Nazgulled em 26/Set/2010 21:37
Não, isso não chega... Falta fazer:
Código: [Seleccione]
$('#tabs').tabs();
E esse código adiciono onde?  :-#

Citação de: Nazgulled em 26/Set/2010 21:37
Queres ser mais especifico? Pode ser que as tabs do jQuery faça exactamente o mesmo que precisas...
Cada TAB ter um link directo que eu possa introduzir no browser e quando abrir o site, abrir logo nessa tab e guardar a tab activa num cookie ou algo do género. Tudo o que as do www.sapo.pt fazem :)
Offline

STronic 
Elite
Mensagens 546 Gostos 8
Feedback +5

Troféus totais: 30
Trófeus: (Ver todos)
Mobile User Search Apple User Super Combination Combination Topic Starter Poll Voter Level 5 Level 4 Level 3

Citação de: Thomato em 26/Set/2010 21:44
E esse código adiciono onde?  :-#

Adicionas a seguir ao carregamento do .js  .. no meu caso tenho um custom.js para todo o jQuery que precise...
tens tudo na documentação...


agora ser queres cookies e tal.... acho que tens que ler muito ainda ;)
Offline
N

Nazgulled 
Membro
Mensagens 552 Gostos 0
Troféus totais: 29
Trófeus: (Ver todos)
Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Poll Starter Level 5 Level 4 Level 3 Level 2

Citação de: Thomato em 26/Set/2010 21:44
Cada TAB ter um link directo que eu possa introduzir no browser
As tabs to sapo não fazem isso, o conteúdo de cada tab está na próprina página. Mas podes fazer isso se quiseres, ter por exemplo tab1.html, tab2.html, tab3.html e carregar o conteúdo dai. Mas nesse caso isso será feito por Ajax e as tabs só serão carregadas quando as seleccionares.

Citação de: Thomato em 26/Set/2010 21:44
e quando abrir o site, abrir logo nessa tab
Não percebi... Abrir logo que tab? Por omissão é aberta na primeira mas podes definir a que queres que abra por omissão.

Citação de: Thomato em 26/Set/2010 21:44
e guardar a tab activa num cookie ou algo do género.
Usando o mesmo parâmetro que usas para escolher a tab que queres que abra por omissão, podes fazer isso dos cookies. Mas já tens de ser tu a programar (mas é simples com jQuery). Ou seja, sempre que uma tab for aberta, guardar no cookie o indicie dessa tab, depois ao carregar a página basta definires o índice da tab a abrir por omissão para o valor lido do cookie.

Se estiveres com problemas, explica o que queres exactamente...
Offline
T

Thomato 
Membro
Mensagens 4125 Gostos 3
Feedback +2

Troféus totais: 28
Trófeus: (Ver todos)
Apple User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3 Level 2

Citação de: Nazgulled em 27/Set/2010 00:42
As tabs to sapo não fazem isso, o conteúdo de cada tab está na próprina página. Mas podes fazer isso se quiseres, ter por exemplo tab1.html, tab2.html, tab3.html e carregar o conteúdo dai. Mas nesse caso isso será feito por Ajax e as tabs só serão carregadas quando as seleccionares.
Não é nada disso. Eu referia-me a, por exemplo, entrares em http://www.sapo.pt/noticias/economia e abrir logo a tab "Economia".

Por isso é que queria usar o do Dynamic Drive, porque já tem tudo o que preciso.

Offline
N

Nazgulled 
Membro
Mensagens 552 Gostos 0
Troféus totais: 29
Trófeus: (Ver todos)
Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Poll Starter Level 5 Level 4 Level 3 Level 2

Também podes fazer isso com as tabs do jQuery UI. Existe uma opção para definires o índice da tab que queres abrir, exemplo:

Código: [Seleccione]
$('#tabs').tabs({ selected: <index> });
Só tens de fazer a parte que interpreta o URL e definir o índice a abrir numa variável, posteriormente usar essa variável como índice no "selected".

Páginas: 1

Posts relacionados

Conversa Geral

[ajuda] Internet Explorer 7 - Tabs

bfms

SEO

Tabs e Slides

Carlos Gandra

WordPress

Código para colocar nas tabs da sidebar

n
nandotx