| Maior acervo de vídeo aulas da web









Delicious

Não consegue visualizar a vídeo aula?

Sistema de Abas com JQuery

Salve amigos do VAB, nessa vídeo aula iremos aprender a como criar um sistema de abas utilizando o jquery. Repare que algo bem simples de fazer, mas podendo ter várias possibilidades em modificações, e ou mesmo criar outros efeitos. Tenham uma boa Aula

Você gostou dessa Vídeo Aula, então compartilhe com seus amigos

Artigos Relacionados

Comentários

  • http://WWW.SAMUELDESIGN.COM.BR SAMUEL

    NOSSA DAVID BOA VIDEO AULA VLW .

    MAIS UMA OBSERVAÇÃO TEM COMO COLOCAR IMAGENS NAS ABAS ?

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

      @SAMUEL, sim vc pode colocar imagens abas sem problemas

      @Rafael vlw .

  • http://confrariadaweb.com.br Rafael

    como sempre enriquecendo nosso
    saber rsrsrs, parabéns pela aula e mais uma vez obrigado por compartilhar
    novas idéias e conhecimentos .

  • Joao Sousa – @jvpsousa

    Parabéns David , arrasou em mais uma video-aula de JQuery ! :D . Perguntinha : o OGORDO.COM tá abandonado ?!

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

      @Joao Sousa, eu estou sem tempo para escrever tutoriais. E alguns estão voltando as aulas, deve ser por isso q deu uma esfriada, mas daqui a pouco volta tudo ao normal.

      @marcello, eu tinha mandado um email para vc sobre a galeria, mas vc não tinha me respondido, pq o link não mostrar nenhuma galeria. Me manda de novo.

  • http://www.cursopadrao.com.br marcello lima

    muito boa mesmo essa aula, sim gostaria de saber de vc se ja tem alguma coisa sobre aquelas aulas que solicitei de vc. ok

  • Alexandre

    Excelente aula… parabéns!

    uma pergunta? onde eu encontro esse complemento do firefox que você usou para gerar os textos do Lipsum ?

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

      @Alexandre aqui está o link : https://addons.mozilla.org/pt-BR/firefox/addon/2064

      @Reginaldo, tem sobre upload de arquivo, mas mandar para qual pasta, é facil. Basta vc fazer esse select, escolhendo a pasta, e vc recupera qual pra saber para onde vai o arquivo:

      //regasta a pasta
      $pasta = $_POST['pasta'];
      //resgata o arquivo
      $arquivo = $_FILES['arquivo'];
      //faz o upload.
      move_uploaded_files($arquivo['tmp_name'], $pasta.’/’.$arquivo['name']);

  • Reginaldo Santana

    Olá amantes do VAB! Parabéns David como sempre com mais uma novidade…Belíssima vídeo aula.
    David não sei se já tem alguma vídeo correspondente, pois, não encontrei. Então ai vai uma ideia de vídeo aula para o VAB: “FAZER UM SISTEMA DE UPLOAD PARA UM LOCAL COM DIVERSAS PASTAS”, por exemplo: o local de upload onde irá o arquivo e logo abaixo tipo um combo onde se escolhe a pasta para enviar o arquivo, ou seja, é um sistema de uplaod só que com a opção de escolher a pasta para onde mandar o arquivo vai…
    Iria me tirar uma grande dúvida….
    Agradeço…

  • Alexandre

    David CHC valew!

  • Sergio Luis

    Nota 10 David.

    Queria dar uma sugestão de vídeo-aula: fazer um sistema de enquete em PHP.

    Obeigado e parabéns!

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

      vlw @Sergio Luis, sugestão anotada.

  • Renato

    Muito bom!

    Me ajudou bastante!

    Obrigado. Continue assim!

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

      vlw @Renato

  • Reginaldo

    Olá David!!! Gostaria de saber como colocar moderação para poder liberar um comentário.
    Além de ser uma dúvida minhe deve ser também de muitos outros usuários…
    vlw

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

      @Reginaldo, eu recomendo colocar as duvidas em aulas correspondentes, pq li a primeira vez não entendi q vc tava falando, rs.

      Basta vc criar na tabela dos comentários, um campo a mais, pode dá o nome de permissao, q receberá um valor inteiro, sendo 0 ou 1, por exemplo.

      Quando a a pessoa colocar um comentário, vc inseri o valor padrão 0, e para liberar, vc vai alterar o valor para 1. E na hora de exibir os comentário, vc colocar para restringir o valor para 1.

  • Pedro Antônio

    Muito bom o vídeo! :D
    David, será q vc poderia fazer uma vídeo aula sobre um editor de texto, tipo o q tem no orkut (qdo vc vai mandar recado e tals), pq tenho ctz q muita gnt iria gostar ;D

  • http://www.agenciarroba.com.br Eduardo Barros Villa

    Boa vídeo aula, alguém teria algum exemplo de Jeditable – Edit In Place Plugin For jQuery

  • Eder Gasparassi

    Exelente video aula David. Bom apliquei os conhecimentos adquiridos nesse video aula e ao invés do menu criei uma galeria de fotos. Mas estou com um problema que talvez você pode me ajudar: Como é uma galeria de fotos lightbox, preciso incluir um script para ela funcionar. Aí que está o problema, quando incluo o arquivo do jquery, o da galeria e o de abas, pelo menos um deixa de funcionar. Ele só está deixando eu incluir somente 2 javascripts.
    Abraço.

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

      @Eder, provavelmente deve ser um problema de compatibilidade com jquery, em vez de usar $, utilize jQuery, exemplo:

      $(“#aba”);
      jQuery(“#aba”);

  • Eder Gasparassi

    Muitissímo obrigado David! Funcionou perfeitamente. Abraço.

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

      @Eder, blz

  • Ananda

    Olá David muito obrigada por esta video aula, será muito útil para mim.

    Agora só estou com um probleminha chato em um efeito acordion que estou desenvolvendo.

    Exemplo: http://migre.me/16QxP

    Repare que no exemplo quando eu clico para abrir o container, o link ativa até aí tudo bem .. mais quando clico novamente nele para fechar, ainda fica ativado!

    Gostaria que fizesse uma função para que ao clicar volte ao estado normal do link.

    Estarei diariamente conferindo esta página no caso de alguma saída, ok!

    Beijos :*

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

      @Ananda, vc pode tentar usar .toggleClass()

      $(this).toggleClass(‘dropListLinkOn’);

      NO caso, se tiver com a class=”dropListLinkOn”, ele remove, senão tiver, ele coloca.

      E outra possibilidade é verificar se o elemento está oculto ou não, não caso a div, e remover ou não a classe do h3


      var div = $(this).next(‘div’).
      if(div.is(“:visible”)){
      $(this).removeClass(“dropListLinkOn”)
      }else{
      $(this).addClass(“dropListLinkOn”)
      }

  • Ananda

    Uhmm! David, tentei aqui até onde eu sei, mais infelizmente não está adiantando, se você tiver algum exemplo simples na prática, gostaria que me enviasse. Me atrapalho muito com esses códigos :(

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

      @Ananda, vc tentar fazer assim:

      http://pastebin.com/ncXQRbGS

      Basta copiar o código, e salvar em uma pagina html.

  • Ananda

    Maravilhosoo .. agora so sendo um pouco mais chata, esse exemplo que voce mandou ele está tipo escarrilhando os container aberto .. como seria abre um fecha outro?

    kkkkkk .. Bjos e desculpa a insistência :-*

  • Hannyere

    David muito legal sua video aula .. gostaria de saber se é melhor puxar o jquery por aquele endereço online (http://ajax.googleapis…) ou é a mesma coisa eu puxar o jquery de uma pasta de arquivos do site mesmo?

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

      @Hannyere, é mais interessante puxar do repositorio do google.

  • http://www.lteko.net Luciano Azevedo

    boa David,
    gostaria de saber como fazer essa video aula, mas mudando as abas automaticamente,
    tipow um contador de tempo entre elas.
    tem como ?

    Grande aula, to ficando viciado no VAB, aguardo retorno

  • http://lteko.net Luciano Azevedo

    Boa david, gostei do script de fazer ele mudar nas div’s,
    mas agora tenho mais uma ideia,

    queria que qndo o mouse fica-se em cima da div, que pare-se o contador,

    nao mudar de div qndo o mouse tiver na div,
    tem como isso ?

    Abraços

  • http://www.acoimbra.com.br Anderson Coimbra

    Olá David, td certo?
    Cara, sua aula é show de bola…mas gostaria de deixar selecionado a aba escolhida…procurei algo no jquery sobre “addClass” e tal, mas a área do conteúdo ja tem a class “aba”. Pode resolver isso pra mim?

    Grande abraço!

  • urbano

    David, muito bom esse sistema de abas, caso queira deixar o link ativo?
    valeu!!

  • http://www.acoimbra.com.br Anderson Coimbra

    Olá David!
    Cara, perfeito sua aula, está funcionando perfeitamente no meu projeto. Só queria te perguntar uma coisa:

    Eu consigo abrir outra aba dependendo do querystring da página?

    Ex: a primeira aba é a “Notícia”. ela q vai carregar primeiro, tranquilo…e se eu quiser entrar na aba “Avisos” passando um parâmetro pela querystring: página.php?aba=avisos

    Eu tentei fazer algo parecido mas ñ consegui ajustar o JQuery.

    Abraço!

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

      vlw @Anderson. Tente fazer o seguinte, fazer uma comparação do valor vindo da URL, e atribuir um style=”display:block” na aba em questão.

      $abaAviso = (isset($_GET['aba'])) ? ‘style=”display:block”‘ : ”;

      • Roberto_st

        David, fiquei interessado em fazer isso!

        mais meu site não tem querystring e não funcionou com isso.

        será que devo estar fazendo algo errado ?

        Valeu.

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

          @Roberto_st, a query string vc passa um informação via URL, e depois filtra e decide o que irá fazer, se irá incluir um arquivo ou pesquisa no banco de dados

  • Giovanni

    David, tenho um problema aqui!

    Estou com esse script que vc ensinou no sistema de abas….
    eu acrescentei uma linha para deixar marcado como o primeiro que é first da lista com isso:

    $(“#acoes li a:first”).addClass(‘ativo’);

    até ai tudo bem, ai depois eu vi nos comentarios que o cara queria deixar ativo o menu quando estiver na respectiva aba ai acionei o que vc falou la:

    $(“#acoes li a”).removeClass(‘ativo’);
    $(this).addClass(‘ativo’);

    depois adicionei um tempo para que o .hide desaparecesse, que foi esse:

    $(“.aba”).hide(50);

    até ai tudo bem, mais agora quando eu clico na aba ela vai certinho para o texto, mais quando eu clico de novo em cima o texto desaparece!

    Eu estou lembrado que tem um modo de concertar isso pelo proprio codigo do javascript mais não sei como!

    Aqui segue o script completo:

    $(function(){
    $(“.aba:first”).show();
    $(“#acoes li a:first”).addClass(‘ativo’);

    $(“#acoes li a”).click(function(){
    $(“#acoes li a”).removeClass(‘ativo’);
    $(this).addClass(‘ativo’);

    $(“.aba”).hide(50);

    var div = $(this).attr(‘href’);
    $(div).show();
    return false;

    });

    });

    Poderia me ajudar com isso ? Obrigado.

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

      @Giovanni, mas ele desaparece, e não aparece novamente ?

  • Giovanni

    Na verdade ele aparece todos como no seu video, mais quando eu clico de novo em cima ele desaparece.

  • Giovanni

    Estranho mesmo! O script estava igual da sua video aula, mais quando eu clicava em cima de novo depois de clicado ele desaparecia!

    o que eu notei foi que vc so mudou o $(div).show(); para $(div).fadeIn(‘slow’);

    será que isso era o problema ?

  • Giovanni

    David, eu não sei o que devia estar acontecendo mais so foi eu pegar aquele seu .fadeIn que começou a funcionar!

    Bom de qualquer maneira, desculpe ai o incomodo = )

    Valeu..

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

      tranqulo @Giovanni, as vezes isso acontece mesmo :D

  • Criabh

    Muito boa a aula David, parabéns!
    Obrigado

    • http://davidchc.wordpress.com David CHC

      vlw

  • http://twitter.com/luiz_casimiro luiz casimiro

    ola david como eu fasso pra criar um sistema de abas asssim que troque automaticamente sou iniciante em programaçao e quero faser um sistema de novidades igual a esse site zonadez.com me ajuda ai

  • Fabiofisio

    Olá,

    Fiz tudo como manda o vídeo e não funcionou bem…
    A 2ª e a 3ª aba não abrem nada e quando volto a clicar na 1ª aba também não volta a aprecer.
    O que será que eu errei?

    • http://davidchc.wordpress.com David CHC

      Sem ver o script fica complicado de saber. Coloca o script q vc criou no http://www.pastebin.com , e me passa o link

  • http://davidchc.wordpress.com David CHC

    Da maneira q vc quer, terá q usar ajax, Dá olhada nessa vídeo aula q pode te ajudar:

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

  • http://davidchc.wordpress.com David CHC

    Coloque o link de como vc tentou fazer, assim posso ver pelo firebug

    • Allanlima 2010

       David, Boa tarde!
      Eu tinha esquecido de avisar eu consegui minutos depois de postar aqui no comentário depois, porquê eu tinha esquecido apenas de fechar )}; e agora ja está funcionando normalmente. Obrigado pela aula.

  • marcio oliveira

    Cara! Muito boa essas video aulas. Simples e objetivo como tem que ser. Muito obrigado por disponibilizar esse material aí mano, valew!

    • http://davidchc.wordpress.com David CHC

      Vlw Marcio

Redes Sociais na Educação

Redes Sociais na Educação

Publicidade

Review

HTC DESIRE 2010

Por Felipe Cardozo

Nossos cursos

Atualização


Hospedado por Hostnet - Hospedagem de sites

VAB - Todos os direitos reservados - 2008 / 2012

Developed by: MX Web Studio