Páginas

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.

Nenhum comentário: