Com o plugin de criação de templates jQuery, você poderá dar asas à sua criatividade e imaginação e fazer criações de alta qualidade e que cativam o olhar de “quem passa”. Os usos que poderá dar a este plugin, vão desde a criação de templates para mostrar tweets, feeds, ou outro tipo de conteúdo com que você queira trabalhar. Não perca este fantástico Plugin jQuery Para Criação de Templates!

1º PASSO

Para começar temos de importar o jQuery e o plugin de criação de templates.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="jquery.tmpl.js"></script>

2º PASSO

Agora é altura de criar o seu template. Neste tutorial vamos utilizar o plugin orientado para o twitter.

<script id="tweets" type="text/x-jquery-tmpl">
	<li>
		<img src="${imgSource}" alt="${username}" />
		<h2> ${username} </h2>
		<p> ${tweet} </p>
		{{if geo}}
		<span> ${geo} </span>
		{{/if}}
	</li>
</script>

3º PASSO

Neste passo temos de introduzir dados para o nosso plugin. Vamos fazer uma pesquisa rápida com a ferramenta de pesquisa da API do Twitter.

<script>

 $.ajax({
    type : 'GET',
    dataType : 'jsonp',
    url : 'http://search.twitter.com/search.json?q=escolacriativ',

    success : function(tweets) {
       var twitter = $.map(tweets.results, function(obj, index) {
          return {
             username : obj.from_user,
             tweet : obj.text,
             imgSource : obj.profile_image_url,
             geo : obj.geo
          };
       });
    }
});

</script>

4º PASSO

Renderização do Markup – onde? Para definir isso, criaremos uma lista não ordenada.

    <ul id="tweets"> </ul>

5º PASSO

Neste passo misturamos os ingredientes e criamos o bolo. Inserimos os dados no template e anexamos à lista não ordenada que criámos no 4º passo.

$('#tweets').tmpl(twitter).appendTo('#twitter');

Para melhor compreensão, deixamos aqui o código completo. Este tutorial tem como base um artigo dos colegas na Nettuts.

<!DOCTYPE HTML>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title></title>
      <link rel="stylesheet" href="style.css" />

      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
      <script src="jquery.tmpl.js"></script>
   </head>
   <body>

      <h1> Tweets da Escola Criatividade! </h1>

      <script id="tweets" type="text/x-jquery-tmpl">
         <li>
            <img src="${imgSource}" alt="${userName}" />
            <h2> ${username} </h2>
            <p> ${tweet} </p>

            {{if geo}}
            <span>
               ${geo}
            </span>
            {{/if}}
         </li>
      </script>

      <ul id="twitter"></ul>

      <script>
         $.ajax({
            type : 'GET',
            dataType : 'jsonp',
            url : 'http://search.twitter.com/search.json?q=escolacriativ',

            success : function(tweets) {
               var twitter = $.map(tweets.results, function(obj, index) {
                  return {
                     username : obj.from_user,
                     tweet : obj.text,
                     imgSource : obj.profile_image_url,
                     geo : obj.geo
                  };
               });

               $('#tweets').tmpl(twitter).appendTo('#twitter');
            }
      });

      </script>
   </body>
</html>

E VOCÊ, UTILIZA O PLUGIN JQUERY DE CRIAÇÃO DE TEMPLATES?

Gostariamos de saber quais os plugins que os nossos leitores usam nas suas criações. Comente e participe neste artigo, expondo as suas preferências!

Abraço e até já!

 

Autor: Diogo Espinha

Blog do Autor | Artigos do Autor:

Workaholic e totalmente viciado em computadores, Internet e desporto motorizado. Adora praticar desporto, é um curioso da programação em PHP, CSS e HTML5 e não dispensa a companhia do seu Mac OSX 86 Snow Leopard!

  • Explorer - Factory Construction & Ship Building Joomla Theme
  • Justice - Attorney and Law Firm Joomla Template
  • OwnFolio - One Page Personal Portfolio / vCard / Resume / Showcase Joomla Template
  • Big Business - Responsive Template
  • Merab - Creative Multipurpose Drupal 8 Theme
  • Fitness Academy Joomla Template
  • Fruition - Business Joomla Template
  • Educate | Education & Courses, Kindergartens Joomla Template
  • Constructive - Contractors Multipurpose Joomla Landing Page Theme
  • Vina Bubox - VirtueMart Joomla Template for Online Stores
  • BizOne - One Page Parallax Drupal Theme
  • LawHouse - Responsive Lawyers Attorneys Joomla Template

Gostou deste artigo? Então torne-se fã do Blog no Facebook!



Comentários dos Alunos


  1. Rhian
    7 de abril de 2011

    Isso que você criou é o botão “Tweet” do Twitter ?



  2. Yuri Matheus
    29 de abril de 2011

    Diogo, eu fiz o tuto acima mas não apareceu nada! Será que não está faltando o style.css?!


RSS
Twitter
Facebook
Comentários
ASSINANTES
SEGUIDORES
FÃS
COMENTÁRIOS
7794

Subscrever Newsletter
Subscreva a Newsletter:



Aplicativos Android, iPhone e Muito Mais!




Assine a Escola Criatividade Assine a Newsletter da Escola Criatividade Escola Criatividade no Twitter Escola Criatividade no Facebook Escola Criatividade no Youtube Escola Criatividade no Google Buzz