jqFancyTransitions é compatível e totalmente testado com Safari 2+, Internet Explorer 6+, Firefox 2+, Google Chrome 3+, Opera 9+.

A estrutura do HTML é bem simples, um elemento com imagens dentro, para exibir legendas adicione os textos nos atributos “alt” das imagens.

Links:
Exemplos e Documentação
jquery-1.4.js
jqFancyTransitions.js
Exemplo comprimido

Você especifica as cores inicial e final com valores do CSS background-color (hexadecimal ou nominal, exemplo: #08f ou red). Você também pode especificar as opções “distance” que será a largura/altura do efeito, “angle” especifica o grau de inclinição, padrão é “0″ (vertical) e a opção “css” determina o CSS adicional, o padrão é “top: 0px; left: 0px”.

1
2
3
4
5
6
7

$(selector).gradientz({
   start: "red",     // cor inicial
   end: "blue",      // cor final
   distance: 100,    // distancia entre o ponto final e inicial
   angle: 72,        // angulo de inclinação, 0 = vertical, 90 = horizontal
   css: "right: 0px" // css adicional, o padrão é "top: 0px; left: 0px"
});

Links:
Link do exemplo
jquery-1.4.js
gradientz.js
Exemplo comprimido

Hoje o site fala sobre o novo site da API jQuery, que a documentação foi reescrita e sobre lançamento do jQuery 1.4rc1 para as pessoas baixarem e testarem. Também mostra um gráfico de performace das funções mais populares entre a versão 1.3.2 e a 1.4.

É mencionado facilidades, ajax/json, html 5, melhoria em funções específicas e de desempenho, tratamento de dados, efeitos, eventos. Novos métodos como .delay(), .has(), .nextUntil(), .prevUntil(), .parentsUntil(), desempenho dos seletores, funções úteis são abordadas também.

Vamos acompanhar estas duas semanas de jQuery e ver (utilizar) as novidade que vem com ela.

http://api.jquery.com/
jquery-1.4.js
Matéria no nettuts (fala sobre melhorias, mas não só do 1.4)

Para gerar a imagem, estarei utilizando uma API do Google e jQuery. Note que o “plugin” é bem simples, com apenas uma linha de retorno. Por essa razão não o separei como um arquivo “jquery.qr-code.js”. Para a função são passado dois parâmetros, o texto a ser codificado e o tamanho (largura e altura).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

// CRIA UM "PLUGIN" DO JQUERY
(function($){ 
   $.fn.qrcode = function(texto,size) { 
      return "http://chart.apis.google.com/chart?cht=qr&chld=L|0&choe=UTF-8&chl=" + texto +"&chs=" + size +"x" + size;
   }
})(jQuery);
 
$(document).ready(function(){
   // IMAGEM INICIAL
   var teste = $().qrcode("shiguenori", "100");
   $("#dvImagem").html("<"+"img src='"+teste+"' alt=''>");
 
   // CLICANDO NO BOTÃO, GERA O QRCODE DO INPUT
   $('#bt').click(function(){
      var novoCodigo = $().qrcode($('#input_qr').val(), "100");
      $("#dvImagem").html("<"+"img src='"+novoCodigo+"' alt=''>");
   });
});

Clique aqui para mais detalhes da API do Google
Veja o exmplo funcionando

Highcharts é uma biblioteca para gráficos escrita apenas com Javascript, oferecendo um modo fácil de adicionar gráficos interativos para seu site ou sistema. Highcharts suporta vários tipos de gráficos como: linha, área, colunas, barras, torta entre outros tipos de gráfico.

Recursos

Compatibilidade

Ele funciona em todos os navegadores modernos, incluindo o iPhone e Internet Explorer a partir da versão 6. Os navegadores usam por padrão o elemento de Canvas e em alguns casos SVG para o processamento de gráficos. Nos gráficos do Internet Explorer são desenhadas usando VML.

Licença

Você quer usar Highcharts para um site pessoal, um site da escola ou uma organização sem fins lucrativos? Então você não precisa de permissão do autor, basta ir e usar Highcharts. Para sites comerciais e projetos, consulte Licenciamento e Preços.

Veja mais em: http://www.highcharts.com/license

JS Puro

Highcharts é unicamente baseado em tecnologias cross-browser e não precisa de plugins do lado do cliente como Flash ou Java. Além disso, você não precisa instalar nada no seu servidor. No PHP ou ASP.NET. Highcharts precisa de três js para executar: O núcleo highcharts.js, um emulador de Canvas para o IE, e tanto o jQuery ou o MooTools.

Inúmeros tipos de gráfico

Highcharts suporta vários tipos de gráficos como: linha, área, colunas, barras, torta entre outros tipos de gráfico. Qualquer um destes podem ser combinadas em um gráfico.

Sintaxe de configuração simples

Definir as opções de configuração do Highcharts não requer habilidades de programação especial. As opções são dadas em uma estrutura de notação de objeto de JavaScript, que é basicamente um conjunto de chaves e valores ligados por dois pontos, separados por vírgulas e agrupados por chaves.

Rótulos Tooltip

Sobre os elementos do gráfico do Highcharts pode ser exibido uma dica de texto com informações sobre cada ponto e séries. A dica segue como o usuário move o mouse sobre o gráfico, e grandes esforços têm sido tomadas para torná-lo manter o ponto mais próximo, bem como tornar mais fácil a leitura de um ponto que está abaixo de um outro ponto.

Eixo linha de tempo

75% de todos os gráficos com um eixo X e Y têm uma data no eixo X. Portanto Highchart é muito inteligente sobre os valores de tempo. Com unidades eixo milissegundos, Highchart determina onde colocar as escalas para que eles sempre marquem o início do mês ou da semana, à meia-noite e meio-dia, a hora completa etc.

Zoom

Por zoom em um gráfico você poder examinar uma parte especialmente interessante dos dados com mais clareza. O zoom pode ser na dimensão X, Y ou ambos.

Carregamento de dados externos

Highcharts pega os dados em uma matriz de JavaScript, que pode ser definido no objeto de configuração local, em um arquivo separado ou até mesmo em um local diferente. Além disso, os dados podem ser manipulados durante a Highcharts sob qualquer forma, e uma função de retorno utilizada para analisar os dados em uma matriz.

Gráfico invertido ou eixo invertido

Às vezes você precisa virar o quadro e tornar o eixo X apareça vertical, como por exemplo, em um gráfico de barras. Invertendo o eixo, com os maiores valores primeiro, também é suportado.

Rotação para os textos dos rótulos

Todos os rótulos de texto, incluindo os rótulos dos eixos, rótulos de dados para o ponto e títulos de eixo, pode ser girada em qualquer ângulo.

Veja a Documentação
Referência de Opções
Exemplos
Documentação, Referência de Opções e Exemplos

O código HTML dos exemplos abaixo segue essa estrutura: (note que ‘div.yt_holder’ não é requirida pelo plugin e é usada aqui apenas para estilizar a área do vídeo).

EXEMPLO DO HTML
<div class="yt_holder">
<div id="ytvideo"></div>
<ul class="demo1">
<li><a href="http://www.youtube.com/watch?v=qtfCcn1Y6vs">Video 1</a></li>
<li><a href="http://www.youtube.com/watch?v=0liVa_49oa0">Video 2</a></li>
<li><a href="http://www.youtube.com/watch?v=GueU0EwSZN0">Video 3</a></li>
</ul>
</div>

Javascript necessário na configuração mais básica sem opções sendo utilizadas.

1
2
3

$(function(){
   $("ul.demo1").ytplaylist();
});

Javascript com autoplay desligado, miniaturas e outro seletor.

1
2
3

$(function(){
   $("ul.demo2").ytplaylist({addThumbs:true, autoPlay: false, holderId: 'ytvideo2'});
});

Arquivos

jquery-1.3.1.js
jquery.youtubeplaylist.js
Exemplo On-line
Exemplo Comprimido

Seu uso básico é bem simples, $(’.seletor’).quickFlip(); Onde seletor é o elemento pai dos painéis que terão o efeito.

Você pode passar três parâmetros o primeiro para opções, o segundo indica qual é o próximo elemento a ser mostrado e o terceiro determina quantas vezes o efeito irá se repetir. O objeto de opções pode ser informado:

• closeSpeed – Número em milisegundo que leva para virar e mostrar o painel frontal.
• openSpeed – Número em milisegundos que leva para virar e mostrar o painel traseiro.
• easing – Se você estiver usando o plugin jQuery easing plugin passe a string com o método que você quer usar. Há também dois métodos easing contruidos dentro do jQuery, linear e swing. Por padrão o easing está configurado como swing.
• ctaSelector – QuickFlip anexa um evento de clique para o seletor jQuery que dispara o efeito. Altere para ”, 0 ou null para finalizar o processo e acelerar as coisas (um pouco).
• refresh – booleano que provê uma opção para atualizar a animação a cada vez que o efeito é chamado. Isto é útil se o conteúdo dentro do flip muda visualmente, contudo é desligado por padrão por questão de desempenho.
• panelWidth e panelHeight – número ou string com o css para definir largura e altura dos paineis internos

Exemplo
Documentação Traduzida
Exemplo e Documentação Zippado

]]> http://blog.dothcom.net/quickflip-2-para-jquery/feed 0 http://blog.dothcom.net/jquery-youtube http://blog.dothcom.net/jquery-youtube#comments Mon, 23 Nov 2009 20:45:50 +0000 Junior http://blog.dothcom.net/?p=23 Plugin YouTubin para jQuery

