Plone e JQueryao gosto do Cliente

@cleberjsantos @Tamosauskas

Cadê todo o KSS que estava aqui?

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();

Usando o JQuery Nativo do Plone

• Podemos usar algumas funções que o plone já possui.

• Exemplo: Tooltip

• Lista Ordenada

jq("#edit-bar *[title]").tooltip();

class="listing"

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>');});

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(); });

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>*',});

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>"); });

});

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>"); });

});

Obrigado