Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this presentation? Why not share!

Criando plugins jQuery

on

  • 3,090 views

Palestra apresentada durante a PHPConference 2010 sobre criação de plugins jQuery.

Palestra apresentada durante a PHPConference 2010 sobre criação de plugins jQuery.

Statistics

Views

Total Views
3,090
Views on SlideShare
3,090
Embed Views
0

Actions

Likes
3
Downloads
40
Comments
1

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Criando plugins jQuery Criando plugins jQuery Presentation Transcript

  • Apresentação● Ricardo Coelho● Graduado em Ciência da Computação;● Fundador do grupo PHP-Maranhão;● Representante do Maranhão em eventos nacionais;● Representante do Maranhão no PHP Brasil Comunidades;● Professor de Programação Web (Faculdade Pitágoras);● Auditor certificado NBR ISO/IEC 27001:2006● Perito forense digital● CTO da Nexy, empresa de auditoria de segurança e tecnologia financeira com soluções SaaS em PHP.
  • Criando Plugins jQuery Ricardo Coelho Nexy Informática
  • J o quê?
  • O que é o jQuery?
  • Código Javascript Convencionalvar http = false;if(navigator.appName == "Microsoft Internet Explorer") { http = new ActiveXObject("Microsoft.XMLHTTP");} else { http = new XMLHttpRequest();}function replace() { http.open("GET", "test.txt", true); http.onreadystatechange=function() { if(http.readyState == 4) { document.getElementById(foo).innerHTML = http.responseText; } } http.send(null);}
  • Código jQueryvar http = false;if(navigator.appName == "Microsoft Internet Explorer") { http = new ActiveXObject("Microsoft.XMLHTTP");} else { http = new XMLHttpRequest();}function replace() { http.open("GET", "test.txt", true); http.onreadystatechange=function() { if(http.readyState == 4) { document.getElementById(foo).innerHTML = http.responseText; } } http.send(null);} $(#foo).load(test.txt);
  • Encadeamento $(body) .addClass(ninja) .hide();
  • Porque criar um plugin? Reuso Testes Pacote Seletores Devolver Generalização à comunidade
  • Porque criar um plugin? Reuso Testes Pacote Seletores Devolver Generalização à comunidade Fama e Fortuna
  • Plugins existentes 4200+ jQuery UI, Forms, Masked Input, JCarrousel, JCrop, JEditable, JsTree... Em http://plugins.jquery.com você encontra as seguintes categorias de plugins:Ajax, Animation and Effects, Browser, Tweaks, Data, DOM, Drag-and-Drop,Events, Forms, Integration, JavaScript, jQuery, Extensions, Layout, Media,Menus, Metaplugin, Navigation, Tables, User, Interface, Utilities, Widgets,Windows and Overlays
  • Criar plugins é tarefa para jedi? NÃO. Se você já usou jQuery, já tem a metade de um plugin!
  • Qualquer um pode criar um plugin
  • Até esse cara! /** * Prugin do Abestado * * Ela me çeduis! */ $(#florentina) .filter(.dejesus) .addClass(çedutora);
  • Um plugin pode estender jQuery● Ao definir uma nova função utilitária● Ao definir um novo comando
  • Código básico $(function () { });
  • Código básico function uma_funcao() { } jQuery(uma_funcao);
  • Código básico uma_funcao = function () { } jQuery(uma_funcao);
  • Código básico jQuery(function () { });
  • Código básico $ é um apelido para jQuery. $(function () { });
  • Algumas regras básicas jquery.meuplugin-1.0.js
  • Algumas regras básicas Proteja o $
  • Algumas regras básicas Preserve o encadeamento
  • Vamos ver um exemplo de efeito
  • Reuso da solução
  • Criando o plugin de fato
  • Preservando o encadeamento
  • Minificadores● JSMin (Douglas Crockford)● Shrink Safe (Dojo)● Packer (Dean Edwards)● Compressor Rater (Arthur Blake)● YUICompressor (Yahoo)
  • Exemplo YUICompressor
  • Referências● http://www.slideshare.net/1Marc/jquery-essentials● http://developer.yahoo.com/yui/compressor/● http://docs.jquery.com● jQuery em ação
  • Obrigado!ContatosRicardo Coelhoricardo@nexy.com.brhttp://www.nexy.com.br@ramcoelho
  • Dúvidas? Slides em: http://www.slideshare.net/ram.coelho