A veces nuestros artículos quedan excesivamente cargados de enlaces y eso, para el usuario, puede suponer un problema. Una forma de ayudar al usuario a comprender mejor la fisonomía de nuestro artículo es usando notas al pie, al igual que en las imágenes las usamos para completar la imagen o ponerle un título, podemos usarlas para especificar nuestros enlaces.
$(document).ready(function() {
$("#wrap").append("<ol id=\"footnotes\"></ol>");
footnote = 1;
$("q[cite],q[title],blockquote[cite],blockquote[title]").addClass("footnote");
$(".footnote").each(function() {
$(this).append("<sup>"+footnote+"</sup>");
cite="<li>";
url=$(this).attr("cite");
title=$(this).attr("title");
if(title && url) {
cite+="<a href=\""+url+"\">"+title+"</a>";
} else if(title) {
cite+=title;
} else if(url) {
cite+="<a href=\""+url+"\">"+url+"</a>";
}
cite+="</li>";
$("#footnotes").append(cite);
footnote++;
});
});
El script anterior nos añadirá a todos los elementos q
y blockquote
la clase footnote
, posteriormente nos tratará todos los elementos con la clase footnote
para añadirles un valor numérico que se relacionará con la nota al pie que vamos a insertar.
Si usamos la marcación correcta de estos elementos el resultado será realmente interesante.
Ejemplo de uso:
// Hacia URL
<q cite="https://www.anieto2k.com/">
WordPress, desarrollo web y muchas cosas más...
</q>
// Explicativo
<q title="TEXTO EXPLICATIVO">
BLA BLA BLA
</q>
1 comentarios, 0 referencias
+
#