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

O objeto JQuery e seus seletores

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.:

alert($('p').length)
#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.

Read More
Previous