Dica rápida – criando uma blockquote eficiente com jQuery

Esse post é uma dica rápida de uma solução que desenvolvi em jquery para um blog para criar citações ou blockquotes com destaque lateral como em livros e jornais.

Requisitos

  • minimo de lógica de programação
  • conhecimentos básicos de HTML e CSS
  • conhecimento básico em jQuery ou JavaScript

Primeiro vamos precisar de um arquivo index para montar a página em HTML com estilos CSS. Vamos utilizar estilos CSS no próprio arquivo HTML.

No final vamos obter este resultado:

Dicas jQuery - Web Social Dev - img post

Para quem desejar, disponibilizei o arquivo que utilizei para testes aqui.

Analisando o código

Utilizamos apenas uma função em jQuery para desenvolver a solução, que é a função a seguir.

Basicamente ela vai analisar o DOM e retornar todos os elementos span que estiverem com a classe co e aplicar o texto em um elemento blockquote com a classe co e no final, reescrever texto que estiver dentro da span em um bloco separado do texto com destaque.

(function() {

      var co = $('span.co').each(function() {
        var $this = $(this);
        $('<blockquote></blockquote>', {
          class: 'co',
          text: $this.text()
        }).prependTo( $this.closest('p') );
      });

}) ();

1º – criamos uma variável co para armazenar o resultado da função, que é coletar cada elemento span com classe co. Isso na verdade não é uma obrigação no código, apenas uma maneira de otimizar a utilização de javascript onde armazenamos o resultado da função, que sempre vai ser o mesmo, para poupar processamento.

2º – transformamos a referência $(this) em uma variável porque ela é utilizada mais de uma vez, novamente para poupar processamento.

3º – ciamos o elemento blockquote e pedimos ao jquery para inserir a classe co e o texto presente nos elementos span encontrados no DOM, o que vai retornar algo como <blockquote class="co">textodoelementospan</blockquote>.

4º – no final, utilizamos o método prependTo para dizer que esta blockquote deve ser inserida após o elemento p mais próximo.

Note que a função pode ser aplicada para qualquer elemento HTML, desde que não quebre a lógica da função.

O estilo utilizado para o blockquote css na classe co foi:

blockquote.co {
      float: right;
      background: #f06;
      background: linear-gradient(45deg, cornflowerblue, tomato);
      box-shadow: 1px 1px 5px gray;
      color: white;
      font-weight: bold;
      padding: 20px 5px 20px 5px;
      width: 35%;
      text-align: center;
    }

É isso galera, qualquer duvida estou a disposição.

🙂