jQuery UI datagrid

Para inaugurar meu primeiro post aqui no jquerybrasil (.org), preparei alguns demos do plugin (jquery.ui.datagrid) que desenvolvi baseado no $.ui.widget. Lembrando que não é um plugin oficial do jQuery UI. Criei para sanar minhas necessidades dentro dos projetos que sou contratado. Lembrando que a equipe do jQuery UI criou o jQuery UI Grid Project com o objetivo de juntar todo conhecimento e boas práticas dos “plugins de grid” existentes dentro do UI.
(mais…)

jQuery Browser Plugin – Identificando navegadores com técnica CrossBrowser

Vou falar aqui de uma das técnicas utilizadas para ter seu site crossbrowser, claro, usando jQuery.

Sabe-se que as técnicas mais populares são:

• Conditional Comments
• CSS Hacks
• Classe Css no Html

A técnica que irei comentar é a terceira, e essa minha versão é feita por JavaScript, porém caso prefira, pode ser feito via programação de servidor.

Tudo que temos que fazer é incluir esse plugin jQuery Browser ao nosso projeto.

Funções

• $.browser – Ela estende a função nativa do jQuery e acrescenta propriedades como versionNumber e name (msie, firefox, chrome, etc).
• $.layout – Identifica a engine de layout, ex: konqueror, webkit, khtml, trident, etc.
• $.os – Identifica o sistema operacional do cliente.
• $.browserTest – Adicionará na tag classes css que representarão os dados acima, seguidos do número da versão.

Como o plugin já chama automaticamente a função $.browserTest, só temos que ver o resultado:

Agora você pode adicionar particularidades na folhas de estilos:

CSS

.chrome #menu{ width:100px }
.firefox #menu{ width:101px }
.msie8 #menu{ width:102px }
.msie6 #menu{ display:none } /* trollface! */

E também no JavaScript via jQuery:

JavaScript

if( $("html").is(".msie6") ){
     $("#menu").hide();
}
//ou
if( $("html").hasClass(".msie6") ){
     $("#menu").hide();
}

Obs: Como o plugin já não recebe atualização desde 2008, ele ainda não identifica Androids e iPad, está aí uma oportunidade para criarem um fork do projeto.

jQuery.Storage – Utilizando localStorage cross-browser com cookie fallback

Nesta semana precisei salvar algumas informações do usuário no navegador, mas queria algo mais robusto do que o próprio cookie maledito que dá tanta dor de cabeça. Então numa conversa com meu amigo @wilkerlucio, fui informado sobre a possível utilização do localStorage. Prontamente corri ao google/github para procurar algum plugin jQuery sobre. Achei alguns, porém, testei um único e gostei muito.

O jQuery.Storage é um plugin jQuery para facilitar a utilização de localStorage com uma grande utilidade que é um fallback para cookies, caso o navegador ieca7- não tenha suporte ao localStorage. Mas, para que não fique confuso para algumas pessoas que nunca ouviram falar em localStorage ou fallback, vamos pensar um pouco, como diria nosso querido telecurso 2000. Pesquisando sobre o assunto, achei um post sobre HTML5 e local storage muito mais interessante que esse, mas que não fala sobre o plugin, onde o zeno rocha fala muito organizadamente sobre o que é o localStorage, sessionStorage e ainda tem uma tabelinha de compatibilidade entre navegadores.
(mais…)