Arquivos da categoria jQuery

Manipulando CSS com jQuery

Postado por Danilo in CSS, jQuery em 28 de outubro de 2009

Com jQuery podemos adicionar e alterar atributos CSS, podemos manipular todo o CSS de uma página facilmente com a função css do jQuery. Vou mostrar detalhadamente abaixo como adicionar e alterar esses atributos.

HTML:

Supomos que você tenha na sua página o seguinte conteúdo HTML:

<html>
    <head>
        <title>Manipulando css</title>
    </head>
    <body>
        <h1>Manipulando CSS</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mollis lorem ac ante pretium ultrices. Maecenas vel tellus lacus. Sed nec ultrices magna. Pellentesque nulla tortor, malesuada vitae viverra id, imperdiet vitae elit. Donec malesuada, dolor sit amet rutrum eleifend, ante arcu tempor dolor, vitae vulputate odio elit id metus. Fusce odio nulla, facilisis vel consectetur ut, rutrum ut diam. Nam vel blandit urna. In malesuada iaculis nulla, nec interdum nisi iaculis at. Curabitur lacinia consectetur porta. Nunc sit amet nibh eu orci venenatis adipiscing at quis leo. Donec in ante tortor. Vivamus varius tellus id lorem scelerisque placerat. Nunc semper, ligula vel tincidunt aliquet, diam diam malesuada diam, quis tristique ligula purus ac eros. Sed fringilla tellus ac lorem pellentesque vitae viverra risus dapibus. Fusce consequat felis orci. Pellentesque rutrum, tellus eget auctor vehicula, eros nibh condimentum turpis, vitae luctus magna erat a augue.</p>
    </body>
</html>

jQuery em Ação:

Primeiramente vamos baixar a biblioteca jQuery: Aqui e adicionar ela ao head do nosso código: :)

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

Vamos adicionar os atributos CSS à página com jQuery, no exemplo abaixo coloquei um background amarelo no body, joguei um vermelho no h1 e deixei a tag p justificado, com fonte 13px e a cor cinza. Vejamos:

$(document).ready( function() {
    $('body').css("background", "#FFFEEB");
    $('h1').css("color", "#EB191E");
    $('p').css({"font-size":"13px", "line-height":"14px", "color":"#6E6E6E", "text-align":"justify"});
});

Feito isso, Pronto! Poderemos visualizar a pagina como o CSS adicionado via jQuery.

Baixar código inteiro: Aqui

Até o próximo post…

, , ,

2 Comentários

Eventos com jQuery

Postado por Danilo in jQuery em 29 de setembro de 2009

O que é um evento?

Para utilizar jQuery é preciso da biblioteca do jQuery

Para baixar o jQuery clique aqui.

Exemplos:

.click

O evento .click é processado quando clicamos em um elemento. Ex.: Clique aqui!

$(document).ready( function () {
   	$("#elemento-click").click( function() {
		alert("Você clicou aqui!");
   	});   		
});
.change

O evento .change é processado quando um elemento muda de valor.

$(document).ready( function () {
   	$("#elemento-change").change( function () {
		alert("Você mudou o valor do elemento");
   	}); 		
});
.select

O evento .select é processado quando um texto existente em um elemento é selecionado.

$(document).ready( function () {
   	$("#elemento-select").select( function () {
   		alert((document.all) ? document.selection.createRange().text : this.value.substring(this.selectionStart, this.selectionEnd));
   	});   		
});
.focus

O evento .focus é processado quando um elemento recebe foco.

$(document).ready( function () {
	$("#elemento-focus").focus( function () {
		alert("elemento ganhou foco!");	
	});
});
.blur

O evento .blur é processado quando um elemento perde o foco.

$(document).ready( function () {
	$("#elemento-blur").blur( function () {
		alert("elemento perdeu o foco!");
	}); 
});
.keydown

O evento .keydown é processado quando é pressionado alguma tecla.

$(document).ready( function () {
	$("#elemento-keydown").keydown( function (event) {
		alert(event.keyCode);
	}); 
});
.keyup

