Mostrando postagens com marcador jQuery. Mostrar todas as postagens
Hoje mostrarei uma forma extremamente fácil e rápida de criar uma navegação por abas em páginas web.
Veja aqui como vai ficar o exemplo do tutorial finalizado (caso as abas não apareçam, é algum problema com esse servidor gratuito que eu arranjei, rs).
Printscreen das abas:
Utilizaremos neste tutorial jQuery UI. O jQuery UI fornece abstrações de baixo nível de interação e animação, efeitos avançados de alto nível, widgets personalizáveis, construídos em cima da jQuery JavaScript Library, que você pode usar para construir aplicações web altamente interativas (jQuery UI).
Para realizar este tutorial precisaremos da lib jQuery versão 1.4.2, jQuery UI versão 1.8.2 e do css da jQuery UI para montar as abas.
Todos estes arquivos e o projeto realizado neste tutorial, você pode baixar aqui.
Caso prefira fazer os passos do tutorial, baixe o arquivo do projeto e separe em um diretório os arquivos:
Veja aqui como vai ficar o exemplo do tutorial finalizado (caso as abas não apareçam, é algum problema com esse servidor gratuito que eu arranjei, rs).
Printscreen das abas:
Utilizaremos neste tutorial jQuery UI. O jQuery UI fornece abstrações de baixo nível de interação e animação, efeitos avançados de alto nível, widgets personalizáveis, construídos em cima da jQuery JavaScript Library, que você pode usar para construir aplicações web altamente interativas (jQuery UI).
Para realizar este tutorial precisaremos da lib jQuery versão 1.4.2, jQuery UI versão 1.8.2 e do css da jQuery UI para montar as abas.
Todos estes arquivos e o projeto realizado neste tutorial, você pode baixar aqui.
Caso prefira fazer os passos do tutorial, baixe o arquivo do projeto e separe em um diretório os arquivos:
- jquery-1.4.2.min.js
- jquery-ui-1.8.2.custom.min.js
- css/smoothness/*
Quem trabalha com desenvolvimento web sabe a dificuldade que é criar páginas que sejam visualizadas corretamente na maioria dos navegadores.
Dentre os navegadores utilizados hoje, sem dúvida, o mais "temido" de todos é o nosso querido Internet Explorer (em especial versão 6). É incrível como praticamente tudo dá bug nele! (E quem é desenvolvedor sabe do que estuo falando!)
Um dos problemas do qual vi alguns programadores penando para resolver foi deixar desabilitado a tag <option> de um combobox (<select>) no IE6.
Um dos problemas do qual vi alguns programadores penando para resolver foi deixar desabilitado a tag <option> de um combobox (<select>) no IE6.
Com algumas pesquisas na internet achei esta solução em um site americano, que utiliza jQuery, e foi a maneira mais fácil de resolver o problema que encontrei (e também a que utilizou menos código para isso!).
Olá pessoal,
Hoje vou falar um pouco sobre jQuery.
A jQuery é uma biblioteca de JavaScript que trabalha com Ajax e DOM (modelo de objeto de documento). O legal dessa lib é que você consegue resultados muito mais rápidos e legais, escrevendo muito menos que no tradicional JavaScript.
Para poder utilizar jQuery em seus sites, você precisa primeiramente baixa-la: http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.3.2.js
Em seguida, faça a linkagem da biblioteca na sua página, colocando a seguinte linha dentro das tags <head></head>.
Com a biblioteca carregada, já podemos começar a programar usando jQuery. Abaixo, deixo um pequeno exemplo de validação de uma caixa de texto do tipo <input type="text" id="texto" />. Quando o usuário clicar no botão "Click", o JavaScript será ativado e um alerta aparecerá ao usuário informando se a caixa de texto está vazia ou não.
Nota: para a jQuery, o que interessa é o id dos componentes e não o name.
Primeiramente, vamos abrir as tags <script></script> e inserir o seguinte código dentro:
Hoje vou falar um pouco sobre jQuery.
A jQuery é uma biblioteca de JavaScript que trabalha com Ajax e DOM (modelo de objeto de documento). O legal dessa lib é que você consegue resultados muito mais rápidos e legais, escrevendo muito menos que no tradicional JavaScript.
Para poder utilizar jQuery em seus sites, você precisa primeiramente baixa-la: http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.3.2.js
Em seguida, faça a linkagem da biblioteca na sua página, colocando a seguinte linha dentro das tags <head></head>.
<script src="CAMINHO/jquery-1.3.2.js" type="text/javascript"> </script>Troque a palavra CAMINHO pelo caminho correto no seu site até a biblioteca.
Com a biblioteca carregada, já podemos começar a programar usando jQuery. Abaixo, deixo um pequeno exemplo de validação de uma caixa de texto do tipo <input type="text" id="texto" />. Quando o usuário clicar no botão "Click", o JavaScript será ativado e um alerta aparecerá ao usuário informando se a caixa de texto está vazia ou não.
Nota: para a jQuery, o que interessa é o id dos componentes e não o name.
<body> <input type="text" id="texto"> <input type="button" id="button" value="Click" /> </body>Com os dois componentes no nosso documento HTML, vamos colocar agora o código jQuery que fará o serviço de validação.
Primeiramente, vamos abrir as tags <script></script> e inserir o seguinte código dentro:
<script>
$(document).ready(function(){
//Quando o documento estiver pronto, execute o que estiver aqui dentro
});
</script>
Feito isso, vamos atribuir o ID da nossa caixa de texto a uma variável (isto é opcional, caso queira, pode referenciar o ID diretamente).//Os IDs em jQuery são representados por $("#nome_do_ID")
var texto = $("#texto");
A seguir, vamos acrescentar a função do botão. Esta função é processada quando ocorre o evento click no botão.$("#button").click(function(){
});
Tudo o que estiver entre as chaves, será executado quando o botão for clicado, então, iremos colocar agora a condição para verificar se a caixa de texto está em branco.//val() retorna o valor. Neste caso, o valor do componente texto
if(texto.val() == "") {
alert("A caixa de texto está vazia.");
} else {
alert("Caixa de texto: " + texto.val());
} E este é o código final do jQuery que criamos nas etapas acima:<script>
$(document).ready(function(){
var texto = $("#texto");
$("#button").click(function(){
//val() retorna o valor. Neste caso, o valor do componente texto
if(texto.val() == "") {
alert("A caixa de texto está vazia.");
} else {
alert("Caixa de texto: " + texto.val());
}
});
});
</script> Até a próxima :-)