Hostnet, patrocinador Master desde 2004

MX Masters - Vídeo Aulas, Artigos, Tutoriais, Cursos gratuitos e muito mais » Programação » Jquery » Criando um menu abas usando jQuery

Criando um menu abas usando jQuery

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.

David CHC

Líder do time técnico do Grupo MX Cursos. Trabalha na área de Frontend e Backend. Tendo conhecimentos em Padrões Web( xhtml, html5, css), javascript( framework jQuery), PHP, Python, Ruby, MySQL.

Adicionar aos amigos

Últimos posts deste autor

Comentários

118 Comentários para Criando um menu abas usando jQuery

  1. Cristian Godoi Cristian Godoi disse:

    Ola David, exelente video aula parabéns, tenho uma duvida se pudesse me ajudar ficaria muito grato ;D
    bom, é o mesmo esquema da sua video aula, so que se eu quiser acrescentar tipo assim o item do menu selecionado um background diferenciando dos outros e quando clicando esse background fique no item ativo, um active em cada item selecionado.

    muito obrigado, desculpe se não consigui me expressar bem mas sei que entendeu…kkk
    forte abraço, fico no aguardo.

  2. silas disse:

    porque as video aulas estao sumindo deste site, tem uma porção que nao funciona mais …

  3. Riick disse:

    Opa, to revivendo aqui… Más era preciso, embora a maioria do que o senhor tenha falado eu já saiba, digo que adorei a vídeo aula, e sinceramente, você programa “pra caramba” !! ;)

  4. David CHC disse:

    Se tiver algum elemento em flash, vc tem colocar wmode=”transparent” na hora de chamar o flash. Se for uma div, vc precisa colocar o elemento q engloba o menu com position:relative; z-index:2, e o que engloba outros itens, como position:relative; z-index:1

  5. Luciano disse:

    David, já vi aqui nos fóruns, alguem perguntando sobre esse meu problema, mas não estou conseguindo resolver.
    Meu menu Dropdown, esta baixando atras de um painel que vem logo abaixo.
    O que eu posso fazer?
    desde já agradeço.

  6. David CHC disse:

    Vc pode trabalhar com listas não ordenadas. Eu tenho uma videoaula sobre o assunto, acho q pode te ajudar:

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

  7. Edwin Lima16 disse:

    Olá David Parabens pela excelente video aula muito boa e didatica.
    Tenho uma dúvida.
    Como faço pra colocar accordion nas divs supondo que em cada aba eu tenha 3 divs, sendo que em cada aba tenha um accordeon de divs entende? eu queria fazer um accordion dentro das abas. você tem idéia de como faço esses efeitos?

    Agradeço sua atenção

  8. David CHC disse:

    Creio que não dá para fazer, só se vc tentar gravar um cookie, sempre foi clicar numa aba, e verificar se ele existe depois e atribuir e coloca aba como ativa. Aqui um tutorial de como trabalhar com cookie com javascript, dá uma lida:

    http://leandrovieira.com/archive/solucao-para-trabalhar-com-cookies-em-javascript

  9. Lucio disse:

    Olá Davi,

    Estou com um problema, eu criei uma pagina com abas usando divs, tá tudo blz, o problema é que quando faço uma ação que precisa atualizar a aba, ela sempre retorna para a primeira aba.

    tipo: a primeira aba é endereço, e tenho uma aba ocorrencia, quando atualizo a aba ocorrencia, volta sempre para aba endereço, como faço pra ficar na mesma aba, quando atualizar a mesma ? Desde já grato !!!!

  10. Sérgio disse:

    David, suas vídeo-aulas são excelentes. Parabéns! Poucos conseguem explicar detalhadamente o assunto como você. Sobre essa questão de aba, gostaria que se possível você me desse uma força. Estou desenvolvendo um sistema onde tenho que cadastrar clientes. Como são vários campos, para a página não ficar longa, gostaria de fazer o cadastro em abas. Funciona da seguinte forma: a pessoa preenche os dados da aba cadastro. Quando clica em salvar, o código php habilita a segunda aba que no caso é chamada de endereço. Porém, neste segundo momento, a pessoa ainda pode retornar para a aba cadastra, caso tenha digitado algum dado errado. Finalmente, quando clica em salvar, envia os dados para a tabela do banco de dados mysql. Tentei usar as abas que o próprio dreamweaver disponibiliza, mas quando coloco o código ele trava as abas.

    Já procurei demais na internet o assunto e não encontro nada. Apenas explicação de como fazer as abas funcionar com texto, mas não explica como funcionar com form.

  11. eduardo disse:

    nao, o controle das abas esta em Jquery, C# eu entendo, so preciso q elas aceitem forms para enviar o conteudo para um BD, mas que para isso permanecam na aba atual, Mas, tudo bem, vc ja me ajudou!!!
    Obrigado

  12. eduardo disse:

    Oi David, tudo bem?
    Acho que encontrei meu erro, dentro do se eu inserir runat=”server”, o programa executa com aqueles problemas que venho lhe falando, mas se eu retiro o runat=”server”, de dentro do da uma mensagem de erro imensa.
    Voce pode corrigir isso?

  13. eduardo disse:

    sim, entendi seu ex. Mas eu gostaria que fosse exibido somento o conteudo da aba apos o click, economizando assim espaço na tela.
    Entao, eu gostaria exatamente no exemplo que peguei em uma video aula sua, onde eu qro aproveitar todo o codigo, e em uma das abas implementar um formulario de inscricao(isto seria na linguagem C#)e as abas continuariam funcionando(em Jquery). Por isso usei as duas textboxes o um botao que foram so de exemplo mesmo.

  14. eduardo disse:

    sim, eu so queria um form em uma das abas funcionando independente do jquery, pq essas manipulaçoes serao em C#. Ja as abas, o codigo sera mantido em jquery.

  15. eduardo disse:

    entendi, mas o programa que estou tentando fazer funcionar conforme eu desejo, é possivel?
    Sei que ja estou encomodando, mas é pq realmente sou iniciante…

  16. eduardo disse:

    sim, mas é possivel executar o evento click na aba onde foi projetado e mostrar o resultado na mm, e ainda sim poderia navegar pelas outras abas. Sem que seja necessario desativar “.aba” no css? se sim, como faria?

  17. eduardo disse:

    Mas o problema é quando eu reabilito a classe .aba na CSS, a pagina fica somente na inicial,

    • David CHC disse:

      @eduardo, a primeira cosia é vc entender como funcionar esse sistema de aba. Ele vai pegar valor do href, e de outro lugar, quando é acionado, e depois mostrar esse valor. Mas antes de mostrar esconde todos os valores. Postarei o codigo novamente, só q comentado

      //aciona o evento click, quando clicar no elemento q está com a classe button
      $(".button").click(function(){
        
         //recuperar o valor do atributo rel
         var div = $(this).attr('rel');
        //oculta todas as div's
         $(".abas").hide();
        //mostra a div q queremos realmente mostrar
        $(div).show();
      
       //anula a ação default, se for um link não iria atualizar a página.
       return false;
      
      });
      
  18. eduardo disse:

    Ola david, me desculpa, retorna sim, é pq eu demorei a entender o vc tinha pedido…
    Mas, realmente esta retornando o valor da “rel”!!!
    E agora?

Deixe uma resposta

Você precisa fazer o login para publicar um comentário. Caso não tenha uma conta, cadastre-se

Últimas do site

Grupo MX Internet LTDA - Todos os direitos reservados