O evento .keyup é processado quando uma tecla deixa de ser pressionada.

$(document).ready( function () {
	$("#elemento-keyup").keyup( function (event) {
		alert(event.keyCode); 
	}); 
});
.mouseover

O evento .mousover é processado quando passamos o mouse sobre um elemento.

$(document).ready( function () {
	$("#elemento-mouseover").mouseover( function () {
		alert("O rato entrou"); 
	});
});
.mouseout

O evento .mouseout é processado quando tiramos o mouse de cima do elemento .

$(document).ready( function () {
	$("#elemento-mouseout").mouseout( function () {
		alert('O rato saiu'); 
	});	
});
.submit

O evento .submit é processado quando o formulário é submetido.

$(document).ready( function () {
	$("#elemento-submit").submit( function () {
		alert('formulário submetido');
		return false; 
	});	
});
.load

O evento .load é processado quando um elemento termina de ser carregado.

$(document).ready( function () {
	$("body").load( function () {
		alert("elemento carregado!");
	});
});

Mais eventos podem ser encontrados em: jQuery Events.

, , , ,

3 Comentários

Manipulando Eventos com Javascript

Postado por Danilo in jQuery, outros em 24 de setembro de 2009

O que é um evento javascript?

Eventos são ações que os usuários produzem nas páginas, quando um usuário visita uma página e interage (clicando, digitando algo, movendo o rato, etc.), ele está produzindo eventos.

Com eventos podemos produzir o lado “mágico” do Javascript, pois utilizando somente HTML, o único evento que conhecemos é quando clicamos em um link e ele abre outra página Web.

Os eventos Javascript, associados as funções, aos métodos e aos formulários, abrem uma grande
porta de interatividade das páginas.

Eventos e exemplos:

onclick

O evento onclick é processado quando clicamos em um elemento. Ex.: Clique aqui!

<a href="javascript:void(0);" onclick="alert('Você clicou aqui!')">Clique aqui!</a>
onchange

O evento onchange é processado quando um elemento muda de valor.

<select name="campo" onchange="alert('Você mudou o valor do elemento');">
   <option value="1">Alterar</option>
   <option value="2">Escolher esse!</option>
</select>
onselect

O evento onselect é processado quando um texto existente em um elemento é selecionado.

<textarea onselect="alert((document.all) ? document.selection.createRange().text : this.value.substring(this.selectionStart, this.selectionEnd));">Danilo Borges Pereira</textarea>
onfocus

O evento onfocus é processado quando um elemento recebe foco.

<input type="text" onfocus="alert('elemento ganhou foco!')" />
onblur

O evento onblur é processado quando um elemento perde o foco.

<input type="text" onblur="alert('elemento perdeu o foco!')" />
onkeydown

O evento onkeydown é processado quando é pressionado alguma tecla.

<input type="text" onkeydown="alert(event.keyCode);" />
onkeyup

O evento onkeyup é processado quando uma tecla deixa de ser pressionada.

<input type="text" onkeyup="alert(event.keyCode);" />
onmouseover

O evento onmousever é processado quando passamos o mouse sobre um elemento.

<input type="text" onmouseover="alert('O rato entrou');" />
onmouseout

O evento onmouseout é processado quando tiramos o mouse de cima do elemento .

<input type="text" onmouseout="alert('O rato saiu');" />
onsubmit

O evento onsubmit é processado quando o formulário é submetido.

<form onsubmit="alert('formulário submetido'); return false;">
   <input type="submit">
</form>
onload

O evento onload é processado quando um elemento termina de ser carregado.

<body onload="alert('Página carregada');">
</body>

Mais eventos podem ser encontrados em: w3schools.

, , ,

4 Comentários

jQuery Cycle Plugin – Plugin para slideShow

Postado por Danilo in jQuery em 10 de julho de 2009

Hoje vou mostrar um plugin Jquery para fazer slideShow, plugin chamado de jQuery Cycle Plugin.
Este plugin também facilita na personalização do seu slideShow, pois tem diversos efeitos.

Chama os javascripts

<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/jquery.cycle.js'></script>

