JQuery 1.4 – Novas funcionalidades

Posted by Gabriel Verta | Posted in JavaScript, jQuery | Posted on 01-02-2010-05-2008

3

A nova versão do JQuery saiu no começo do mês de Janeiro, a 1.4.1, com novas funcionalidades, onde podemos destacar:

Todos os códigos abaixo foram testados a partir do seguinte html:

<form>
    <div id="div-nome">
        <label for="nome">Nome:</label>
        <input id="nome" />
     </div>
     <div>
        <label for="email">E-mail:</label>
        <input id="email" />
     </div>
     <div>
        <label for="endereco">Endereço:</label>
        <input id="endereco" />
     </div>
     <div class="submit">
        <input type="submit" value="Salvar" />
     </div>
</form>

Nova forma de criação de objetos DOM: Cria objetos DOM de forma simplificada:

$('<button />', {
    attr: {
      type: 'button'
    }, 
    css: {
      fontWeight:'bold'
    },
    html: 'Botao'
}).appendTo('body')

Os exemplos abaixo adicionam o botão dinamicamente

delay: Adiciona um timer (temporizador) para execução dos itens subsequentes em uma fila. Funciona em efeitos que utilizam de queue para funcionar, que rodam de tempos em tempos, como por exemplo o fadeIn, fadeOut, slideUp, slideDown…

$('#nome').fadeOut('normal').delay(3000).fadeIn('normal')

detach: Remove um elemento da tela, a partir de um filtro de uma lista já existente.

$('input').detach(':submit').css('border', '1px solid blue')

first: Retorna o primeiro elemento como objeto jQuery de uma lista

$('input').first().css('border', '1px solid black')

last: Retorna o último elemento como objeto jQuery de uma lista

$('input').last().css('font-weight', 'bold')

focusin: Evento que representa o onfocus do javascript, no momento em que se poe o foco no objeto.

$('input').focusin(function(){
  $(this).css('background', 'lightgray')
})

focusout: Evento que representa o onblur do javascript, no momento em que se perde o foco do objeto.

$('input').focusout(function(){
  $(this).css('background', 'white')
})

has: Retorna se existe um objeto na lista de filhos (childNodes) do elemento atual.

alert($('form').has('input').length)
alert($('form').has('select').length)

parentsUntil: Retorna todos os elementos pai (parentNode) do elemento em questão até antes de encontrar o seletor que for passado.

$(':submit').parentsUntil('body').css('margin', '10px')

prevUntil: Retorna todos os elementos anteriores ao elemento em questão até antes de encontrar o seletor que for passado.

$('input:submit').prevUntil('form').css('background', 'red')

unwrap: Remove o elemento pai ao elemento em questão e insere o elemento novamente na mesma posição sem o elemento pai.

$('input:submit').unwrap()

jQuery.parseJSON: Trata a string JSON retornando o objeto gerado.

var json = $.parseJSON('[1, 2, "relaxos"]')
alert(json[2])

É isso ai ;)

Read More

Carrossel de imagens com jQuery

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 ;)

Read More

Rolagem de página animado com JQuery

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);
})
})
})
})
Read More
Previous