Live event binding com jQuery 1.3

Postado por: Pedro Rogério em

jQuery 1.3 introduziu um novo recurso chamado live event binding que simplifica anexar eventos aos elementos já existentes como para elementos futuros. Isso é muito útil, pois utilizando o método antigo bind() são atribuídos eventos aos manipuladores que já estão presentes no DOM no momento em que o evento é vinculado. Com live() você pode escrever seu evento e possuir caráter vinculado, uma vez que ele é anexado a futuros elementos criados.

Não tive desculpa para utilizar esse recurso ainda, por isso, decidi criar um exemplo trivial para demonstrar. Neste exemplo, eu tenho uma lista com 3 elementos desordenados. Clicar nos itens irá removê-los da lista. Haverá também um link que com a opção de anexar novos itens(que deve também ter a opção de clicar e remover).

Em ambos os casos, essa é a marcação que será utilizada:

<a href="#" class="add">Adicionar item</a>
<ul id="items">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
</ul>

Nota: Eu irei utilizar bind(‘click’, fn) ao invés de elm.click(fn) simplesmente por que a sintaxe é mais parecida com o live().

Continuar lendo »

jQuery Price Plugin

Postado por: Pedro Rogério em

postou uma vez aqui no blog um plugin para formatação de campos de formulário, onde eram adicionadas máscaras nos campos implicados em data, hora, telefone, etc. Mais os usuários queriam mesmo uma forma de aplicar formatação a moeda, pois então, descobri um plugin que faz exatamente isso, e o melhor de tudo é que ele pode ser customizado para a moeda brasileira.

Exemplo

$("#example1").priceFormat();

Esse código retornaria algo do tipo:

US$ 1,234.56

O exemplo básico utiliza por padrão a moeda americana, agora vamos a um exemplo de customização da moeda:

$("#example2").priceFormat({
    prefix: 'R$ ',
    centsSeparator: ',',
    thousandsSeparator: '.'
});

Esse código retorna algo como:

R$ 1.234,56

Para maiores informações sobre utilização do plugin, download, basta visitar o site do desenvolvedor.

Prototype vs. jQuery

Postado por: Pedro Rogério em

Prototype vs. jQuery, quais desses Frameworks JavaScript utilizar? Isso é um tipo de discussão que ocorre constantemente entre os desenvolvedores. Utilizar jQuery, devido seu slogan chamativo: “The Write Less, Do More”, ou utilizar Prototype, com seu arsenal de utilidades? Coisas desse tipo são explicadas nesses slides desenvolvidos por Remy Sharp, onde é feita uma comparação entre: funções, seletores, manipulação do DOM, eventos, Ajax e detecção do browser.

Veja também um outro comparativo feito por Glenn Vanderburg em seu blog dizendo o por que de ele preferir Prototype ao invés de jQuery.

Link para imprimir página com JavaScript e jQuery

Postado por: Pedro Rogério em

É extremamente muito simples implementar um link para imprimir a página com JavaScript em seu site. Através do evento onclick podemos abrir a janela de impressão do browser para que o usuário possa imprimir a página. Uma forma não muito elegante, pois mistura JavaScript com a camada de conteúdo(HTML) seria a seguinte:

<a href="#" onclick="window.print(); return false;">Imprimir</a>

Utilizando jQuery, podemos fazer isso de uma forma muito simples, observem o código abaixo:

$(document).ready(function() {
	$('a#print').click(function() {
		window.print();
		return false;
	});
});

Continuar lendo »

Carregar jQuery a partir do Google

Postado por: Pedro Rogério em

Se você pensa em fazer uma economia de banda para a sua aplicação web, utiliza jQuery, então acho bom pensar em carregar o arquivo JavaScript a partir do Google com a utilização de seu CDN (Rede de distribuição de conteúdo). A utilização é muito simples, basta fazer uma chamada para o JavaScript da seguinte forma:

<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
	// Load jQuery
	google.load("jquery", "1.3");

	google.setOnLoadCallback(function() {
		// Seu código aqui
	});
</script>

Ou então você pode fazer uma referência direta ao arquivo da seguinte forma:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>

O que fazemos é utilizar a API de bibliotecas Ajax do Google, mas você não pode fazer isso somente com jQuery, ao utilizar o google.load() da API do Google, você pode ter também acesso a várias bibliotecas JavaScript como: jQuery, jQuery UI, Prototype, script.aculo.us, MooTools, Dojo, SWFObject e Yahoo! User Interface Library.

Outra característica é que você pode especificar a versão que deseja utilizar e se deseja que ela seja carregada “comprimida” ou não

<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load("jquery", "1.3", {uncompressed:true});
</script>

Para aqueles que não sabem, já saiu a versão 1.3 do Framework jQuery. As novidades você pode ver no Release do site.

Simple Tabs – Tabs com JavaScript

Postado por: Pedro Rogério em

Simple Tabs é um ótimo recurso para você que deseja desenvolver um sistema de tabs em sua página sem o uso de Frameworks JavaScript, bom por um lado que você evita possíveis conflitos de JavaScript e o tamanho do arquivo JavaScript é bem reduzido, cerca de 6KB. Esse script também é muito interessante no ponto de que ele “recorda” a última tab que você acessou ao voltar a página.

Sua utilização é muito simples, basta você fazer o uso dos arquivos simpletabs.js e simpletab.css e criar um estrutura XHTML semelhante a essa:

<div class="simpleTabs">
    <ul class="simpleTabsNavigation">
        <li><a href="#">Tab 1</a></li>
        <li><a href="#">Tab 2</a></li>
        <li><a href="#">Tab 3</a></li>
    </ul>
    <div class="simpleTabsContent">Conteúdo referente a "Tab 1".</div>
    <div class="simpleTabsContent">Conteúdo referente a "Tab 2".</div>
    <div class="simpleTabsContent">Conteúdo referente a "Tab 3".</div>
</div>

Vejam agora o exemplo do script em funcionamento. Se você quiser pode também efetuar o download dos arquivos utilizados no exemplo.

Via: Intenta

jQuery :random filter

Postado por: Pedro Rogério em

Você já pensou na possibilidade de obter itens randômicos com jQuery? Já tentou fazer isso e não conseguiu? Eu encontrei no site de Waldek Mastykarz uma maneira muito simples de se fazer isso. Não vou explicar aqui o código pois o autor já fez isso, mas aqui vai a solução:

jQuery.jQueryRandom = 0;
jQuery.extend(jQuery.expr[":"],
{
    random: function(a, i, m, r) {
        if (i == 0) {
            jQuery.jQueryRandom = Math.floor(Math.random() * r.length);
        };
        return i == jQuery.jQueryRandom;
    }
});

Um exemplo de utilização do filtro :random que agora foi criado seria da seguinte forma:

<ul>
    <li>Primeiro</li>
    <li>Segundo</li>
    <li>Terceiro</li>
</ul>
<script type="text/javascript">
    $(document).ready(function() {
        alert($("li:random").text());
    });
</script>

Simples, vejam esse exemplo para um melhor entendimento. A cada refresh na página, ele me traz um item diferente.

Páginas:«1234567...13»