plone e jquery ao gosto do cliente
Post on 19-May-2015
3.790 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
top related