1,042 Vídeo Aulas

10075 Usuários

29,590 Respostas

Programação Orientada a Objetos com Java – Parte 10
30 abr - Por Douglas...
Paulo Oliveira Modelo OSI
23 abr - Por Paulo...
Zend Auth – Parte 2
09 abr - Por Felipe...
Java para Web – Criando um CRUD – Final
07 out - Por Junior...
Desenvolvedores versus Wix – Uma luta injusta?
03 mai - Por andrebuzzo...
Aprendendo C : Conceitos Básicos
01 mar - Por Nícholas...
Bootstrap básico – Apresentação
14 jan - Por Rubia...
Gustavo Guanabara Aula 3: Formatação de Textos
14 ago - Por Gustavo...
Felipe Cardozo Oficina da Net completa 10 anos no ar
06 jul - Por Felipe...
Dionei Cardozo Arrays e Funções do ASP
10 jun - Por Dionei...
Héber Simeoni Mr Flap – Jogando Joguinho #11
28 mai - Por Héber...
Philipe Monteiro Cardoso A responsabilidade civil da administradora por danos causados em estacionamentos
03 abr - Por Philipe...
Criando Aplicações WEB com ASP.NET e C#
01 ago - Por Rodolfo...
Animando com o Modificador SKIN com 3D Studio Max
16 mai - Por Claudio...
Protocolos de internet – Quais suas importâncias?
21 jan - Por Redação...
Suavizando Sardas no PhotoShop
08 jul - Por Diogo...
Piter Fuentes Elaborando Etiqueta para CD
14 jan - Por Piter...
Criando actions e o formulário para cadastro junto com a...
15 mai - Por Marcio...
Inserindo planilha
03 fev - Por Erico...
Modelando Uma Montanha com 3D’s Max – Parte Final
24 dez - Por Vitor...
Menu Responsivo com Flexbox
08 jul - Por Alexandre...
Kilderson Sena Segurança com PHP VI – CSRF
19 jan - Por Kilderson...
Multi Upload com Ruby On Rails
05 dez - Por Jhonatan...
Personalizando o Windows 8
30 jul - Por Renato...
Rene de Paula Jr O lado B da web 2.0: ouvir todos é não...
26 fev - Por Rene...

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.

  • eduardo

    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?

  • eduardo

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

    • http://www.mxmasters.com.br David CHC

      @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;
      
      });
      
  • eduardo

    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?

    • http://www.mxmasters.com.br David CHC

      @eduardo, precisa do CSS para poder ocultar e aparecer as divs. Mesmo usando o jQuery, o ele acrescentar no elemento é o CSS

  • eduardo

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

    • http://www.mxmasters.com.br David CHC

      @eduardo, vai sim, acho q vc quer fazer será assim: Terá as abas de navegação, e em cada div terá um botão para a pessoa avançar. Nesse botão basta indicar no rel, qual div irá mostrar.

  • eduardo

    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.

    • http://www.mxmasters.com.br David CHC

      @eduardo, veja esse exemplo do q estou dizendo:

      http://pastebin.com/XtWC6sN8

      Basta copiar o conteudo, e salvar com .html, e visualizar.

  • eduardo

    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.

    • http://www.mxmasters.com.br David CHC

      @eduardo, o exemplo q postei para vc é o mesmo da video aula, o q fiz foi colocar botões de formulário, para avançar a próxima div, sem precisar clicar na aba.

      Da uma olhada nele online:

      http://mwservicos.com/exemplo/aba.html

  • eduardo

    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?

    • http://www.mxmasters.com.br David CHC

      @eduardo, no caso não mexo com C#, não poderia te ajudar nessa questão.

  • eduardo

    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

  • Sérgio

    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.

    • http://www.mxmasters.com.br David CHC

      Obrigado Sérgio. Então vc pode fazer isso tranquilamente, atribuindo um rel num input do tipo button, e assim mostrar a proxima div, exemplo:

      http://jsfiddle.net/davidchc/J2SL4/

    • http://www.mxmasters.com.br David CHC

      Obrigado Sérgio. Então vc pode fazer isso tranquilamente, atribuindo um rel num input do tipo button, e assim mostrar a proxima div, exemplo:

      http://jsfiddle.net/davidchc/J2SL4/

      • Lucas

        Bom david eu fiz tudo que estava no video e ainda não deu certo não aplico o efeito na html

        • http://www.mxmasters.com.br David CHC

          Lucas, compare seu código com o q foi disponibilizado na descrição da vídeo aula

  • Lucio

    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 !!!!

  • http://www.mxmasters.com.br David CHC

    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

  • Edwin Lima16

    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

  • http://www.mxmasters.com.br David CHC

    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/

  • http://pulse.yahoo.com/_Q35BZDON46VTRK7WOUGMMVUFI4 Luciano

    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.

  • http://www.mxmasters.com.br David CHC

    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

  • Riick

    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” !! 😉

  • silas

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

    • http://www.mxmasters.com.br David CHC

      Silas , isso está ocorrendo devido as aulas antigas estão no videolog, eles mudaram algumas coisas, e por isso algumas aulas estão aparecendo; Aos poucos estamos consertando as aulas.

  • Cristian Godoi

    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.

    • http://www.davidchc.com.br David CHC

      Ola Cristian . Vc pode adicionar uma classe no link:

      http://pastebin.com/CV264MtB

      Quando clica no link é adicionado a classe activeAba, assim você adicionar um background o link ativo

      #nav-aba a.activeAba{

      }

      • Cristian Godoi

        Muito obrigado David. ;D

Projeto mantido por: