MX Masters

08/02/2010 - 7:00 > 5.013 Visualizações > 51 comentários

Criando um menu abas usando Jquery

0 votos

Salve Amigos do Mxmasters, nessa vídeo aula iremos utilizar o jquery para criação de um sistema de abas. Com esse mesmo principio desse sistema, você pode criar outros, como por exemplo, galeria de imagens. Tenham uma Boa Aula.

Script Criado: http://www.mxmasters.com.br/comunidade/viewtopic.php?f=50&t=3418

Posts relacionados

David CHC

Trabalha como free-lance em desenvolvimentos de sites,desde o projeto completo à parte do projeto. Tem conhecimentos em Padrões Web( xhtml, css), javascript( jquery), php, mysql , (iniciando no python e ruby também), photoshop, fireworks, corel draw, enfim, um eterno aprendiz...

Outros posts deste autor

Este autor atualmente possui 38 posts

Veja todos os posts de David CHC


Comentários / Deixe seu Comentário

51 respostas para 'Criando um menu abas usando Jquery'

  1. William PereiraNo Gravatar Diz:
    8/02/10 às 8:25

    David, muito show a video-aula.

    Quanto mais eu vejo algo relacionado a jQuery na net, mais me supreendo, principalmente devido ao fato que eu iria utilizar o flash, porém para algumas idéias podem facilmente ser substituidas por jQuery.

    Vi um demo muito parecido com este da sua video aula. muito bom mesmo.

    Agradeço por compartilhar seus conhecimentos conosco, que somos leigos no assunto ainda.

    Um Abraço

    Um abraço, e fico no aguardo daquela possível video aula. das imgs com jQuery.

    William Pereira
    wpdss_88_wf@hotmail.com

  2. David CHCNo Gravatar Diz:
    8/02/10 às 8:35

    @William Pereira, aquele link q vc tinha me mandado para uma video aulas, seria o mesmo principio dessa de sistema de abas, é resgatar o valor de algum atributo.

  3. William PereiraNo Gravatar Diz:
    8/02/10 às 8:50

    Blza David.

    Valew pela dica, vou pesquisar mais, ver outros exemplos, para ir me familiarizando e ir colocando em prática.

    Abraço

  4. Robson R.No Gravatar Diz:
    8/02/10 às 8:52

    Salve, David…
    Muito obrigado pela vídeo aula.
    Sempre via esse sitema de abas na net e não sabia como era feito…!!
    Valeu mesmo!!

    Forte abraço,
    Robson – RJ

  5. David CHCNo Gravatar Diz:
    8/02/10 às 9:12

    @Robson , a ideia era fazer algo simples e facil para as pessoas poderem adaptar em seus sites. abrs

    @William, pra vc aprender é só fazendo, então tente reproduzir o q foi passado na video aula, assim vc vai se familiariazado cada vez mais.

  6. Alexandre XantalsNo Gravatar Diz:
    9/02/10 às 0:21

    Saudações David;
    … esta é a primeira vez que estou enviando um comentário e acho ótima a sua forma de falar sobre o conteúdo … mas na verdade eu gostaria de sugerir uma vídeo aula, diga-se de passagem, é sobre um conteúdo que estou precisando muito. Seria possível???

    Parabéns pelas vídeo-aulas

  7. David CHCNo Gravatar Diz:
    9/02/10 às 7:36

    @Alexandre Xantals, pode sugerir a vontade nos comentários.

  8. Leandro SantosNo Gravatar Diz:
    9/02/10 às 9:09

    David FHC, você como sempre destroi nas suas vídeo aulas, cara quando você vai lançar o seu dvd de vídeos aulas? Seria de PHP + Mysql e Jquery.

    Ou ainda não está em seus planos um lançamento em dvd?
    No aguardo.

  9. David CHCNo Gravatar Diz:
    9/02/10 às 9:12

    @Leandro Santos, ainda tenho q amadurecer algumas coisas, pra pensar em fazer um curso em DVD.vlw

  10. Alex Rodrigues - 30 anos - Campinas-spNo Gravatar Diz:
    9/02/10 às 14:03

    Olá David CHC tudo bem, detono na video aula, são ótimas as coisas que você pode fazer como JQuery né. Magnifico!!!

    Parabens pela video aula!!!

  11. David CHCNo Gravatar Diz:
    9/02/10 às 14:10

    vlw @Alex, realmente o jquery facilita muito nossa vida. abrs

  12. Júlio CésarNo Gravatar Diz:
    9/02/10 às 19:02

    Mais uma vez arrebentando David..
    Vlw.

  13. David CHCNo Gravatar Diz:
    9/02/10 às 19:08

    vlw @Júlio César

  14. Leandro SantosNo Gravatar Diz:
    11/02/10 às 8:19

    OK, David, mais você tem jeito pra coisa, tem conhecimento, didática, e sabe muito bem explicar, pensi nisso depois, blz!
    Sucessos.

  15. Leandro SantosNo Gravatar Diz:
    11/02/10 às 8:22

    Cara, gostária de solicitar uma vídeo aulas, Criando um menu igual do mxmasters, acredito que nesse menu vocês utiliza jquery, para dar esse efeito, seria uma boa.

  16. THIAGONo Gravatar Diz:
    11/02/10 às 8:28

    Muito bom cara, valeu mesmo!

  17. David CHCNo Gravatar Diz:
    11/02/10 às 8:30

    @Leandro Santos, como falei estou amadurecendo a ideia sobre o curso, tenho que estudar as novidades da nova versão do jquery pra fazer algo legal.

    Sobre o menu, eu fiz com jquery sim, eu tenho uma video aula com mesmo principio :

    http://www.videoaulasbrasil.com.br/ajax/criando-um-menu-safona-com-jquery/

    Só irá mudar o evento a ser chamado, que será hover, e o elemento capturado, no caso li:


    $(“ul#menu li”).hover(function(){
    $(this).find(‘ul’).slideDown();
    }, function(){
    $(this).find(‘ul’).slideUp();
    })

    O hover tem dois parametros, que ao passar o mouse e ao retirar.
    O find ele busca elemento, no caso dentro da li
    slideDown faz um efeito de slide descendo, enquanto slideUp, faz subindo.

  18. David CHCNo Gravatar Diz:
    11/02/10 às 8:31

    obrigado @THIAGO

  19. Anderson FariasNo Gravatar Diz:
    12/02/10 às 22:47

    David vc é mto humilde rs. Acho que vc está certo em dizer que tem que amadurecer em algumas coisas, afinal todos nós temos que amadurecer sempre… Mas sinceramente, vc é o melhor professor que conheço na net no que vc se dispõe a ensinar. Parabéns pela humildade e pela video aula!

  20. David CHCNo Gravatar Diz:
    13/02/10 às 8:16

    @Anderson Farias, acho q nem é humildade, eu sou chato mesmo com isso, rs. Se eu me propor a de ministrar um curso, ele tem q ser bom, e pra isso tenho que entender varias coisas pra pode passar da maneira q os outros entendam, e por isso q digo q tenho q aprender algumas coisas pra poder fazer algo legal. Eu estou estudando, caso eu comece gravar um curso, eu irei avisar sim. abrs

  21. Leandro SantosNo Gravatar Diz:
    14/02/10 às 23:46

    @David, Brigadão, vou tentar fazer aqui, estou finalizando alguns projetos e vou colocar em prática tudo aquilo que vc vem mostrando, obg. Parceiro.

    Bom Carnaval para toda equipe do MX Masters.

  22. Wilton OliveiraNo Gravatar Diz:
    16/02/10 às 8:53

    Muito boa a vídeo aula, parabéns pelo trabalho.

  23. David CHCNo Gravatar Diz:
    16/02/10 às 9:08

    obrigado @Wilton

  24. Jean LucasNo Gravatar Diz:
    20/02/10 às 19:17

    será que não tem como você me explicar como eu faço pra puxar um arquivo HTML externo que esteja em uma página chamada “pages” e colocar na DIV do conteúdo, usando o Jquery???

    Obrigado desde já

    e parabéns pela Video-Aula, muito boa MESMO!!!

  25. David CHCNo Gravatar Diz:
    21/02/10 às 9:13

    @Jean Lucas, já video aula minha sobre esse assunto::

    http://www.videoaulasbrasil.com.br/ajax/carregando-a-pagina-sem-atualizar-utilizando-ajax-com-jquery/

  26. Diego SampaioNo Gravatar Diz:
    25/02/10 às 15:41

    Parabéns David, muito boa video aula, mais uma vez vc arrebentou…

  27. David CHCNo Gravatar Diz:
    25/02/10 às 17:00

    Obrigado @Diego

  28. Ricardo MarangoniNo Gravatar Diz:
    1/03/10 às 20:50

    Show de bola David uma coisa que tenho vontdade de aprender tbm é esse efeito de sumir e aparecer uma div tipo esse “clique aqui e deixe o seu comnetário”, se pudesse fazer uma video-aula sobre isso tiraria uma grande dúvida minha..

    Abraços

  29. David CHCNo Gravatar Diz:
    1/03/10 às 21:07

    @Ricardo, é algo muito simples de ser fazer, uma base seria o menu sanfona com jquery, q já tem uma video aula.

    http://www.videoaulasbrasil.com.br/ajax/criando-um-menu-safona-com-jquery/

    Mas seria algo bem mais fácil, exemplo:


    //ao clicar o link, e executa uma função
    $(“#link”).click(function(){
    //utiliza o slideToogle para fazer o efeito
    $(“#aba”).slideToggle();
    //retorna falso para desativa o link
    return false;
    });

    O slideToggle() verifica se está visivel ou invisivel, e faz o efeito em si.

  30. Duhilio AlmeidaNo Gravatar Diz:
    6/03/10 às 21:06

    Saudações!!!!!

    Quando eu estou aprendendo css, e vejo que a compatibilidade com internet explorer não vejo ainda um caminho para não ter mais problemas. E vejo que tableless é um opção para criar um website bastante sofisticado, e vejo essa aula de javascript, e a cada aula que vejo do Mxmasters me surpreender muito mais, e quero agradecer a incansáveis aulas que eram bicho de sete cabeça, com as aulas é um maravilha, e é só praticar.

    Obrigado pela atenção.

  31. David CHCNo Gravatar Diz:
    6/03/10 às 21:57

    @Duhilio Almeida, infelizmente o IE6 é uma praga mesmo, vc pode minimizar tentando conhecer alguns bugs dele, e são muitos. Foque em Tableless, q realmente esse é o melhor caminho. E é isso mesmo, tem q colocar em pratica, é a única maneira q vc consegue aprender.

  32. JuniorNo Gravatar Diz:
    21/04/10 às 12:12

    Primeiramente eu quero te parabenizar pelo seu ótimo trabalho no mx masters, querita te perguntar como que eu faço para deixar a aba selecionada ativa e as outras com cores diferentes. Você poderia me ajudar? Ficaria muito grato.

  33. Willy ChagasNo Gravatar Diz:
    17/05/10 às 22:25

    querita te perguntar como que eu faço para deixar a aba selecionada ativa e as outras com cores diferentes.

    MESMA Duvida

  34. David CHCNo Gravatar Diz:
    18/05/10 às 19:51

    @Willy, nesse caso vc pode declarar ao clicar aba, adicionar uma class, como addClass, exemplo


    $(“#nav a”).click(function(){
    $(“#nav a”).removeClass(“ativo”);
    $(this).addClass(“ativo”);
    });

    Nesse caso, ele remove primeiro todas as classes ativo, e depois adicionar a classe para o link acionado. Vc pode fazer criar classe pra cada item, pra cores diferentes.

  35. Willy ChagasNo Gravatar Diz:
    9/06/10 às 11:02

    Valeu

  36. DANILO MARTINSNo Gravatar Diz:
    26/07/10 às 2:19

    O DAVID assim tem jeito de eu enviar isso aqui via GET #href link divo por URL, tipo achei um plugin jquery que so funciona com div interna pode me ajudar nisso

  37. David CHCNo Gravatar Diz:
    26/07/10 às 8:14

    @DANILO MARTINS, vc pode usar $.get ou mesmo $.post. Tem uma video aula sobre combo dinamico q tem essa linha, só q em vez de vc retornar em um select, vc vai retornar numa div

    http://www.mxmasters.com.br/php/php-combo-dinamico-com-php-e-jquery/

  38. DANILO MARTINSNo Gravatar Diz:
    26/07/10 às 18:14

    Tipo assim to com uma dúvida pra utilizar o Jquery UI Tabs de maneira dinamica com Banco de Dados e PHP sabe não achei muita coisa na internet ainda será poderia dar uma forcinha e me ajudar a clarear mais minhas ideias

  39. David CHCNo Gravatar Diz:
    27/07/10 às 8:18

    @DANILO MARTINS, eu não ainda Jquery UI Tabs, mas vou dá uma olhada

  40. DavidNo Gravatar Diz:
    7/08/10 às 11:34

    Estou fazendo um site em Wordpress e estou tentado implantar esse jquery e num to conseguind cara.. ja incluir a linha que chama do jquery no wordpress e nada ( )

  41. David CHCNo Gravatar Diz:
    7/08/10 às 11:49

    Blz xará, então, vamos dizer q o jquery está dentro da pasta js do seu tema, vc pode fazer assim para chamar:

    <script type="text/javascript" src="<?php bloginfo('template_url')?>/js/jquery-1.4.2.min.js"></script>

    O bloginfo(‘template_url’) retorna url até seu template.

  42. Helio BritoNo Gravatar Diz:
    8/08/10 às 19:25

    David veja meu código estou colocando como vc falou mas mesmo assim não está funcionando.. o Wordpress já com o Jquery?? e tals… estou louco na net procurando mas até agora nada.. hehe cara vlw pela resposta…

    <html xmlns="http://www.w3.org/1999/xhtml" >

    <link href="/style.css” type=”text/css” rel=”stylesheet” />

    <script type="text/javascript" src="/js/jquery-1.4.2.min.js”>

    Eu fiz a o XHTML do seu turorial no sidebar.php e tals… e inclui tudo certinho cara.. so que na hora ele que eu faço o codigo jquery para mostrar:

    $(function(){
    $(“.but:first”).show();
    });

    Ele não mostra o promeiro texto, intende?

  43. David CHCNo Gravatar Diz:
    8/08/10 às 19:35

    @Helio Brito, as vc está chamando a o script com jquery depois da execução da função, e pode dá problema. Outro problema pode ser incompatibilidade com outro framework de javascript, q utiliza a mesma instrução ($). Caso, esse o problema, tente fazer assim:

    jQuery(function(){
jQuery(“.but:first”).show();
});
  44. HélioNo Gravatar Diz:
    9/08/10 às 10:26

    David eu tbm vi nos foruns que poderia ser isso… já tentei de várias formas e ainda não faço idéia por que ele não está exibindo… quando executo a parte de jquery, acho que deve ser isso mesmo, por que não está carregando o jquery. Olha só como ficou agora meu código entre as tags onde deveria carregar:

    tentativa=01
    ======================================================================
    <link href="/style.css” type=”text/css” rel=”stylesheet” />

    <script type="text/javascript" src="”>/js/jquery-1.4.2.min.js
    <script type="text/javascript" src="”>/js/cara.js”>

    ========================================================================

    tentativa=02
    ======================================================================

    <html xmlns="http://www.w3.org/1999/xhtml" >

    <link href="/style.css” type=”text/css” rel=”stylesheet” />

    <script type="text/javascript" src="”>/js/jquery-1.4.2.min.js

    $(function(){
    $(“.but:first”).show();
    });

    ========================================================================

    tentativa=03
    ======================================================================

    <html xmlns="http://www.w3.org/1999/xhtml" >

    <link href="/style.css” type=”text/css” rel=”stylesheet” />

    <script type="text/javascript" src="”>/js/jquery-1.4.2.min.js

    jQuery(function(){
    jQuery(“.but:first”).show();
    });

    ========================================================================

    Mesmo depois de executar essas tentativas não estou coseguindo fazer ele mostrar o primeiro texto como vc explica na video aulas

    Estou tentando resolver tem 3 dias.. hehehe na verdade 4 com hoje… kkkkk vi tantos foruns que tomei gosto pela palavra agora…rs

  45. David CHCNo Gravatar Diz:
    9/08/10 às 10:29

    @Hélio, vc usa o firebug do Firefox para debugar javascript? Caso não use, instale ele, e veja o q ela tá retornando de erro. Lembrando sempre, vc tem q colocar o caminho completo até onde está o arquivo, no caso usando pode usar bloginfo(‘template_url’) pra pegar a URL até onde está o seu tema.

  46. Helio BritoNo Gravatar Diz:
    9/08/10 às 11:29

    Cara esse Firebug é o ouro atraves dele vi que o num estava chegando até meu arquivo talvez pelo motivo de permissão, ainda vou verificar, mas ficou o ouro…

    Solução (créditos DAVID CHC);
    ==========================================================================

    jQuery(function(){
    jQuery(“.but:first”).show();
    });

    ===========================================================================

    Obrigado DAVID pela atenção e conseguir uma solução para meu caso. Visito direto o forum mas numca postei muitos comentários.. hehe

    E viva o Firebug

    Obrigado cara.

    Abração

  47. HELIO BRITONo Gravatar Diz:
    10/08/10 às 1:25

    DAVID, estou tentando aqui cara segui certinho a video aula e tbm agora usando o Firebug para vê os erros de sintaxe do jQuery e tals.. mas estou tentando colocar aqui para na hora que eu clicar exibir as abas com o conteudo refente aos que estão nelas… mas num ta dando certo ta ficando tipo tudo em branco não sei por que..rs

    script jquery
    =======================================================================

    $(function(){
    jQuery(“.aba:first”).show();

    jQuery(“#n-aba”).click(function(){
    jQuery(“.aba”).hide();
    var divs = jQuery(this).attr(‘href’);
    jQuery(divs).show();
    return false;
    });

    });

    script xhtml
    ==============================================================

    Notícias
    Fotos
    Enquete

    Lorem Ipsum is simply dummy text of the printing
    and typesetting industry. Lorem Ipsum has been the
    industry’s standard dummy text ever since the 1500s,
    when an unknown printer took a galley of type and
    crambled it to make a type specimen book. It has
    survived not only five centuries, but also the leap
    into electronic typesetting, remaining essentially
    unchanged. It was popularised in the 1960s with the
    release of Letraset sheets containing Lorem Ipsum
    passages, and more recently with desktop publishing
    software like Aldus PageMaker including versions of
    Lorem Ipsum.

    Lorem Ipsum is simply dummy text of the printing
    and typesetting industry. Lorem Ipsum has been the
    industry’s standard dummy text ever since the 1500s,
    when an unknown printer took a galley of type and
    crambled it to make a type specimen book. It has
    survived not only five centuries, but also the leap
    into electronic typesetting, remaining essentially
    unchanged. It was popularised in the 1960s with the
    release of Letraset sheets containing Lorem Ipsum
    passages, and more recently with desktop publishing
    software like Aldus PageMaker including versions of
    Lorem Ipsum.

    Lorem Ipsum is simply dummy text of the printing
    and typesetting industry. Lorem Ipsum has been the
    industry’s standard dummy text ever since the 1500s,
    when an unknown printer took a galley of type and

    —————————————————————————————

    ao meu vê aqui cara ta tudo certo, mas na hora de eu clicar para exibir a aba, não exibi entende?

  48. David CHCNo Gravatar Diz:
    10/08/10 às 8:43

    @HELIO, vc está tentando pegar id de um elemento, e bem provavel q não seja o ID q vc quer pegar , e sim um elemento link. Então vamos dizer q vc tem esse menu n-aba:

        <ul id="n-aba">
	<li><a href="#l-noticias">Noticias</a></li>
	<li><a href="#l-fotos">Fotos</a></li>
	<li><a href="#l-enquete">Enquete</a></li>
