jQuery Iniciando (Parte III)

Retrospectiva

Tivemos uma visão geral sobre ◦ Javascript (uso, tipagem, OOP, DOM)

◦ jQuery (o que é, funcionamento, seletores, efeitos, ajax)

Objetivos

Conhecer plugins para o jQuery que facilitam o desenvolvimento de websites

Criar plugins para o jQuery

Agenda

O que são plugins

Usar plugins ◦ Gráficos

◦ Formulários

◦ Imagens

◦ Infra-estrutura

◦ Mobile

◦ UI (conjunto de componentes)

Criar plugins

Plugins.what()

Plugins para o jQuery são bibliotecas (feitas utilizando o jQuery) que adicionam funcionalidades e facilitam ainda mais a nossa vida.

Os plugins podem ser criados por QUALQUER pessoa, ou seja, se o criador não prestar atenção pode tornar o plugin INCOMPATÍVEL com algum navegador.

Plugins.howToUse()

Usar plugins é muito simples. Eles adicionam um método no objeto jQuery e basicamente o que temos que fazer é chamar este método a partir do seletor (passando as opções que queremos):

$(“#elementoTeste”).myPlugin( { option1: “teste”, option2: true, option3: { option4: [“a”, “b”, “c”] } } );

Plugins.use.charts()

jQuery Visualize Plugin ◦ Site

jqPlot ◦ Site

◦ Exemplos

Highcharts ◦ Site

◦ Exemplos

Plugins.use.forms()

Form Wizard ◦ Site

jQTransform ◦ Site

Uniform ◦ Site

File Upload ◦ Site

Plugins.use.images()

Lightbox ◦ Site

Exposure ◦ Site

◦ Exemplos

Cycle ◦ Site

Orbit ◦ Site

Nivo Slider ◦ Site

◦ Exemplos

Slider Crystal ◦ Site

Slides ◦ Site

Aviaslider ◦ Site

Pretty Photo ◦ Site

Fancy box ◦ Site

TopUp! ◦ Site

Anything Zoomer ◦ Site

Plugins.use.infra()

DataTables ◦ Site

SwfObject ◦ Site

FeatureList ◦ Exemplo

SlideDeck ◦ Site

NavDock ◦ Site

jPaginate ◦ Site

TinyTips ◦ Site

Coda Popup Bubbles ◦ Site

Prototip 2 ◦ Site

i18n.properties ◦ Site

Plugins.use.mobile()

jQTouch ◦ Site

jQuery Mobile ◦ Site

Plugins.use.ui()

jQuery UI ◦ Site

wijmo ◦ Site

Plugins.create()

Criar plugins não é nada complicado, na documentação do jQuery tem a explicação dos padrões que devemos seguir: ◦ Isole o escopo do seu plugin (evita que outras bibliotecas interfiram no

jQuery);

◦ Não é necessário fazer $(this) no escopo do plugin (this já será um objeto jQuery), porém caso seja criada uma closure dentro do plugin deve ser usado $(this);

Plugins.create.basic()

(function($){

$.fn.myPlugin = function(settings)

{

var config = {};

if (settings) {

$.extend(config, settings);

}

return this;

};

})(jQuery);

Plugins.create.basic()

(function($){

$.fn.myPlugin = function(settings)

{

var config = {};

if (settings) {

$.extend(config, settings);

}

return this;

};

})(jQuery);

Um plugin não deve utilizar mais de um nome

Plugins.create.basic()

(function($){ var methods = { add: function() {}, init: function() {} }; $.fn.myPlugin = function(method) { if (methods[method]) { return methods[method].apply(this,

Array.prototype.slice.call(arguments, 1)); } else if (!method) { return method.init.apply(this); } else { alert(“Método não encontrado”); return this; } }; })(jQuery);

Podemos resolver, criando várias funções

Plugins.create.basic()

(function($){

$.fn.myPlugin = function(settings)

{

var config = {};

if (settings) {

$.extend(config, settings);

}

return this;

};

})(jQuery);

As configurações do plugin devem poder ser alteradas pelo desenvolvedor

Plugins.create.basic()

(function($){

$.fn.myPlugin = function(settings)

{

var config = {};

if (settings) {

$.extend(config, settings);

}

return this;

};

})(jQuery);

Devemos sempre retornar o objeto para manter a fluent interface