YouTubin é um plugin para jQuery que embeda vídeos do YouTube de forma clara, fácil e discreta. Simplificando, este plugin pega qualquer endereço do YouTube e o substitui pelo código HTML do vídeo. O plugin utiliza o SwfObject 2 se iniciado, caso contrário apenas insere o código HTML padrão.

As opções avançadas incluem podem ser usadas com seletores do jQuery e pode ser configurada algumas propriedades do SWF como largura, altura, versão do flash, passar flashvars e parametros. O plugin permite carregar o player após o link ser clidado ao invés de carregar junto da página.

Baixar

Como usar YouTubin



Seu uso básico é bem simples. Apenas inclua os arquivos Javascript necessários como (jQuery, YouTubin e opcionalmente SwfObject 2), então escreva:

$(function() {
    $.youtubin();
});

Isto irá procurar por todos links válidos do youtbe e substituí-lo pelo código HTML do embed.

Se você quiser substituir apenas alguns tipos de links, utilize um seletor para fazê-lo:

$(function() {
    $('a.youtube').youtubin();
});

Para passar opções ao plugin, como largura e altura do SWF:

$(function() {
    $('a.youtubin').youtubin({
        swfWidth : 400,
        swfHeight : 360
    });
});

Isto dimensiona o player para 400px de largura e 360px de altura. Abaixo segue a lista completa de opções.

