Plone e JQuery ao gosto do Cliente

4.382 visualizações

Publicada em

Exemplo práticos de como melhorar a interface do seu site feito em Plone usando diversos recursos de JQuery. Mais do que apenas usar plugins, a palestra mostrará uma visão geral sobre como usar os recursos que o Plone já possui e além disso como integrar os métodos e atributos dos objetos do Zope em seus scripts

Publicada em: Tecnologia, Design
1 comentário
1 gostou
Estatísticas
Notas
Sem downloads
Visualizações
Visualizações totais
4.382
No SlideShare
0
A partir de incorporações
0
Número de incorporações
2.456
Ações
Compartilhamentos
0
Downloads
7
Comentários
1
Gostaram
1
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Plone e JQuery ao gosto do Cliente

  1. 1. Plone e JQuery ao gosto do Cliente@cleberjsantos@Tamosauskas
  2. 2. Cadê todo o KSS que estava aqui?
  3. 3. Vernis em vez de Cutelo• Com JQuery podemos poupar alterações nos templates• Exemplo: Lightbox jq(".template-atct_album_view .photoAlbumEntry:not(.photoAlbumFolder) a").each(function(){ var url = jq(this).attr(href); url = url.replace(//view/, "/image_large"); jq(this).wrap(<a class="lightbox" href="+ url + "></a>); }); jq(.lightbox).lightBox();
  4. 4. Usando o JQuery Nativo do Plone • Podemos usar algumas funções que o plone já possui. • Exemplo: Tooltip jq("#edit-bar *[title]").tooltip(); • Lista Ordenada class="listing"
  5. 5. Tratando Conteúdo • Podemo usar Jquery para tratar o conteúdo do Plone. • Exemplo: Youtuber jq(#content a[href*="youtube.com"]).each(function(){ var ytvar = jq(this).attr(href); var ytvar = ytvar.split(http://www.youtube.com/watch?v=); jq(this).html(<iframe width="425" height="349" src="http:// www.youtube.com/embed/ + ytvar[1] + " frameborder="0" allowfullscreen>< + /iframe>); });
  6. 6. Conteúdo sem Refresh • Podemos trazer conteúdo do Plone sem recarregar a página. • Exemplos: Load jq(".documentAuthor a").hover( function () { var url = jq(this).attr(href); var seletor = ".portraitPhoto"; jq(this).after(<div id=perfil />); jq(#perfil).load(url + " " + seletor); }, function () { jq(#perfil).remove(); } );
  7. 7. Conteúdo sem Refresh • Podemos trazer conteúdo do Plone sem recarregar a página. • Exemplos: Overlay jq(#siteaction-sitemap a).prepOverlay({ subtype: ajax, filter: #content>*, });
  8. 8. Usando atributos de um Objeto do Zope • Podemos usar os atributos dos objetos em nosso Jquery. • Exemplo: Link dinâmico em Notícias jq(".template-newsitem_view #content").each(function(){ jq(this).after(<div id="more" />); var urltitulo = document.location.href + /Title; jq.get(urltitulo, function(Titulo){ jq(#more).html("<a href=search?SearchableText=" + Titulo + " >" + "More about " + Titulo + "</a>"); }); });
  9. 9. Usando atributos de vários Objetos do ZopePodemos usar os atributos de vários objetos em nosso Jquery.• Exemplo: Créditos de Imagensjq("#parent-fieldname-text p img").each(function(){ var urlcreditos = jq(this).attr(src) + "/Rights"; var objeto = jq(this); jq.get(urlcreditos, function(creditos){ objeto.before("<div class=credito>Crédito: " + creditos + "</div>"); }); });
  10. 10. Obrigado

×