Ir para conteúdo
Fórum Script Brasil
  • 0

Como usa o tabSwitch?


lucas1407

Pergunta

2 respostass a esta questão

Posts Recomendados

  • 0

com o código do tabswitch e do jquery linkados na sua pagina crie as div's tanto para o menu quanto para o conteúdo a ser exibido seja texto ou imagem sendo que cada div que contenha os conteudos a serem exibidos devem ter a mesma classe use claro uma div com overflow: hidden; para esconder o que não deve ser exibido e comece a programar em jquery para fazer os efeitos:

<html>

<head>

<script>

$(function(){

$('.meuconteudo').tabSwitch('create', {

type: 'slide',

height: 420,

width: 500

}, DoSomething()

);

$('.meuconteudo').tabSwitch('startAuto', {

interval: 1000

}, DoSomething());

$('#slide').mouseOver(

$('.meuconteudo').tabSwitch('stopAuto', {

interval: 1000

}, DoSomething())

).mouseOut(

$('.meuconteudo').tabSwitch('startAuto', {

interval: 1000

}, DoSomething())

)

$('#menu1').click(

$('.meuconteudo').tabSwitch('index')

);

$('#menu2').click(

$('.meuconteudo').tabSwitch('moveTo',{index : 2}, DoSomething())

);

$('#menu3').click(

$('.meuconteudo').tabSwitch('moveTo',{index : 3}, DoSomething())

);

$('#menu4').click(

$('.meuconteudo').tabSwitch('moveTo',{index : 4}, DoSomething())

);

});

</script>

<style>

#slide { width:500px; height:500px; float:left;}

#menu { width:500px; height:80px; position:relative;}

.menus { width:125px; height:80px; position:relative; float:left;}

#conteudo { width:500px; height:420px; position:relative; overflow:hidden;}

.meuconteudo { width:500px; height:420px; position:relative;}

</style>

</head>

<body>

<div id="slide">

<div id="menu">

<div class="menus" id="menu1">

Menu 1

</div>

<div class="menus" id="menu2">

Menu 2

</div>

<div class="menus" id="menu3">

Menu 3

</div>

<div class="menus" id="menu4">

Menu 4

</div>

</div>

<div id="conteudo">

<div class="meuconteudo">

Primeiro Conteúdo

</div>

<div class="meuconteudo">

Segundo Conteúdo

</div>

<div class="meuconteudo">

Terceiro Conteúdo

</div>

<div class="meuconteudo">

Quarto Conteúdo

</div>

</div>

</div>

</body>

</html>

ta ai um exemplo que imaginei mas não testei se ta tudo certinho espero ter ajudado

de uma olhada nessa pagina e utilize os comandos:

http://www.hieu.co.uk/blog/index.php/tabswitch/docs/

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,3k
×
×
  • Criar Novo...