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.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
Top Related