Arquivado na categoria javaScript
Menu Drop Down com jQuery
Por Felipe de Albuquerque na categoria CSS, javaScript em 25 de março de 2010
Vou descrever um menu drop down feito com XHTML, CSS e jQuery que ficará assim.
É muito simples e os arquivos estão aqui.
Este menu irá utilizar um método de evento do mouse “hover” e não permite navegação através de teclado, por tantanto ele não é acessível, mas caso seu objetivo seja um menu inclusivo leia um outro post onde eu descrevo um menu drop down acessível.
Primeiro vou criar o documento de marcação para o menu, que no caso será o XHTML.
<div id="menu"><span></span>
<ul>
<li><a href="#">Item 1</a>
<ul>
<li><a href="#">sub 1</a></li>
<li><a href="#">sub 2</a></li>
<li><a href="#">sub 3</a></li>
</ul>
</li>
<li><a href="#">Item 2</a>
<ul>
<li><a href="#">sub 1</a></li>
<li><a href="#">sub 2</a></li>
<li><a href="#">sub 3</a></li>
</ul>
</li>
<li><a href="#">Item 3</a>
<ul>
<li><a href="#">sub 1</a></li>
<li><a href="#">sub 2</a></li>
<li><a href="#">sub 3</a></li>
</ul>
</li>
<li><a href="#">Item 4</a>
<ul>
<li><a href="#">sub 1</a></li>
<li><a href="#">sub 2</a></li>
<li><a href="#">sub 3</a></li>
</ul>
</li>
<li><a href="#">Item 5</a>
<ul>
<li><a href="#">sub 1</a></li>
<li><a href="#">sub 2</a></li>
<li><a href="#">sub 3</a></li>
</ul>
</li>
</ul>
<span class="right"></span></div>
Agora que os nós do menu estão feitos, formato ele utilizando CSS.
*{margin:0;padding:0}//um reset básico, pra gente poder controlar melhor a página
//Os códigos CSS a baixo podem variar bastante, depende da sua necessidade e criatividade
#menu{background:url(../Images/bg-menu.jpg) repeat-x; height:37px; width:80%; margin:20px auto}
#menu span{height:37px; width:5px; background:url(../Images/bg-menu-esq.jpg) no-repeat; float:left;}
#menu span.right{background:url(../Images/bg-menu-dir.jpg) no-repeat; float:right;}
#menu ul{position:relative;z-index:2;}
#menu li{float:left; list-style:none; display:inline;}
#menu a{text-decoration:none;display:block; font-size:12px; font-family:Arial;color:#000; padding:10px;}
#menu a:hover{text-decoration:none}
#menu ul li ul{position:absolute;z-index:1;background:#f5f8fd url(../Images/bg-sub-menu.jpg) repeat-x !important;border:1px solid #cfd7ea;border-top:none;
-moz-border-radius-bottomleft:5px;-moz-border-radius-bottomright:5px;
-webkit-border-bottom-left-radius:5px;-webkit-border-bottom-right-radius:5px;}
#menu ul li ul li{float:none;display:block;padding:0 10px !important; border-top:1px solid #dbe2ec;}
#menu ul li ul li:hover{background:#e2ecf8;color:#26156E;}
Agora vamos ao que interessa, o jQuery
/**
* @author Felipe
*Se for usar me avisa e comenta o post 
*/
$(document).ready(function(){
$("ul li ul").hide();//aqui eu escondo as ul´s que forem filhas de li.
$("ul li").hover(function(){//O método hover recebe dois parametros que são duas funções.
$(this).find("ul:first").slideDown("slow"); //aqui você faz o que quiser quando o mouse estiver em cima
}, function(){
$(this).find("ul:first").slideUp("slow"); //aqui é como se fosse o callback e você também faz o que quiser.O jQuery como você pode ver, é o arquivo mais simples e com poucas linhas de código.
Utilizamos o método hover que recebe dois parâmetros, que é referente a dois estados do mouse, o mouse hover e mouse down. Em jQuery esse método pode receber duas funções como parâmetros, que é o que fizemos e após eu utilizo o this pra referenciar ao elemento que está sendo acionado e com o find peço pra ele procurar naquele elemento o elemento filho, no caso o primeiro ul que existir e por fim faço o slideDown e Up.
Escolhi esconder o ul filho de li “o sub-menu” com o jQuery, por que se o javaScript estiver desabilitado ou por algum motivo não estiver funcionando, o usuário poderá ver o menu pois ele ficará aberto, se você optar em esconder o menu inicialmente com o CSS o seu menu poderá ficar inutilizável.
Essa foi uma demonstração de um menu simples e bem interessante, porém o jQuery tem plugns incríveis e se você quiser implementar um super menu, você poderá instalar algum plugin, como alguns que vou listar.
2 Comentários | Assine | Topo
Brincando com jQuery
Por Felipe de Albuquerque na categoria javaScript em 16 de março de 2010
Quem nunca ouviu falar em jQuery?!
É uma biblioteca de javaScript que foi feita para simplificar e otimizar a produção no desenvolvimento web, como o próprio slogan do jQuery diz “write less, do more ” faça mais escrevendo menos.
Não se trata de uma nova tecnologia, é apenas javaScript assim como mootools e prototype, uma das grandes vantagens em optar por jQuery é a documentação disponível no site oficial, que é bastante completa e os artigos encontrados em fóruns e blogs espalhados na web.
Neste post em especifico eu vou brincar um pouco com o jQuery pra gente sentir um pouco da biblioteca dos deuses.
O primeiro passo é baixar a biblioteca no site oficial, depois chame a biblioteca entre a tag <head> da página que você irá usar as funções do jQuery.
Deverá ficar algo assim:
<head>
<title>Brincando com jQuery</title>
<script type="text/javascript" src="js/jquery.js"></script>//js = pasta onde ficará seus arquivos javaScript, isso é você que escolhe onde ficaram os arquivos e o jquery.js é a biblioteca
</head>Agora vamos testar se a biblioteca está instalada corretamente:
<script type="text/javascript">
$(document).ready(
//Aqui você faz o que quiser útilizando a sintax jQuery ou javaScript puro
function(){
alert("O jQuery está funcionando e a brincadeira já pode começar!!!");//alert comum com a sintax javaScript
});
</script>
Este código espera a página ficar pronta “toda carregada” e após executa uma função que é apenas um alerta normal, com a sintaxe javaScript. Se ao carregar a página com este código e apresentar um alert é porque o jQuery está funcionando e a sua página já compreende a sintaxe jQuery e os métodos e funcionalidades podem ser usadas e isso significa que a brincadeira vai começar a ficar bom agora!
Mas se não funcionou é importante verificar se o caminho que você está chamando está correto ou se há alguma tag escrita incorreta ou sem fechamento, mas de qualquer maneira vou disponibilizar todo código citado aqui.
Uma piada ao getElementById()
O getElementById ficou famoso com a difusão da API DOM e é sem dúvidas um dos métodos mais usados, mas imagina digitar tudo isso umas vinte ou trinta vezes, e em casos extremos, que é necessário chamar esse método várias vezes, me dá tendinite só de pensar, mas com o jQuery isso é tão simples que se torna ridículo, uma verdadeira piada, foi uma das coisas que me chamou a atenção quando eu comecei com o jQuery, isso tudo se resume a “$();”, $(“id desejado, e não só o id, mas os seletores e classes”), vamos aos exemplos para compreendermos melhor:
O método puro
Com JavaScript utilizando a API DOM
document.getElementById();
Com a biblioteca dos Deuses
$();
Manipulando CSS com jQuery
$("#meuId").css("color", "red");
Os elementos de texto que estiverem dentro do id “meuId” ficaram com a cor vermelho.
Manipular CSS com a sintaxe de javaScript ficaria algo assim:
Forma muito usada
var n = document.getElementById("meuId");
n.style.color = "red";
Forma otimizada
document.getElementById("meuId").style.color = "red";
Os três exemplos fazem a mesma coisa, deixa os elementos de texto do meuid na cor vermelha.
Brincando de pic esconde
Ocultar e mostrar elementos sempre foi algo útil, tanto pra criar sub-menus e tudo que a necessidade do seu cliente mandar.
Fazer isso com jQuery é muito fácil e tem algumas formas interessantes, vamos ver um delas:
$(document).ready(function(){
$("#meuId").click(function(){
$("p").toggle("slow");
});
});
HTML
<body>
<span id="#meuId">Clique me!!!</span>
<p>paragrafo 1</p>
<p>paragrafo 2</p>
</body>
Ajax virou brincadeira de criança
Para usar o Ajax normalmente é necessário usar uma receitinha de bolo para inicializar o objeto XMLHTTPRequest e ainda por cima fazer um IF se for o IE pra ativar o ActveX, pra funcionar em ambos ou browsers, mas com o jQuery virou outra maravilhosa piada:
Ajax com javaScript
var Ajax = false;// Ajax
function AjaxRequest() {
Ajax = false;
if (window.XMLHttpRequest) {//Mozilla e safari
Ajax = new XMLHttpRequest();
} else if (window.ActiveXObject) {// IE
try{
Ajax = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
Ajax = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
}
}
}
}
Ajax com jQuery
$("#idOndeVaiCarregar").load("pagina.php", callback);
Acredito que já deu pra brincar um pouco e espero que a leitura tenha sido proveitosa.
As melhores referências de jQuery você poderá achar no site oficial, vale a pena conferir e estudar
4 Comentários | Assine | Topo
Contar caracteres com javaScript
Por Felipe de Albuquerque na categoria javaScript em 30 de setembro de 2009
Existe uma propriedade nativa do JavaScript chamada length que tem a função de contar.
A sintaxe é muito fácil “String.length” onde string é o objeto que queremos contar e o length é quem se encarregará pela contagem.
Obs: está propriedade também conta espaço em branco. Muito bom pra verificar se a senha foi digitada com espaço em branco.
Vamos ver um exemplo simples.
<script type="text/javascript" language="javascript">
var caracteres = "Felipe não sabe de tudo, mas aprende um pouco a cada dia";
var contar = caracteres.length;
alert(contar);
</script>
O resultado será um alert com o numero 56, contando com os espaços em branco, que ele interpreta como caracteres.
Agora eu quero que o nosso código varra a variável, e teste se existe a letra “e”, se achar vai informar que achou a letra “e”, senão ele vai dizer que não achou “e”, e vai mostrar o caractere que achou.
<script type="text/javascript" language="javascript">
var caracteres = "Felipe";
for(i=0; i< caracteres.length; i++){
if(caracteres[i] == "e" || caracteres[i] == "E" ){
alert("Achei o " + caracteres[i]);
} else {
alert("Não achei e, encontrei o " + caracteres[i]);
}
}
</script>
O resultado será uma serie de alerts até a condição ser satisfeita, e todos os caracteres serão contados e testados.
O ideal é trabalhar com DOM, e escrever no documento ao invés de alerts, mas como estamos apenas estudando a propriedade length, escolhi alert, mas você pode escolher um nó ou id do documento e escrever nele, Ex: screver = document.getElementById(“idOndeVoceQuerEscrever”).innerHTML = variável + “texto e tags”;
Mas isso é para próximos posts.
2 Comentários | Assine | Topo