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:
Postar um comentário