Páginas

Mostrando postagens com marcador Javascript. Mostrar todas as postagens
Mostrando postagens com marcador Javascript. Mostrar todas as postagens

13 de abril de 2011

Truncate com Jquery

Eu estava precisando truncar (cortar, diminuir) o tamanho de um texto na página e dar a opção para o usuário expandir/esconder, porém as bibliotecas disponibilizadas são muito pesadas.

Fiz um script, curto, simples, que trunca o texto selecionado recebendo a quantidade máxima de caracteres, e coloca um link para o usuário expandir/esconder o texto.

Além de ser leve tem a vantagem de manter o conteúdo do elemento original, permitindo assim a visualização do mesmo caso o browser não carregue javascript corretamente.

var len = $("#longText").text().length;
if (len > maxCharacters) {
    var truncated = $("#longText").text().
        substring(0, maxCharacters);
    truncated = truncated.replace(/\w+$/, '');
    var spanTruncate = "";
    $("#longText").after(spanTruncate);
    $("#longText").hide();
    $("#truncate").html(truncated);
    var linkToggle = "
more" $("#truncate").after(liknToggle); $("#truncate").show(); }

O evento para quando o usuário clicar no link expandir/esconder:
$("#toggle").click(function(event) {
    event.preventDefault();
    if ($(this).html() == "hide") {
        $("#longText").hide();
 $("#truncate").show();
 $(this).html("more");
    } else {
 $("#truncate").hide();
        $("#longText").show();
 $(this).html("hide");
    }
});

O código completo, com um exemplo de como utilizar, está disponibilizado no meu Github, para que possa ser melhorado sempre por quem estiver interessado em contribuir com o projeto.