</ul>

    O q quero recuperar é apenas o atributo href, mas ação quero quando clicar no link, e não na ul. Então tenho q fazer assim:

    jQuery(“#n-aba a”).click(function(){

});
  49. Helio BritoNo Gravatar Diz:
    11/08/10 às 10:47

    DAVID,
    Quando clico nas abas do menu, não aparece o texto seguido embaixo do outro, na verdade quando clico no no botão das abas so fica em um texto só. Seguindo o ex da sua video aulas, quando vc clica no texto2, ele aparece abaixo do texto1, e depois vc term que colocar o jQuery(“.aba”).hide(); para o texto tipo sobrepor o outro…

    No meu caso eu tenho tenum um menu UL com ID=”n-aba” como vc fez na video aula… fiz igualzinho. como te falei não esta aparecendo quando clico no texto.. não aparece um embaixo do outro para eu continuar.. hehee como faço para usar ele mostrador de codigo que vc usou ai no seu ex? dai vou poder li mostrar meu codigo e assim obter ajuda sua…

    Obrigado

  50. David CHCNo Gravatar Diz:
    11/08/10 às 10:56

    @Helio Brito, pra ficar mais facil, posta no http://www.pastebin.com, e me passa o link

  51. DavidNo Gravatar Diz:
    11/08/10 às 11:00

    Consegui agora cara… eu estava errando as divs do texto.. tenho que colocar a div referente ao texto em cada LI .. hehee caraka que vacilo..

    vlw cara

    Obrigado mesmo..
    rsrsrs

Deixe seu Comentário

Publicidade

www.mxmasters.com.br - todos os Direitos Reservados : Desenvolvido com Wordpress

Desenvolvido por David CHC e Felipe Cardozo