O documento discute como usar JQuery no Plone para melhorar a interface do usuário, incluindo exemplos de como: 1) Adicionar lightbox para imagens usando JQuery; 2) Usar funções nativas do Plone como tooltip; 3) Tratar conteúdo como incorporar vídeos do YouTube; 4) Carregar conteúdo adicional sem recarregar a página.

1. Plone e JQuery
ao gosto do Cliente
@cleberjsantos
@Tamosauskas

2. Cadê todo o KSS que estava aqui?

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. 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. 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. 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. 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. 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. Usando atributos de vários Objetos do Zope
Podemos usar os atributos de vários objetos em nosso Jquery.
• Exemplo: Créditos de Imagens
jq("#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. Obrigado