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.

The Cloud Player – iTunes na web com jQuery

Postado por: Pedro Rogério em
Cloud Player

A portabilidade das aplicações desktop para a web já não é novidade, mas dessa vez fiquei impressionado ao descobrir que Eric Wahlforss desenvolveu uma cópia fiel do iTunes que roda na web, o The Cloud Player. Ele utilizou as seguintes tecnologias para isso:

Lá você possui a opção de criar novas playlists, salvá-las em em sua conta do Google, classificar playlists, além de poder compartilhar com seus amigos.

Sistemas operacionais em JavaScript na Web

Postado por: Pedro Rogério em

Os browsers estão ficando a cada dias mais poderosos, e com isso cada vez mais é possível usar e abusar do JavaScript, e foi com isso que James Luterek desenvolveu um mini sistema operacional, o JSOS, que roda no browser utilizando jQuery. O sistema é composto das seguintes opções:

  • Botão Start
  • Barra de tarefas onde você pode minimizar as janelas e reabrí-las novamente.
  • Janelas (Você pode criar, mover, minimizar, maximizar, etc.)
  • Mostrar o Desktop com o clique direito do mouse.
  • Alterar propriedades do background, Tema, Cor do texto.
  • Todas as alterações são salvas em cookies para serem carregadas novamente em uma visita posterior.
JSOS

Continuar lendo »

Ler arquivos CSV com jQuery

Postado por: Pedro Rogério em

O que é CSV?

Comma-separated values (ou CSV) é um formato de arquivo que armazena dados tabelados, cujo grande uso data da época dos mainframes. Por serem bastante simples, arquivos .csv são comuns em todas as plataformas de computador.

O CSV é um implementação particular de arquivos de texto separados por um delimitador, que usa a vírgula e a quebra de linha para separar os valores. O formato também usa as aspas em campos no qual são usados os caracteres reservados (vírgula e quebra de linha). Essa robustez no formato torna o CSV mais amplo que outros formatos digitais do mesmo segmento.

Formalmente, o CSV é um formato de dados delimitado que possui campos (colunas) separados por caracteres de vírgula e registros (linhas) separados por caracteres de quebra de linha. Campos que contêm caracteres especiais (vírgula, quebra de linha ou aspas) devem ser envolvidos em aspas. Entretanto, se uma linha contiver uma única entrada que seja uma cadeia vazia, ela também pode ser envolvida por aspas. Se um campo contiver um caractere de aspas, ele é discernido posicionando outro caractere igual logo em seguida. O formato CSV não requisita uma codificação de caracteres, uma ordenação de bytes ou um formato de terminador de linha.

Exemplo

1997 Ford E350 ac, abs, moon 3000.00
1999 Chevy Venture “Extended Edition” 4900.00
1996 Jeep Grand Cherokee MUST SELL!
air, moon roof, loaded
4799.00

A tabela acima pode ser ser representada em CSV da seguinte maneira:


1997,Ford,E350,"ac, abs, moon",3000.00
1999,Chevy,"Venture ""Extended Edition""",,4900.00
1996,Jeep,Grand Cherokee,"MUST SELL!
air, moon roof, loaded",4799.00

Fonte: Wikipédia

Integrar CSV com jQuery

Acompanhando o blog de um amigo, descobri que existe um plugin para jquery que através dele você pode ver de forma amigável arquivos CSV na web, o csv2table. Sua utilização é relativamente muito simples, basta ter o jquery na página juntamente com a utilização do plugin, após é só chamar a função com o local do arquivo e onde ele deve ser aberto na página, exemplo:

<script src="./js/jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="./js/jquery.csv2table-0.02-b-1.9.js" type="text/javascript" charset="utf-8"></script>

<div id="view0"></div>
<script>
$(function(){
  $('#view0').csv2table('./data/Book12.csv');
});
</script>
Páginas:«1...567891011...17»