Vous êtes sur la page 1sur 6

01/03/12

Abril.com Mais sites Abril

Criando um plugin para jQuery

iMasters
Abril Mdia Distribuio Grfica Abril Educao

Grupo Abril

PORTAL

AGENDA

MULTIMDIA

BOX

COLETIVOS

IMASTERS PRO

CODE

FRUM

Faa Login / Cad

JQuery

Pesquisar...

JQuery

Criando um plugin para jQuery


Quarta-feira, 29/06/201 1 s 1 1 h1 5, por V iktor Persson

Texto original dispon vel em http://devheart.org/articles/tutorial-creating-a-jquery-plugin/

Aprenda como criar um plug in para jQuery do zero o bsico, as opes, a compatibilidade e exemplos.

O bsico
Um plugin escrito como um mtodo ou uma funo.

Criando uma Funo jQuery Sinta e A funo tem que retornar this.each(..) para manter a capacidade de acorrentamento de modo que a funo possa ser usada com um ou com vrios objetos jQuery.
jur.nmFnto =fnto({ Qeyf.yucin ucin) rtr ti.ahfnto({ eun hsec(ucin) / eeetseii cd hr / lmn-pcfc oe ee }; ) } ;
LTIMAS NOTCIAS
27/01 s 16h35

Verso 1.0.1 do jQuery Mobil lanada


22/11/2011

jQuip: 90% do jQuery com 13 tamanho


18/11/2011

E emplo
jur.nmkTxRd fnto({ Qeyf.aeete ucin) rtr ti.ahfnto({ eun hsec(ucin) $ti)cs'oo' 'e'; (hs.s(clr, rd) }; ) } ; / Eapeuae / xml sg $'m-i'.aeete(;/ mk tx i "ydv rd (#ydv)mkTxRd) / ae et n m-i" e $''.aeete(;/ mk alprgah rd (p)mkTxRd) / ae l aarps e

Primeiro Release Candidate jQuery 1.7.1 lanado


18/11/2011

jQuery Mobile 1.0 anunciad


04/11/2011

jQuery 1.7 est disponvel pa download


VER MAIS NOT CIAS

Criando um Mtodo jQuery Sinta e


jur.yehd fnto({ QeymMto ucin) / cd hr / oe ee } ;
imasters.com.br/artigo/21249/jquery/criando-um-plugin-para-jquery 1/6
CURSOS ONLINE

01/03/12

Criando um plugin para jQuery

iMasters

E emplo
jur.aHlool =fnto({ QeysyelWrd ucin) aet'el Wrd) lr(Hlo ol'; } ; / Eapeuae / xml sg $syelWrd) / aet "el Wrd .aHlool(; / lrs Hlo ol"

Redes e protocolo TCP/IP

Este curso apresenta os conceitos fundamen redes de computadores, discutindo as caracte das principais tecnologias de LAN e de WAN.

Opes
Deixe seu plugin o mais flexvel e amigvel possvel para o usurio, usando as opes. O mtodo $.extend() pega dois ou mais objetos como argumentos e une seus contedos dentro do primeiro objeto. E emplo Uma funo que configura a cor do texto (vermelho, como padro).
jur.nmkTxClrd=fnto(etns{ Qeyf.aeetooe ucinstig) vrcni ={ a ofg 'oo' 'e' clr: rd } ; i (etns{.xedcni,stig)} f stig)$etn(ofg etns; rtr ti.ahfnto({ eun hsec(ucin) $ti)cs'oo' cni.oo) (hs.s(clr, ofgclr; }; ) } ;

Desenvolvendo layouts com Webstandards


Neste curso, voc ver toda a base slida e necessria para se tornar um desenvolvedor dentro dos padres W3C.

Facebook Marketing

Desenvolva uma viso estratgica de comuni em rede sociais, apresentando os principais conceitos e as aplicaes disponveis para au criao, execuo e anlise de resultados de campanhas que utilizem meios digitais.