Adicione esse javascript

Aqui estou escondendo todas as imagens dentro da div#cycle, e depois mostrando a primeira.

$(document).ready(function(){
   $('#cycle img').hide();
   $('#cycle img:first').show();
}

HTML

<div id="cycle">
    <img src="img/1.jpg" /> 
    <img src="img/2.jpg" /> 
    <img src="img/3.jpg" /> 
</div>

Efeito: fade 









$('#cycle').cycle({ fx: 'fade', speed:  300 });

Efeito: shuffle 









$('#cycle').cycle('shuffle');

Efeito: slideX 









$('#cycle').cycle('slideX');

Efeito: growY 









$('#cycle').cycle({ fx: 'growY', speed:  1000 });

Efeito: blindY 









$('#cycle').cycle('blindY');

Mais Efeitos
Fazer Download do Plugin

Compare preços de livros jQuery.

, ,

9 Comentários

Menu Accordion (Sanfona) com jQuery e CSS

Postado por Danilo in jQuery em 12 de junho de 2009

Hoje vou mostrar como criar um menu accordion (Sanfona) utilizando jQuery e CSS, com um exemplo bem prático.

Este menu accordion é mais conhecido como menu Sanfona, é muito útil quando temos um número grande de categorias e sub-categorias em um menu lateral, ele facilita à organização do menu e ainda podemos colocar uns efeitinhos com jQuery.

Para utilizar este menu é preciso da biblioteca do jQuery

Para baixar o jQuery clique aqui.


Chamando o jQuery

<script src="jquery-1.3.2.min.js" type="text/javascript"></script>


HTML:

Aqui está o html do menu, colocar um id=”nav-menu” na base do menu.

<ul id="nav-menu">
	<li>
		<a href="javascript:void(0);">Etapa 1</a>
		<ul>
			<li><a href="#">Etapa 1.1</a></li>
			<li><a href="#">Etapa 1.2</a></li>
		</ul>
	</li>
	<li>
		<a href="javascript:void(0);">Etapa 2</a>
		<ul>
			<li><a href="#">Categoria 2.1</a></li>
			<li><a href="#">Categoria 2.2</a></li>
		</ul>			
	</li>
	<li><a href="javascript:void(0);">Categoria 3</a></li>
	<li>
		<a href="javascript:void(0);">Categoria 4</a>
		<ul>
			<li><a href="#">Categoria 4.1</a></li>
			<li><a href="#">Categoria 4.2</a></li>
		</ul>
	</li>			
</ul>


Javascript:

Aqui neste código estamos bindando um evento clique para o próximo elemento depois da tag a que está dentro da li por sua vez dentro da ul com id #nav-menu, cada vez que clicar nela vamos dar um efeito slideToggle.

$(document).ready( function() {
	$('ul#nav-menu > li > a').click(function() {
		$(this).next().slideToggle();
	});
});


Css:

Agora aplicamos um css no menu para não ficar sem graça, mas você pode alterar conforme a necessidade.

ul#nav-menu { margin:0; padding:0; list-style:none; }
ul#nav-menu > li { margin-top:1px; background:#AFAFAF; font-weight: bold; width: 200px; list-style:none; }
ul#nav-menu > li > a { display:block; padding: 4px; color: #EFEFEF; text-decoration:none; outline:none; }
ul#nav-menu > li > a:hover { background: #8F8F8F; }
ul#nav-menu > li > ul { margin: 0; padding:0; list-style:none; display:none; background:#9F9F9F; }
ul#nav-menu > li > ul > li{ height: 30px; list-style:none; padding: 0;}
ul#nav-menu > li > ul > li:hover{ height: 30px; background: #8F8F8F;}
ul#nav-menu > li > ul > li a { display:block; padding: 2px 0 0 4px; color:#EFEFEF; text-decoration:none; outline:none; }
ul#nav-menu > li > ul > li a:hover { color:#FFF; background: #8F8F8F; }


Veja abaixo um exemplo do menu já pronto!

Compare preços de livros jQuery.

, , ,

3 Comentários