Posted by Gabriel Verta | Posted in JavaScript, jQuery | Posted on 13-11-2009-05-2008
0
Neste post venho mostrar-lhes outro bom plugin para jQuery, o jCarousel.
Com este plugin podemos fazer com que diversas imagens rodem em um espaço limitado tornando o layout mais amigável.
Vamos ao nosso primeiro exemplo de carrossel:
Para fazer um carrossel simples, como este, precisaremos dos arquivos de js e css da biblioteca jCarousel, além do css de skin do jCarousel a ser utilizado, e do js do jQuery. Segue o código:
<html>
<head>
<title>Carrossel simples com jQuery</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/jcarousel.css" />
<link rel="stylesheet" type="text/css" href="css/tango-skin.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jcarousel.js"></script>
<script type="text/javascript">
$(function(){
$('#carrossel').jcarousel()
})
</script>
</head>
<body>
<h1>jCarousel - Carrosel Simples</h1>
<ul id="carrossel" class="jcarousel-skin-tango">
<li><img src="img/imagem1.jpg" /></li>
<li><img src="img/imagem2.jpg" /></li>
<li><img src="img/imagem3.jpg" /></li>
<li><img src="img/imagem4.jpg" /></li>
<li><img src="img/imagem5.jpg" /></li>
<li><img src="img/imagem6.jpg" /></li>
</ul>
</body>
</html>
Este é o exemplo mais simples de utilização do jCarousel, existem várias outras variações deste através de opções passadas a ele. Dentre as funcionalidades podemos destacar:
O post original está no blog da Stiod 
Posted by alex | Posted in .NET, Geral, HTML, JSP, JavaScript, POO | Posted on 11-11-2009-05-2008
0
E aí galera blz!
Sou o Alexander, mais conhecido Alex. Trabalho na Agence como webdesigner e faço freelancers através de minha empresa Lexadesign.
Neste meu primeiro post no blog dos Relaxos vou mostrar como fazer rolagem de página animada utilizando jQuery:
Começando com o HTML, montamos uma estrutura contendo título, links e imagem. A rolagem animada entre estes itens será feita por Jquery.
Criamos uma DIV #container para alinhar o conteúdo ao centro, em seguida as DIVs #um, #dois, #tres e #quatro. Cada um contendo H1, lista com links e uma imagem.
HTML:
<div id="container">
<div id="um">
<h1>Conteudo 01</h1>
<ul>
<li><a href="#dois">ir para conteúdo 02</a></li>
<li><a href="#tres">ir para conteúdo 03</a></li>
<li><a href="#quatro">ir para conteúdo 04</a></li>
</ul>
<img src="moto-mv-agusta-f4-senna-c8726.jpg" alt="" />
</div>
<div id="dois">
<h1>Conteudo 02</h1>
<ul>
<li><a href="#tres">ir para conteúdo 03</a></li>
<li><a href="#quatro">ir para conteúdo 04</a></li>
<li><a href="#um">ir para conteúdo 01</a></li>
</ul>
<img src="9673moto.jpg" alt="" />
</div>
<div id="tres">
<h1>Conteudo 03</h1>
<ul>
<li><a href="#quatro">ir para conteúdo 04</a></li>
<li><a href="#um">ir para conteúdo 01</a></li>
<li><a href="#dois">ir para conteúdo 02</a></li>
</ul>
<img src="11209moto2.jpg" alt="" />
</div>
<div id="quatro">
<h1>Conteudo 04</h1>
<ul>
<li><a href="#um">ir para conteúdo 01</a></li>
<li><a href="#dois">ir para conteúdo 02</a></li>
<li><a href="#tres">ir para conteúdo 03</a></li>
</ul>
<img src="4268moto1-1.jpg" alt="" />
</div>
</div>CSS:
html, body {
margin:0;
font:12px Arial, Helvetica, sans-serif;
}
#container {
width:95%;
margin:0 auto;
}
h1 {
display:block;
width:60%;
position:relative;
float:left;
}
#um, #dois, #tres, #quatro{
padding:10px;
width:95%;
text-align:center;
}
ul {
width:40%;
margin:0;
padding:20px 0 10px;
position:relative;
list-style:none;
float:left;
}
ul li {
position:relative;
float:left;
}
ul li a {
display:block;
padding:4px 8px;
color:#063;
text-decoration:none;
}Temos a estrutura básica com todos os links apontados para os seus devidos lugares. Porém ao clicar a página é deslocada de forma brusca e nada atrativa.
Eis o momento em que damos vida a nossa página adicionando a biblioteca JQuery disponível no site http://jquery.com/
$(function(){
//Rolagem de página
//Definindo a ação - No caso indico que ao clicar em qualquer <strong>tag A</strong> desencadeia a seguinte ação
$("a").click(function(){
//animar, a partir do html/body, a rolagem
$('html,body').animate({scrollTop:
//até a posição obtida pela altura do <strong>elemento alvo</strong> a ser especificado
$("elemento alvo").offset().top}
//velocidade da animação em milisegundos
, 500);
//atribui para este caso, que retornasse na como <strong>elemento alvo</strong> o <strong>href</strong> do objeto clicado
$(this).attr("href")
A função completa ficou assim:
$(function(){
//Rolagem de página
$("a").click(function(){
$('html,body').animate({scrollTop: $($(this).attr("href")).offset().top}, 500);
})
})
})
})
Posted by Gabriel Verta | Posted in JavaScript, jQuery | Posted on 10-11-2009-05-2008
0
Continuando o post anterior sobre jQuery, iremos descrever o objeto jQuery.
A maioria das funcionalidades do jQuery é iniciada pela objeto $. O $ no jQuery possui diversas funcionalidades, que podem ser:
- Obtenção de objetos a partir de seletores.
Ex.: Obtendo todos os objetos que contenham a classe “dinamico”:
alert($(".dinamico").length)- “Window onload” (funções que irão ser executadas após o término do carregamento da página).
Ex.: Executando função com mensagem simples:
$(function(){
alert("A página já carregou!")
})- Funções úteis (a serem descritas em um próximo post).
Ex.: Removendo espaços do final e começo de uma string:
alert($.trim(" texto ").length)- Ajax
Ex.: Requisição ajax por get
$.get("exemplo-ajax.php", function(resposta){
alert(resposta)
})- Criar conteúdo dinâmicamente
Ex.: Adicionando um novo paragrafo ao corpo da página:
$('<p>Novo Paragrafo</p>').appendTo(document.body)Seletores
Seletores são declarações que igualam um ou vários elementos do HTML. São eles que mapeiam o HTML no css:
| Seletor |
Descrição |
| TAG |
Traz todos os elementos que sejam da TAG selecionada.
Ex.:
|
| #ID |
Traz o elemento que tenha o ID selecionado.
Ex.:
$('#conteudo').css('background-color', '#ccc') |
| .CLASSE |
Traz todos os elementos que tenham a CLASSE selecionada.
Ex.:
$('.content-center').css('text-align', 'center') |
| [PROPRIEDADE=VALOR] |
Traz todos os elementos que tenham a PROPRIEDADE com o VALOR selecionado.
Ex.:
$('[name=nome]').val('Gabriel Verta') |
| SELETOR1 SELETOR2 |
Traz todos os elementos que SELETOR2 que estejem dentro do SELETOR1.
Ex.:
$('div label').addClass('required') |
Existe uma lista extensa de seletores para jQuery, que podem ser vistas na documentação oficial do jQuery. Tentei criar um site com uma forma dinâmica de ver estes seletores em jQuery, espero que entendam como funciona o site.
O post original está no blog da Stiod.