Agora podemos escolher usar essa funo passando as configuraes do parmetro ou no.
$'m-i'.aeetooe(;/ mk tx rd(eal) (#ydv)mkTxClrd) / ae et e dfut $'m-i'.aeetooe(bu';/ mk tx bu (#ydv)mkTxClrd'le) / ae et le

Compatibilidade
Como a varivel $ pode ser usada por outros plugins, use uma tcnica disfarada para deixar seu plugin compatvel futuramente.
(ucin${ fnto() $f.yucin=fnto( { .nmFnto ucin) rtr ti.ahfnto( { eun hsec(ucin) / eeetseii cd hr / lmn-pcfc oe ee }; ) } ; }(Qey; )jur)

Ns passamos o jQuery para a funo e agora podemos usar qualquer disfarce para o jQuery que quisermos. Ento, em vez do $, voc poderia usar qualquer outro nome vlido de variveis JavaScript.

A checklist do plugin jQuery


Esta uma lista de pontos importantes para se lembrar quando for desenvolver um plugin jQuery (do jQuery.com). Nomeie seu arquivo jquery.[insira o nome do plugin].js, eg. jquery.debug.js. Todos os novos mtodos so anexados ao objeto jQuery.fn object, e todas as funes ao objeto jQuery. Para mtodos internos, this uma referncia ao objeto jQuery atual.
imasters.com.br/artigo/21249/jquery/criando-um-plugin-para-jquery 2/6

01/03/12

Criando um plugin para jQuery

iMasters

Quaisquer mtodos ou funes que voc anexe devem ter um ponto e vrgula (;) no final caso contrrio, o cdigo ir quebrar quando comprimido. O seu mtodo deve retornar o objeto jQuery, a no ser que tenha sido explicitamente notado o contrrio. Use this.each para iterar sobre o conjunto atual de elementos correspondentes. Sempre anexe o plugin ao jQuery em vez de $, para que os usurios possam usar um disfarce customizado via noConflict().

Templates do plugin jQuery


Estes so dois bons templates de cdigo para comear a desenvolver um plugin jQuery. Template de Funo
(ucin${ fnto() $f.ylgn fnto(etns{ .nmPui ucinstig) vrcni a ofg { 'o' 'a' fo: br } ; i (etns{.xedcni,stig)} f stig)$etn(ofg etns; rtr ti.ahfnto({ eun hsec(ucin) / eeetseii cd hr / lmn-pcfc oe ee }; ) } ; }(Qey; )jur)

Template de Mtodo
(ucin${ fnto() $mPui .ylgn fnto(etns{ ucinstig) vrcni a ofg { 'o' 'a' fo: br } ; i (etns{.xedcni,stig)} f stig)$etn(ofg etns; / cd hr / oe ee rtr ti; eun hs } ; }(Qey; )jur)

Exemplo: Plugin Slideshow jQuery


Decidi usar exemplos bem simples at agora para que voc pudesse se familiarizar. O exemplo a seguir um pouco mais complexo e pode te ajudar a encontrar sua inspirao. Ele usa a funo setInterval() juntamente com os efeitos fadeOut() e fadeIn() do jQuery para gerar o ciclo de quaisquer imagens dentro de um elemento HTML. Configurao HTML
<i i=siehw dv d"ldso" <m sc"m/apeiae1pg at" / ig r=igsml-mg-.n" l=" <m sc"m/apeiae2pg at" / ig r=igsml-mg-.n" l=" <m sc"m/apeiae3pg at" / ig r=igsml-mg-.n" l=" <m sc"m/apeiae4pg at" / ig r=igsml-mg-.n" l=" <dv /i

CSS
imasters.com.br/artigo/21249/jquery/criando-um-plugin-para-jquery 3/6

01/03/12

Criando um plugin para jQuery

iMasters

#ldso ig{ siehw m dsly nn; ipa: oe psto:aslt; oiin boue }

JavaScript
(ucin${ fnto() $smlSiehw=fnto(eetr stig) .ipeldSo ucinslco, etns{ / stig / etns vrcni ={ a ofg 'ea' 20, dly: 00 'aepe' 50 fdSed: 0 } ; i (stig )$etn(ofg stig)} f etns {.xedcni, etns; / vrals / aibe vroj=$slco) a b (eetr; vrig=ojcide(ig) a m b.hlrn'm'; vrcut=iglnt; a on m.egh vri=0 a ; / so frtiae / hw is mg ige()so(; m.q0.hw) / rnsiehw / u ldso stnevlfnto({ eItra(ucin) ige()fdOtcni.aepe) m.qi.aeu(ofgfdSed; i=(i1= cut)?0:i1 + = on +; ige()fdI(ofgfdSed; m.qi.aencni.aepe) } cni.ea) , ofgdly; rtr ti; eun hs } ; }(Qey; )jur)

Uso Para ativar o slideshow na div #slideshow, ns simplesmente a chamamos usando o cdigo JavaScript a seguir:
<cittp=tx/aacit srp ye"etjvsrp" $smlSiehw'siehw) .ipeldSo(#ldso'; <srp /cit

Como permitimos que a configurao mudasse o comportamento do slideshow, poderamos deixar 5 segundos entre as imagens e configurar a durao do fade para 200 ms usando:
<cittp=tx/aacit srp ye"etjvsrp" $smlSiehw'siehw,{dly:00 'aepe' 20) .ipeldSo(#ldso' 'ea'50, fdSed: 0}; <srp /cit

Veja o Examplo Faa o download do Exemplo No mais difcil que isso! Boa sorte na criao de seu prprio plugin jQuery!

S a TECLA tem Cloud Computing verdadeiramente elstico, com atendimento acessvel e capacitado.

Like

Send

imasters.com.br/artigo/21249/jquery/criando-um-plugin-para-jquery

4/6

01/03/12

Criando um plugin para jQuery

iMasters

Viktor Persson autor do site DevHeart. Pgina do autor Email

Leia os ltimos artigos publicados por viktor_persson Escreva cdigos mais rpido, com menos esforo

4 COMENTRIOS

COMENTE TAMBM

Hugo O Exemplo da funo "jQuery.fn.makeTextColored" colocando a cor como azul EX: $('#foo').makeTextColored('blue'); - No funciona, o texto continua vermelho.
H 8 meses Responder

Raphael Lorencini usa assim: $('#foo').makeTextColored({ color:'blue' })


H 8 meses Responder

Faltou comentar que por padrao, o nome do arquivo do plugin deve ser jquery.nomedoplugin.js, isso conveno do proprio jquery
H 8 meses Responder

Henrique Jos Pires Barcelos @Joo Silva, o iMasters no feito s de contedo para os "entendidos". O que bsico para voc pode no ser bsico para outro colega. Lembre-se que um dia voc tambm j foi um 'noob'...
H 6 meses Responder

QUAL A SUA OPINIO?

Escreva seu comentrio aqui...

PARCEIROS

imasters.com.br/artigo/21249/jquery/criando-um-plugin-para-jquery

5/6

01/03/12

Criando um plugin para jQuery

iMasters

2001 iMasters FFPA Informtica Ltda Todos os direitos reservados.

Sobre o iMa Poltica de p Anuncie Fale conosc

imasters.com.br/artigo/21249/jquery/criando-um-plugin-para-jquery

6/6