01/03/12Abril.com Mais sites Abril

Criando um plugin para jQuery

iMastersAbril 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 jQueryQuarta-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 bsicoUm 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 NOTCIAS27/01 s 16h35

Verso 1.0.1 do jQuery Mobil lanada22/11/2011

jQuip: 90% do jQuery com 13 tamanho18/11/2011

E emplojur.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 lanado18/11/2011

jQuery Mobile 1.0 anunciad04/11/2011

jQuery 1.7 est disponvel pa downloadVER MAIS NOT CIAS

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

01/03/12

Criando um plugin para jQuery

iMasters

E emplojur.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.

OpesDeixe 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 WebstandardsNeste 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

CompatibilidadeComo 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 jQueryEsta 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 jQueryEstes 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 jQueryDecidi 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