lucas1407 Posted July 13, 2011 Report Share Posted July 13, 2011 Como usa o tabSwitch?Eu quero por as imagens lá,Link do site: http://www.hieu.co.uk/blog/index.php/tabswitch/me ajuda aew please Quote Link to comment Share on other sites More sharing options...
0 Markus Magnus Posted July 18, 2011 Report Share Posted July 18, 2011 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 ajudadode uma olhada nessa pagina e utilize os comandos:http://www.hieu.co.uk/blog/index.php/tabswitch/docs/ Quote Link to comment Share on other sites More sharing options...
0 lucas1407 Posted July 19, 2011 Author Report Share Posted July 19, 2011 vlw Quote Link to comment Share on other sites More sharing options...
Question
lucas1407
Como usa o tabSwitch?
Eu quero por as imagens lá,
Link do site: http://www.hieu.co.uk/blog/index.php/tabswitch/
me ajuda aew please
Link to comment
Share on other sites
2 answers to this question
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.