Conheça a bibliteca JavaScript jQuery

As apps da web 2.0 são uma doce verdade, isso tudo graças à uma metodologia chamada Ajax(Asynchronous Javascript And XML). O Ajax ficou famoso após o lançamento do Gmail em 2004, muitos acham que o Gmail é o começo do plano de conspiração do Google, mas isso é outra história.

O Ajax trouxe muitas vantagens aos internautas, antigamente quando clicava-se em um link, uma nova página era aberta, e todas as imagens e menus anteriores eram carregados inumeras  vezes, com o Ajax é diferete, apenas partes especifícas são recarregados.

Essa mania pegou rapidamente, pois a agilidade que isso tras ao programador é imensa, o problema é que existem muitos navegadores, e o JavaScript se comporta de varias maneiras, tudo isso pelo fato de que o programador tem que criar um objeto XMLHTTP Request para o IE, Firefox, Safari, Chrome e outros.

Nesse ponto, surge o jQuery, que se comporta de forma inteligente na maioria dos Navegadores, facilitando ainda mais a vida dos programadores, ou seja, funciona em um, funciona em todos. Para entender um pouco mais sobre o jQuery assista o Vídeo Post feito por Diego Soares que lhe mostrará as funcionalidades básicas do jQuery e como aplicar os códigos em suas aplicações, fique à vontade para comentar este artigo.

Para assistir o vídeo com uma qualidade melhor, acesse http://www.vimeo.com/3165655 ou http://videolog.uol.com.br/video.php?id=410377 ou assista no player abaixo.

Barra de Progresso com AJAX

for($i=0; $i<10000000; $i++) {
  if ($i%10000 == 0) echo ((int) $i/100000).'-';
  flush();
} 

function ajaxobj() {  
  try {  
    _ajaxobj = new ActiveXObject("Msxml2.XMLHTTP");  
  } catch (e) {  
  try {  
    _ajaxobj = new ActiveXObject("Microsoft.XMLHTTP");  
  } catch (E) {  
    _ajaxobj = false;  
  }  
}  

 if (!_ajaxobj && typeof XMLHttpRequest!='undefined') {  
   _ajaxobj = new XMLHttpRequest();  
 }  

 return _ajaxobj;  
}
function prueba () {  
  ajax = ajaxobj();  
  ajax.open("GET", "res.php", true);  
  ajax.onreadystatechange=function() {
  if (ajax.readyState == 3) {  

   // Mostramos o percentual 
   var res = ajax.responseText;
   res = res.split('-');  
   alert(res[res.length-2]);  
  } else if (ajax.readyState == 4) {  

  // Fim
  alert('FIM');  
 }  
}  

 // Enviamos algo para que o processo funcione
 ajax.send(null);  
}  

Colocando minha empresa no mapa…

Este artigo, por mais simples que seja, tende a ser uma das maiores dúvidas e desejos dos usuários que estão iniciando nesta área. Como colocar minha empresa, estabelecimento, casa etc., no mapa. Com certeza no seu site é muito importante existir além do endereço da sua empresa um pequeno mapa representando tudo que está em volta dela para que os usuários possam se localizar mais facilmente.

Nosso foco hoje é criar um mapa utilizando a API do Google Maps. Com isso, não precisamos de nenhum banco de dados geográfico ou qualquer outro tipo de aplicação para desenvolvimento de mapas além das linguagens HTML e JavaScript.

Segundo o próprio Google, o que é a API do Google Maps?

