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

aba com jquery, Jquery, resgatar atributo com jquery, sistema com jquery, sistema de aba

Artigos Relacionados

Deixar um comentário

Comentários (30 Comentários)

David CHC : 02.09.10 às 9:00

@Hannyere, é mais interessante puxar do repositorio do google.
Hannyere : 01.09.10 às 22:49

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?
David CHC : 23.08.10 às 20:25

@Ananda, pode ser feito assim:

http://pastebin.com/BsuEPYSm

bjs
Ananda : 23.08.10 às 17:46

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 :-*
David CHC : 23.08.10 às 17:06

@Ananda, vc tentar fazer assim:

http://pastebin.com/ncXQRbGS

Basta copiar o código, e salvar em uma pagina html.
Ananda : 23.08.10 às 16:41

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
David CHC : 23.08.10 às 14:07

@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 : 23.08.10 às 13:29

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 :*
David CHC : 13.03.10 às 11:09

@Eder, blz
Eder Gasparassi : 13.03.10 às 10:52

Muitissímo obrigado David! Funcionou perfeitamente. Abraço.
David CHC : 12.03.10 às 13:41

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

$(“#aba”);
jQuery(“#aba”);
Eder Gasparassi : 12.03.10 às 10:12

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.
Eduardo Barros Villa : 02.03.10 às 9:22

Boa vídeo aula, alguém teria algum exemplo de Jeditable – Edit In Place Plugin For jQuery
Pedro Antônio : 26.02.10 às 23:18

Muito bom o vídeo!
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
David CHC : 11.02.10 às 12:33

@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.
Reginaldo : 11.02.10 às 11:49

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
David CHC : 10.02.10 às 14:17

vlw @Renato
Renato : 10.02.10 às 13:36

Muito bom!

Me ajudou bastante!

Obrigado. Continue assim!
David CHC : 08.02.10 às 21:39

vlw @Sergio Luis, sugestão anotada.
Sergio Luis : 08.02.10 às 21:37

Nota 10 David.

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

Obeigado e parabéns!
Alexandre : 08.02.10 às 20:21

David CHC valew!
David CHC : 08.02.10 às 18:43

@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 : 08.02.10 às 16:44

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 : 08.02.10 às 15:06

Excelente aula… parabéns!

uma pergunta? onde eu encontro esse complemento do firefox que você usou para gerar os textos do Lipsum ?
David CHC : 08.02.10 às 9:09

@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.
marcello lima : 08.02.10 às 9:04

muito boa mesmo essa aula, sim gostaria de saber de vc se ja tem alguma coisa sobre aquelas aulas que solicitei de vc. ok
Joao Sousa - @jvpsousa : 08.02.10 às 9:02

Parabéns David , arrasou em mais uma video-aula de JQuery ! . Perguntinha : o OGORDO.COM tá abandonado ?!
David CHC : 08.02.10 às 7:27

@SAMUEL, sim vc pode colocar imagens abas sem problemas

@Rafael vlw .
Rafael : 08.02.10 às 2:22

como sempre enriquecendo nosso
saber rsrsrs, parabéns pela aula e mais uma vez obrigado por compartilhar
novas idéias e conhecimentos .
SAMUEL : 08.02.10 às 1:15

NOSSA DAVID BOA VIDEO AULA VLW .

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