Opções do plugin YouTubin

• swfWidth (String)
  
  Largura do player swf. A unidade padrão é em px, infome apenas números. Também é possível informar em porcentagem, por exemplo 100%, levando em consideração o CSS aplicado.
• swfHeight (String)
  
  Altura do player swf. A unidade padrão é em px, infome apenas números. Também é possível informar em porcentagem, por exemplo 100%, levando em consideração o CSS aplicado.
• replaceTime (String)
  
  Esta opção serve para controlar quando a substituição ocorre. Por padrão é ‘auto’ (quando a página é carregada. A outra opção ‘click’, faz com que seja substituido apenas quando o link for clicado.
• keepLink (Boolean)
  
  Esta opção anexa o vídeo depois que o link for substituido. Isto afeta apenas o metodo ‘auto’.
• wrapper (String) (Deprecated as of Youtubin v1.2)
  
  Mute esta opção para personalizar o elemento que irá conter o SWF. Modifique se você quer anexar um CSS personalizado. O padrão é ‘<div></div>’
• srcOptions (Query String)
  
  Modifique esta opção para mudar o parametro query string que será enviado. Útil para mudar opção de idioma. O padrão é ‘?hl=en&fs=1′ para o metodo replaceTime como ‘auto’ e ‘?h1=en&fs=1&autoplay=1′ para o método ‘click’ (ou ‘auto’ se a opção autoplay está configurada). As configurações do srcOptions sobrescreve qualquer configuração autoplay.
• autoplay (Boolean)
  
  Método atalho para modificar a ação autoplay em srcOptions.
  Shorthand method for mmodifying autoplay behavior in srcOptions. Isto irá sobrescrever qualquer padrão além de srcOptions utilizados.
• method (HTML Attribute String)
  
  Este é o atributo HTML que o plugin irá busccar para formar o caminho do SWF. Por padrão é o atributo ‘href’, mas pode ser mudado para ’src’ ou qualquer outra coisa.
• scope (jQuery object)
  
  Controla o escopo de onde o plugin procura os links de vídeos quando não visando um objeto específico. (O metodo $.youtubin();).
• iphoneBoot Boolean
  
  Opção para melhor visualizar os vídeos do YouTube no iPhone. O padrão é verdadeiro. Definido para false se estiver usando vídeos não-YouTube.
• flashVersion (String)
  
  Versão do flash utilizada, por padrão é ‘8′.
  Version of Flash the embeded swf uses, default is ‘8′. Só importa se usando o SWFObject 2. O padrão funciona bem para todos os vídeos do YouTube.
• expressInstall (Path String)
  
  O caminho para expressInstall.swf, que é totalmente opcional. Só importa se usando o SWFObject 2. Padrão ”.
• flashvars (Object)
  
  Qualquer variável flashvar que você queira passar para o SWF. Por padrão é um objeto vazio ({}) , funciona bem com os vídeos do YouTube.
• params (Object)
  
  Qualquer parametro que você quer configurar para o SWF. O padrão é {menu : “false”, loop : “false” }.

jquery-1.3.1.js
Exemplo On-line
Exemplo zippado

]]> http://blog.dothcom.net/jquery-youtube/feed 0