A API do Google Maps permite usar JavaScript para incorporar o Google Maps em sua página da web. A API fornece diversos utilitários para manipular mapas (como na página http://maps.google.com) e adicionar conteúdo ao mapa através de diversos serviços. Você pode criar aplicativos de mapas robustos em seu site.

Passo 1: Obtendo uma chave para a API do Google Maps.

Para utilizarmos a API do Google, precisamos obter uma chave de identificação para o nosso site. É muito importante que você coloque a URL correta do caminho onde estará o mapa, caso contrário, ao instanciar a API no seu código, ela não funcionará.

Acesse o link : http://code.google.com/intl/pt-BR/apis/maps/signup.html, preencha as informações da URL do seu site e clique em GERAR chave de API. Não se esqueça de ler os termos de uso da API, nada de utilizá-la dentro de intranets.

Obs.: Você precisa ter um usuário cadastrado no Google para obtê-la.

Pronto, chave gerada, podemos ir para o próximo passo.

Passo 2: Obtendo o XY da sua empresa

Inicialmente, para identificarmos a sua empresa/estabelecimento/etc no mapa, precisamos da localização correta dela. A localização que comento é com relação ao seu XY. Mas o que é XY? Vamos à matemática…

Para a construção do modelo da superfície topográfica de uma dada região, necessitamos das triplas (x, y, z) de uma série de pontos da superfície do terreno. Os valores (x, y, z) são as coordenadas cartesianas de um ponto P, relativas a um sistema de coordenadas preestabelecido (como já vimos em meu outro artigo Sistemas de Informação Geográfica).

O plano XY é o plano horizontal de referência relativamente ao nível médio dos mares, e z é a distância vertical do ponto P ao plano horizontal XY (se me permitem exemplificar desta maneira, seria a altura em relação ao nível do mar, no nosso caso, não será necessária).

Como posso obter este ponto?

Existem diversas maneiras de se obter o XY de um endereço, vou exemplificar duas: a primeira é suscetível a alguns erros, motivo pelo qual o mapeamento da numeração das ruas nas cidades do Brasil não ser de fato correto (mas confesso que é satisfatório). O que quero dizer é que muitas vezes quando você informa o seu endereço, por exemplo o número 567, seriam 567 metros do ponto inicial da sua rua, nem sempre esta numeração irá bater exatamente no local da sua casa (quando digo exatamente, ainda considero um erro de 50m). Pode acontecer de aparecer na quadra errada; quando ocorrer, sugiro utilizar o segundo exemplo de aquisição do XY.

A primeira maneira que me refiro é solicitar através da url http://maps.google.com/maps/geo?q=STRING+DO+ENDERECOoutput=xmlkey=SUA_CHAVE

Obs.: Separe a string com “+”.

Exemplo:

http://maps.google.com/maps/geo?q=avenidaipiranga1200portoalegrersbrasiloutput=xmlkey=

Exemplo da resposta (response) em XML:

Pronto, seu XYZ é a coordenada <coordinates>-51.2093204,-30.0451247,0</coordinates> .

Agora você pode pular o segundo exemplo e ir direto ao passo 3, mas antes vamos verificar se o ponto está mesmo no local correto.

Acesso o seguinte link:

http://maps.google.com.br/maps?f=qsource=s_qhl=pt-BRgeocode=q=(-30.0451247,-51.2093204)

OBS: Lembre-se de alterar a ordem dos pontos XY <-> YX

A segunda maneira de se obter as coordenadas XY é implementar um outro exemplo utilizando a API do Google Maps. Chamamos este exemplo de Geocode Reverso (através de um clique no mapa iremos obter as informações quanto a este local).

O exemplo abaixo está presente na página da API do Google Maps, mantive-o como o qual para explicar cada linha.

Código

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>Google Maps JavaScript API Example: 	Reverse Geocoder</title>
    <script src="http://maps.google.com/maps?file=apiv=2.xkey=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA"
            type="text/javascript"></script>
    <script type="text/javascript">

    var map;
    var geocoder;
    var address;

    function initialize() {
      map = new GMap2(document.getElementById("map"));
      map.setCenter(new GLatLng(-30.0270583,-51.2303402), 10);
      map.addControl(new GLargeMapControl);
      GEvent.addListener(map, "click", getAddress);
      geocoder = new GClientGeocoder();
    }

    function getAddress(overlay, latlng) {
      if (latlng != null) {
        address = latlng;
        geocoder.getLocations(latlng, showAddress);
      }
    }

    function showAddress(response) {
      map.clearOverlays();
      if (!response  response.Status.code != 200) {
        alert("Status Code:"  response.Status.code);
      } else {
        place = response.Placemark[0];
        point = new GLatLng(place.Point.coordinates[1],
                            place.Point.coordinates[0]);
        marker = new GMarker(point);
        map.addOverlay(marker);
        marker.openInfoWindowHtml(
        '<b>orig latlng:</b>'  response.name  '<br/>'
        '<b>latlng:</b>'  place.Point.coordinates[1]  ","  place.Point.coordinates[0]  '<br>'
        '<b>Status Code:</b>'  response.Status.code  '<br>'
        '<b>Status Request:</b>'  response.Status.request  '<br>'
        '<b>Address:</b>'  place.address  '<br>'
        '<b>Accuracy:</b>'  place.AddressDetails.Accuracy  '<br>'
        '<b>Country code:</b> '  place.AddressDetails.Country.CountryNameCode);
      }
    }
    </script>
  </head>

  <body onload="initialize()">
    <div id="map" style="width: 500px; height: 400px"></div>
  </body>
</html>

Você já viu um exemplo da resposta (response) em XML no exemplo anterior.

Exemplo da resposta (response) em JSON:

Através dos arquivos acima, você consegue identificar quais as variáveis necessárias para obter os dados do geocode.

Por fim e não menos importante, o corpo do HTML:

<body onload="initialize()">
    <div id="map" style="width: 500px; height: 400px"></div>
        <div id="temp"></div>
  </body>

Não se esqueça de utilizar o ONLOAD para chamar a função initialize() para tão logo carregar a página iniciar o procedimento da criação do mapa. Não quero ver ninguém comentando que o mapa não aparece!

Pronto, agora navegue no mapa, procure o endereço da sua empresa (ainda não criamos uma barra de pesquisa de endereço, nos próximos artigos irei explicar como), clique no local e copie as informações da linha latlng.

Agora temos o XY para continuar no nosso artigo.

Passo 3: Adicionando minha empresa no mapa

Bom, se você já criou o exemplo anterior do geocode reverso, este agora é muito mais simples. Caso contrário, vamos lá passo a passo.

Vamos ao código

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API Example: Simple Markers</title>
    <script src="http://maps.google.com/maps?file=apiamp;v=2amp;key=
	ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA"
            type="text/javascript"></script>
    <script type="text/javascript">
    function initialize() {
      if (GBrowserIsCompatible()) { // Verifica se o browser é compativel com a API do Google
	    // Instância a API do Google e a adiciona na DIV map.
        var map = new GMap2(document.getElementById("map"));
		// Centraliza o mapa no XY, zoom 16 em uma escala de [1..17] (Varia de acordo com a região)
        map.setCenter(new GLatLng(-30.0451247,-51.2093204), 16);
		// (OPCIONAL) Adiciona os controle de a esquerda do Mapa (Zoom , Zoom -, barra de Zoom, etc)
        map.addControl(new GLargeMapControl);
		// Padronizamos o XY de acordo com o latlng da API: (Y,X)
        var latlng = new GLatLng(-30.0451247,-51.2093204);
        map.addOverlay(new GMarker(latlng)); // Adiciona o marker no mapa
      }//if
    }//function
    </script>
  </head>
  <body onload="initialize()" onunload="GUnload()">
    <div id="map" style="width: 500px; height: 300px"></div>
  </body>
</html>

OBS: Não se esqueça de trocar a sua chave da API. Não se esqueça de declarar o ONLOAD, para que a função initialize(), no meu exemplo, crie o mapa assim que a página seja carregada.

Resultado

Caso você queira incrementar o seu mapa e adicionar um evento de clique no marker, façamos algumas modificações no código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API Example: Simple Markers</title>
    <script src="http://maps.google.com/maps?file=api&v=2&key=
	ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA"
            type="text/javascript"></script>
    <script type="text/javascript">
    function initialize() {
      if (GBrowserIsCompatible()) { // Verifica se o browser é compativel com a API do Google
	    // Instância a API do Google e a adiciona na DIV map.
        var map = new GMap2(document.getElementById("map"));
		// Centraliza o mapa no XY, zoom 16 em uma escala de [1..17] (Varia de acordo com a região)
        map.setCenter(new GLatLng(-30.0451247,-51.2093204), 16);
		// (OPCIONAL) Adiciona os controle de a esquerda do Mapa (Zoom +, Zoom -, barra de Zoom, etc)
        map.addControl(new GLargeMapControl);
		// Padronizamos o XY de acordo com o latlng da API: (Y,X)
        var latlng = new GLatLng(-30.0451247,-51.2093204);
		var marker = new GMarker(latlng); // Criamos um marker referenciado a uma variável
		// Criamos um evento para ao se clicar no marker
		GEvent.addListener(marker, "click", function() {
			// Abrir um InfoWindow com o seguinte texto
           marker.openInfoWindowHtml("Endereço da minha empresa! <br/> <strong>;)</strong>");
          });
        map.addOverlay(marker); // Adiciona o marker no mapa
      }//if
    }//function
    </script>
  </head>
  <body onload="initialize()" onunload="GUnload()">
    <div id="map" style="width: 500px; height: 300px"></div>
  </body>
</html>

Pronto!

jQuery e ASP para cadastrar dados

Usar o jQuery é uma forma mais fácil de criar funcionalidades extras em seus sistemas, de animações básicas a grandes galerias de fotos, mas vamos para o nosso foco que é inserir no banco.

Criei um arquivo chamado funcao_jquery.js para colocar a função de efeito do jQuery. Para nossa aplicação usei o efeito fadeIn().

O Fade in (a função fadeIn()) serve para dar opacidade, e pode ser ajustado para ter animação. Existem três strings de velocidade predefinidas (“slow”, “def”, e “fast”), usei a slow em nossa aplicação;

fadeIn("slow");

Criei dois campos de exemplo (Nome e E-Mail) e um botão “submit“. Podem ser criados quantos necessários:

<form action="Cadastro_JQuery.asp?Cadastrar=Ok" method="post">
    Nome: <input name="Nome" type="text" id="Nome" />
    <br>
    E-Mail: <input name="EMail" type="text" id="EMail" />
    <input name="btAdd" type="submit" value="Adicionar" id="btn_enviar" />
</form>

No action do formulário coloquei uma Query “Cadastrar” com valor ok para ativar a ação do ASP (usando JScript) que segue abaixo:

<%
// Função para cadastrar no banco
if (Request.QueryString("Cadastrar") == "Ok") {

    var nome = Request.Form("Nome");
    var email = Request.Form("EMail");

    Conexao.Execute("Insert Into Newsletter (Nome, EMail)
                     Values ('"+nome+"', '"+email+"')");
    Response.Write("");
}
%>

Usando listas (UL>LI) eu pego as informações do banco e organizo tudo para ser mostrado ao usuário:

<%
var rs = Conexao.Execute("Select * From Teste"); // SQL para listar os dados
if (rs == null) {
    Response.Write("NADA ENCONTRADO");
}
else {
    while (!rs.EOF) {
        Response.Write("<li>"+rs("Nome")+" : "+rs("EMail")+"</li>") 
        // Lista todos os cadastrados do banco
    rs.MoveNext();
    }
}
%>

No ASP, com JScript para verificar se existe algo no banco, eu pego o RecordSet e comparo ele com “null” e o “else” caso encontre;

if (rs == null) {

… continua o resto do código…

A mesma idéia temos para o “loop”, só que uso o End Of File (.EOF)

while (!rs.EOF) {

… continua o resto do código …

Em seqüência imprimo na tela o que foi encontrado.

O jQuery vai agir da seguinte maneira:

No botão de tipo “submit” coloquei uma ID de nome “btn_enviar”, quando o botão for clicado será enviado os parâmetros via POST para o jQuery.

$('#btn_enviar').click(function(){

    var nome_post = $('#Nome').val();
    var email_post = $('#EMail').val();

$.post("Cadastro_JQuery.asp?Cadastrar=Ok",{nome: nome_post, email: email_post}

Logo em seguida jogo dentro da lista (UL>LI).

$("ul li:last").after("<li>" + nome_post + " : " + email_post + "</li>").next().fadeIn("slow");
});

E finalizo limpando os campos. Veja na imagem abaixo:

Segue o link da página com o código completo e o arquivo jQuery!

Código completo

Arquivo jQuery

Fonte: Imasters

Upper-box – Componente para jQuery

Para nós, desenvolvedores, existem scripts, códigos, métodos, estruturas que carregamos conosco ano após ano. Utilizamos essas soluções empacotadas em determinados momentos, muitas vezes salvando nossas horas de descanso.

Há muito tempo, em um sistema web em que o foco era a visualização de documentos, o cliente solicitou que o menu fosse retrátil. Ou seja, o menu superior da aplicação tinha que desaparecer se não estivesse sendo utilizado e aparecer quando o cursor do mouse se aproximasse dele. Para suprir isso criei uma função Javascript (utilizando CSS), e ficou bem bacana, simples e bastante útil. Esse script eu carrego comigo desde lá.

Precisei disso novamente alguns dias atrás, mas dessa vez fiz diferente. Tornei o script genérico, de modo que posso utilizar mais facilmente em qualquer aplicação web que tenha jQuery, e ainda coloquei em um repositório no Github (repositório GIT).

Sei que ainda é bastante primitivo e não está nos padrões de plugin jQuery. Mas essa é uma das intenções de colocar em um repositório público. Quem quiser usar e acoplar funcionalidades, otimizações e mesmo dar opiniões será muito bem-vindo. Pra quem não quer nem tocar no repositório, segue o link pra download (versão mais recente). Veja um exemplo do seu funcionamento aqui.

Pra explicar o que, como, onde, vou transcrever o README do repositório no Github abaixo.

upper-box

API javascript que transforma qualquer elemento de seu HTML (uma div, por exemplo) em uma caixa móvel posicionada na parte de cima da tela.

Para utilizá-lo é necessário estar com o jQuery adicionado ao documento.

O que acontece?

O elemento upper-box vai virar uma caixa invisível na parte de cima da tela.

Quando o usuário se aproxima com o mouse da parte superior da tela (body), o elemento ira rolar, abrindo e exibindo seu conteúdo.

Como usar?

Primeiro inclua os arquivos jQuery e upper-box no seu html, desta forma:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="upper-box.js"></script>

Seu uso é bem simples, basta adicionar upper-box ao class do elemento que vai virar upper-box.

Exemplo:

<div id='div1' class='divClass'>
 <h2>Olá,</h2>
 <p>Esta div não é um <b>upper-box</b>!</p>
</div>

<div id='div2' class='divClass upper-box'>
 <p>Esta div será um <b>upper-box</b>!</p>
 <p>Simples, não?!</p>
</div>

Espero não só ter ajudado como também ter instigado a colaboração de código. Sintam-se à vontade para realizar melhorias no simples – por enquanto – upper-box.

Fonte: Imasters

Validação de formulários com jQuery

Vamos verificar, por exemplo, se todos os campos foram preenchidos ou não.. ou se os seus valores estão ok.

Veja um exemplo do que será aprendido nessa aula.

Usarei como exemplo um formulário de contato que é o mais comum por aí. Vamos ao passo-a-passo:

Faça o download da última versão do jQuery no site: http://jquery.com/

Faça o download do plugin Validation no site: http://bassistance.de/jquery-plugins/jquery-plugin-validation/

Insira-os dentro do <head> do seu site, da seguinte forma:

1.<script language="JavaScript" src="jquery.js" type="text/javascript"></script>
2.<script language="JavaScript" src="jquery.validate.js" type="text/javascript"></script>

Após isso, criamos um pequeno bloco de CSS para estilizar as mensagens de erro:

1.* { font-family: Verdana; font-size: 96%; }
2.label { display: block; margin-top: 10px; }
3.label.error { float: none; color: red; margin: 0 .5em 0 0; vertical-align: top; font-size: 10px }
4.p { clear: both; }
5..submit { margin-top: 1em; }
6.em { font-weight: bold; padding-right: 1em; vertical-align: top; }

Ainda dentro do head, depois de inserir o jQuery e o estilo das mensagens de erro, precisaremos adicionar um bloco de JavaScript contendo instruções para a validação:

01.$(document).ready( function() {
02.$("#formularioContato").validate({
03.// Define as regras
04.rules:{
05.campoNome:{
06.// campoNome será obrigatório (required) e terá tamanho mínimo (minLength)
07.required: true, minlength: 2
08.},
09.campoEmail:{
10.// campoEmail será obrigatório (required) e precisará ser um e-mail válido (email)
11.required: true, email: true
12.},
13.campoMensagem:{
14.// campoMensagem será obrigatório (required) e terá tamanho mínimo (minLength)
15.required: true, minlength: 2
16.}
17.},
18.// Define as mensagens de erro para cada regra
19.messages:{
20.campoNome:{
21.required: "Digite o seu nome",
22.minLength: "O seu nome deve conter, no mínimo, 2 caracteres"
23.},
24.campoEmail:{
25.required: "Digite o seu e-mail para contato",
26.email: "Digite um e-mail válido"
27.},
28.campoMensagem:{
29.required: "Digite a sua mensagem",
30.minLength: "A sua mensagem deve conter, no mínimo, 2 caracteres"
31.}
32.}
33.});
34.});

Por fim, inserimos o HTML do formulário na página:

01.<form id="formularioContato" method="post" action="">
02.<label>Nome</label>
03.<input name="campoNome" type="text" value="" />
04.
05.<label>E-mail</label>
06.<input name="campoEmail" type="text" value="" />
07.
08.<label>Mensagem</label>
09.<textarea name="campoMensagem"></textarea><br />
10.
11.<input type="submit" class="submit" value="Enviar" />
12.</form>

Viram como é fácil? O arquivo final ficou dessa forma. Se você preferir pode copiar todo esse código JavaScript para um arquivo .js e incluí-lo no <head> do seu site da mesma forma que fizemos no começo da aula.

Coloquei alguns comentários na parte das instruções de validação para facilitar o entendimento.

Com isso você faz uma validação client-side que ajuda a evitar dados inválidos e campos vazios. Mas preciso lembrar que, por ser client-side, essa validação acontece apenas no computador do visitante e o mesmo pode desativar o JavaScript e a validação toda não irá funcionar. Então não se esqueça de fazer a mesma validação dentro do PHP quando receber os dados.

Veja o exemplo desta aula funcionando.

Mais exemplos de validações diferentes podem ser encontrados no site do plugin: http://jquery.bassistance.de/validate/demo/

Fonte: Imasters

Upper-box – Componente para jQuery

Para nós, desenvolvedores, existem scripts, códigos, métodos, estruturas que carregamos conosco ano após ano. Utilizamos essas soluções empacotadas em determinados momentos, muitas vezes salvando nossas horas de descanso.

Há muito tempo, em um sistema web em que o foco era a visualização de documentos, o cliente solicitou que o menu fosse retrátil. Ou seja, o menu superior da aplicação tinha que desaparecer se não estivesse sendo utilizado e aparecer quando o cursor do mouse se aproximasse dele. Para suprir isso criei uma função Javascript (utilizando CSS), e ficou bem bacana, simples e bastante útil. Esse script eu carrego comigo desde lá.

Precisei disso novamente alguns dias atrás, mas dessa vez fiz diferente. Tornei o script genérico, de modo que posso utilizar mais facilmente em qualquer aplicação web que tenha jQuery, e ainda coloquei em um repositório no Github (repositório GIT).

Sei que ainda é bastante primitivo e não está nos padrões de plugin jQuery. Mas essa é uma das intenções de colocar em um repositório público. Quem quiser usar e acoplar funcionalidades, otimizações e mesmo dar opiniões será muito bem-vindo. Pra quem não quer nem tocar no repositório, segue o link pra download (versão mais recente). Veja um exemplo do seu funcionamento aqui.

Pra explicar o que, como, onde, vou transcrever o README do repositório no Github abaixo.

upper-box

API javascript que transforma qualquer elemento de seu HTML (uma div, por exemplo) em uma caixa móvel posicionada na parte de cima da tela.

Para utilizá-lo é necessário estar com o jQuery adicionado ao documento.

O que acontece?

O elemento upper-box vai virar uma caixa invisível na parte de cima da tela.

Quando o usuário se aproxima com o mouse da parte superior da tela (body), o elemento ira rolar, abrindo e exibindo seu conteúdo.

Como usar?

Primeiro inclua os arquivos jQuery e upper-box no seu html, desta forma:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="upper-box.js"></script>

Seu uso é bem simples, basta adicionar upper-box ao class do elemento que vai virar upper-box.

Exemplo:

<div id='div1' class='divClass'>
 <h2>Olá,</h2>
 <p>Esta div não é um <b>upper-box</b>!</p>
</div>

<div id='div2' class='divClass upper-box'>
 <p>Esta div será um <b>upper-box</b>!</p>
 <p>Simples, não?!</p>
</div>

Espero não só ter ajudado como também ter instigado a colaboração de código.

HTML – Padronizar faz bem

Introdução ao OpenLayers: Vetores

Módulo 4: Vetores

1. Formatos Vetoriais

Com o OpenLayers é possível ler e escrever em diversos formatos de dados vetoriais serializáveis como o GeoJSON, KML, GeoRSS, GML e WKT.

Você pode também utilizar as ferramentas de desenho para desenhar pontos, linhas e polígonos no seu mapa, não apenas para criação, como também para edição das feições e dos seus atributos.

Se você possuir o Google Earth, poderá visualizar suas camadas nele, bastanto para isso que você gere um KML (através de uma requisição WMS, ou indo diretamente no cliente OpenLayers do seu GeoServer), e abra-o no Google Earth.

2. Estilos

Uma das razões para utilizar dados vetoriais, é que com o OpenLayers você tem o poder de controlar o seu estilo, ou seja, a forma como ele irá aparecer no mapa para o cliente.

Por padrão, as feições desenhadas pelo OpenLayers são laranja. Porém os estilos são totalmente customizáveis, bastando para isso que você tenha um arquivo JavaScript definindo o estilo, ou um arquivo de estilos externo (um SLD do GeoServer, por exemplo).

O exemplo abaixo foi gerado a partir de uma requisição WFS ao GeoServer. A camada foi desenhada utilizando cores baseadas na população.

Veja no código fonte do exemplo que adicionamos um nova propriedade:

A propriedade styleMap do layer foi setada para myStyleMap, veja:

Neste caso nós inicializamos o StyleMap com um hash de estilos. Este hash pode possuir as seguintes propriedades:

• default – estilo que será desenhado na inicialização do mapa;
• select – estilo que será desenhado quando alguma feição for selecionada;
• temporary – estilo que será desenhado com estilos que devem ficar temporariamente no mapa.

Nosso exemplo utiliza o padrão. Observe que quando você colocar o mouse em cima do mapa, o estilo irá mudar, isso porque um estilo diferente é utilizando quando o mouse passa em cima das feições.

Veja como ficou a definição dos estilos:

Fonte: Fernando Quadro

Introdução ao OpenLayers: Controles

Módulo 3: Controles

No OpenLayers, é através do controle que é possuir realizar a interação do usuário com o mapa. Alguns controles tem um representação visual e outros são invisíveis para o usuário. Quando você cria um mapa com as opções padrões, você cria com controles padrões visíveis. Este controles padrões permitem que o usuário navegue pelo mapa tanto com o mouse como os os botões. Adicionalmente existem outros controles que você pode adicionar ao seu mapa, e é isto que vamos ver agora.

Figura 1. Mapa de Funcionalidades
1. Controle Padrão

O controle padrão já é criado automaticamente quando você inicializa o seu mapa, e não necessita de comandos para a criação.

2. Escala

Este comando insere a escala no canto inferior esquerdo do seu mapa, conforme indica a Figura 1.

3. Referência

A referência pode ser adicionada como foi demonstrada acima, ou caso você prefiro é possível defirnir qual imagem irá aparecer dentro da referência, para isso você deve escrever o seguite código:

4. Lista de Camadas

A Lista de camadas (LayerSwitcher), é onde você pode ver quais camadas estão disponíveis para visualização, quais estão ativas, as camadas base, e também pode ativar/desativar as camadas conforme a sua necessidade de visualização.

5. Ferramentas de Edição

As ferramentas de edição são utilizadas quando há necessidade de editar ou criar novas geometrias diretamente no mapa.

6. Coordenadas

Esta funcionalidade indica o par de coordenadas conforme o posicionamento do mouse.

Veja como ficaria o código de um mapa com as funcionalidades descritas acima:

Fonte: Fernando Quadro

Próxima Página »

• Categorias

  • .Net
  • ASP
  • Banco de Dados
  • Carreira
  • Design
  • Dicas
  • FLEX
  • Gimp
  • Google API
  • Internet
  • Java
  • JavaScript/Ajax
  • MySQL
  • Noticias
  • Oracle
  • Photoshop
  • PHP
  • Programação
  • Ruby on Rails
  • SQL Server
  • Tecnologia

• Blogroll

  • Comando Digital
  • Professional Blogger
  • WebSapiens

• Tópicos recentes

  • Criando menus e páginas administrativas no WordPress: Parte 2
  • Criando menus e páginas administrativas no WordPress: Parte 1
  • Twitter reforça segurança e lança encurtador de URL
  • Nova plataforma da Cisco trafega até 322 terabits por segundo
  • TVs 3D estão chegando à sua sala!
  • YouTube lança legendas automáticas
  • Como usar Skype em celulares
  • EUA Revalam parte de sua estratégia contra ciberataques
  • Google anuncia mais uma compra desta vez de um site de edição de fotos
  • Sites abrigam documentos sigilosos que vazaram de algum modo na internet

• Ofertas Submarino