Abrindo uma Conexão

var db = openDatabase('CONTATOS', '0.1', 'Lista de contatos', 200000);

O código acima cria um objeto de banco de dados “db” com 4 argumentos:

1. Nome do banco de dados;
2. Versão;
3. Descrição;
4. Tamanho estimado da base de dados.

Não se preocupe com o tamanho da base de dados pois ela é flexível. Aparentemente ao exceder o tamanho o navegador mostrará ao usuário uma janela pedindo autorização para expandir o espaço.

Para testar se a conexão foi criada com sucesso, basta verificar se “db” é nulo:

if (! db) alert ("Falha ao conectar no banco de dados.");

É muito importante fazer este teste de conexão antes de qualquer outro código pois existem várias razões pela qual o navegador poderá negar acesso ao banco, como por exemplo por questões de segurança e espaço.

Criando uma Tabela

db.transaction(function (tx) {
        tx.executeSql('CREATE TABLE IF NOT EXISTS contatos (id INTEGER PRIMARY  KEY AUTOINCREMENT, nome VARCHAR, tel INTEGER)');
});

(Para saber os Datatypes do SQLite visite a página Datatypes In SQLite Version 3.)

Executando Consultas

O bacana desta API é que ela trata as operações como transações. Com transações é possível reverter as operações em caso de erro. Cada transação pode conter várias SQL e caso alguma apresente falha, nada é alterado no banco, preservando sua consistência.

Há também erro e callbacks de sucesso na transação, assim você pode gerenciar os erros, mas é importante entender que as operações têm a capacidade de reverter as mudanças.

Transação é uma simples função que contém os códigos SQL:

db.transaction(function (tx) {
        // Aqui acontece a mágina com a SQL utilizando o objeto "tx" que foi passado por parâmetro
});

Para ficar mais claro, vamos a alguns exemplos:

Inserindo um Registro

db.transaction(function(tx) {
        tx.executeSql('INSERT INTO contatos (nome, tel) VALUES (?,?)', ['Marcos', '2222-3333'], null, function(tx, e) {
                // caso ocorra algum erro
                alert(e.message);
        });
});

Lendo os Registros

// busca os contatos do banco
db.transaction(function (tx) {
        tx.executeSql('SELECT * FROM contatos', [], function (tx, resultado) {
                for (i = 0; i < resultado.rows.length; i++)
                        alert(resultado.rows.item(i)['nome']);
        });
});

Exemplo Funcional

Atenção, verifique se o seu navegador tem suporte a Web SQL Database antes de clicar no exemplo.

Simples Exemplo de uso do HTML Web SQL Storage.

Gostou? Deixe um comentário!

Então segue um simples código para resolver esta situação de forma bem simples:

$(function(){
	$('#id-do-item-pai, #sub-menu').mouseover(function(){
		$('#sub-menu').css('display','block');
	}).mouseout(function(){
		$('#sub-menu').css('display','none');
	});
});

E o HTML seria algo como:

	Ítem Pai

Sub ítem 01
Sub ítem 02

Simples assim.

O bom dessas ferramentas, é que elas podem ser usadas em sistemas CMS onde usuários leigos podem inserir tranquilamente a imagem da matéria de capa sem ter que depender de um designer (e sem estragar o layout dele).

Uma ferramenta poderosa é o Jcrop, ela oferece bloqueio de proporção, animação e você ainda pode personalizar o css e deixar mais a cara da sua aplicação. E ainda é cross-browser.

Como usar é bem simples, basta incluir o arquivo do plugin e aplicar o plugin com o seguinte comando:

$(function(){
	$('#id-da-imagem').Jcrop();
});

Claro que esta é a forma mais simples, mas na área de exemplos do site existem os códigos para você incrementar este código da maneira que você precisar.

Mas não pára por aí, não adianta selecionar a parte da imagem que você quer se não houver o corte da imagem. Para isso vou usar o exemplo do próprio autor utilizando a biblioteca GD do PHP.

Antes de mais nada, precisamos postar as posições a serem cortadas. Para isso, utilize campos input hidden da seguinte forma:

E a seguinte função para popular esses campos:

jQuery(function(){
        jQuery('#id-da-imagem').Jcrop({
                aspectRatio: 1,
                onSelect: updateCoords
        });
});

function updateCoords(c)
{
        jQuery('#x').val(c.x);
        jQuery('#y').val(c.y);
        jQuery('#w').val(c.w);
        jQuery('#h').val(c.h);
};

Postado as coordenadas da imagem, utilizamos o seguinte código PHP para criar a nova imagem:

$targ_w = $targ_h = 150;
$jpeg_quality = 90;

$src = 'demo_files/flowers.jpg';
$img_r = imagecreatefromjpeg($src);
$dst_r = ImageCreateTrueColor( $targ_w, $targ_h );

imagecopyresampled($dst_r,$img_r,0,0,$_POST['x'],$_POST['y'],
    $targ_w,$targ_h,$_POST['w'],$_POST['h']);

header('Content-type: image/jpeg');
imagejpeg($dst_r, null, $jpeg_quality);

No entanto, a maioria dos plugins que encontrei eram já desenhados pensando em imagens. Os que eram mais genéricos, eram grandes, de difícil personalização.

Perdi tanto tempo testando que nem me lembrei de como é fácil fazer as coisas com jQuery. Foi aí que resolvi escrever um código simples que resolvesse o meu problema.

E a seguir está o código. Simples, fácil de personalizar e que resolveu a situação.

var tamCarrosel = ($("#carroselEfeito li").length-1);

$('#carrosel_proximo').click(function() {
	if(i == 0)
		$('#seta_esquerda a').css({'backgroundPosition':'0 0'});
	if(i < tamCarrosel){
		$('#carroselEfeito li').eq(i).animate({ left : "-"+700}, function() {
			$('#carroselEfeito li').eq(i+1).css({ left: "700px"});
			$('#carroselEfeito li').eq(i).hide();
			$('#carroselEfeito li').eq(i+1).animate({left: "-"+0});
			i++;
			if(i == tamCarrosel)
				$('#seta_direita a').css({'backgroundPosition':'0 75px'});
		});
	}
});
$('#carrosel_anterior').click(function(){
	if(i == tamCarrosel)
		$('#seta_direita a').css({'backgroundPosition':'0 0'});
	if(0 < tamCarrosel && i>0){
		$('#carroselEfeito li').eq(i).animate({left : "+"+700}, function(){
			$('#carroselEfeito li').eq(i-1).css({right: "700px"});
			$('#carroselEfeito li').eq(i).hide();
			$('#carroselEfeito li').eq(i-1).animate({left: "-"+0});
			i--;
			if(i == 0)
				$('#seta_esquerda a').css({'backgroundPosition':'0 75px'});
		});
	}
});

E o HTML, mais simples ainda:

ítem 01
ítem 02
ítem n

Vou sempre postar os plugins mais interessantes que já testei para que outros economizem o tempo que já gastei pesquisando sobre. Obviamente que algumas cada caso é um caso.