SinEntradas: Ejemplo de índice

// --------------------------------------------------- // BLOGTOC: crea una Tabla de Contenidos interactiva para Blogger. // Beautiful Beta : http://beautifulbeta.blogspot.com : Version: 2 : 2007-04-12 // --------------------------------------------------- // declaracion de las matrices de uso general var postTitle = new Array(); // titulos de los posts var postUrl = new Array(); // direcciones urls var postDate = new Array(); // fechas var postSum = new Array(); // sumarios var postLabels = new Array(); // etiquetas // declaracion de las variables de uso general var sortBy = "titleasc"; // valor por defecto, ordenar alfabeticamente var tocLoaded = false; // true si pueden leerse los feeds utilizando JASON var numChars = 250; // cantidad de caracteres del sumario a mostrar en un tooltip var postFilter = ''; // valor del filtro por defecto // funcion callback principal function loadtoc(json) { function getPostData() { // leer los datos de los posts via json-feed y guardarlos en las matrices if ("entry" in json.feed) { var numEntries = json.feed.entry.length; // bucle principal que lee las entradas for (var i = 0; i < numEntries; i++) { // cada entrada var entry = json.feed.entry[i]; // el titulo var posttitle = entry.title.$t; // la fecha var postdate = entry.published.$t.substring(0,10); // la direccion url var posturl; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') { posturl = entry.link[k].href; break; } } // el contenido eliminando los caracteres HTML y cortandolo para crear un sumario if ("content" in entry) { var postcontent = entry.content.$t;} else if ("summary" in entry) { var postcontent = entry.summary.$t;} else var postcontent = ""; // eliminar etiquetas HTML var re = /<\S[^>]*>/g; postcontent = postcontent.replace(re, ""); // reducir el contenido a un numero de caracteres if (postcontent.length > numChars) { postcontent = postcontent.substring(0,numChars); var quoteEnd = postcontent.lastIndexOf(" "); postcontent = postcontent.substring(0,quoteEnd) + '...'; } // las etiquetas var pll = ''; if ("category" in entry) { for (var k = 0; k < entry.category.length; k++) { pll += '' + entry.category[k].term + '; '; } var l = pll.lastIndexOf(';'); if (l != -1) { pll = pll.substring(0,l); } } // guardar los datos en las matrices postTitle.push(posttitle); postDate.push(postdate); postUrl.push(posturl); postSum.push(postcontent); postLabels.push(pll); } } } // final de la funcion // inicio del script: determinar la cantidad de entradas ( numEntries = json.feed.entry.length;) // ejecutar la funcion para extraer los datos getPostData(); // ordenar las matrices sortPosts(sortBy); tocLoaded = true; } // funciones para filtrar y ordenar function filterPosts(filter) { // cambiar de filtro y mostrar la lista de posts postFilter = filter; displayToc(postFilter); } // final de la funcion function allPosts() { // reset del filtro y mostrar la lista de posts postFilter = ''; displayToc(postFilter); } // final de la funcion function sortPosts(sortBy) { // ordenar los posts function swapPosts(x,y) { var temp = postTitle[x]; postTitle[x] = postTitle[y]; postTitle[y] = temp; var temp = postDate[x]; postDate[x] = postDate[y]; postDate[y] = temp; var temp = postUrl[x]; postUrl[x] = postUrl[y]; postUrl[y] = temp; var temp = postSum[x]; postSum[x] = postSum[y]; postSum[y] = temp; var temp = postLabels[x]; postLabels[x] = postLabels[y]; postLabels[y] = temp; } // final de la funcion for (var i=0; i < postTitle.length-1; i++) { for (var j=i+1; j postTitle[j]) { swapPosts(i,j); } } if (sortBy == "titledesc") { if (postTitle[i] < postTitle[j]) { swapPosts(i,j); } } if (sortBy == "dateoldest") { if (postDate[i] > postDate[j]) { swapPosts(i,j); } } if (sortBy == "datenewest") { if (postDate[i] < postDate[j]) { swapPosts(i,j); } } } } } // final de la funcion // mostrar la Tabla de Contenidos function displayToc(filter) { // crera las tres columnas de la tabla var numDisplayed = 0; var tocTable = ''; var tocHead1 = 'TÍTULO'; // la primera columna var tocTool1 = 'Click para ordenar por nombre'; // texto a mostrar en el title del enlace var tocHead2 = 'FECHA'; // la segunda columna var tocTool2 = 'Click para ordenar por fecha'; // texto a mostrar en el title del enlace var tocHead3 = 'ETIQUETAS'; // la tercera columna var tocTool3 = ''; if (sortBy == "titleasc") { tocTool1 += ' (descendente)'; tocTool2 += ' (el más nuevo primero)'; } if (sortBy == "titledesc") { tocTool1 += ' (ascendente)'; tocTool2 += ' (el más nuevo primero)'; } if (sortBy == "dateoldest") { tocTool1 += ' (ascendente)'; tocTool2 += ' (el más nuevo primero)'; } if (sortBy == "datenewest") { tocTool1 += ' (ascendente)'; tocTool2 += ' (el más viejo primero)'; } if (postFilter != '') { tocTool3 = 'Click para mostar todos los posts'; } // crear la tabla tocTable += ''; tocTable += ''; // la fila con los titulos tocTable += ''; tocTable += ''; tocTable += ''; tocTable += ''; // las filas con el contenido, cada post es una fila for (var i = 0; i < postTitle.length; i++) { if (filter == '') { tocTable += ''; numDisplayed++; } else { z = postLabels[i].lastIndexOf(filter); if ( z!= -1) { tocTable += ''; numDisplayed++; } } } tocTable += '

'; tocTable += '' + tocHead1 + ''; tocTable += '	'; tocTable += '' + tocHead2 + ''; tocTable += '	'; tocTable += '' + tocHead3 + ''; tocTable += '
' + postTitle[i] + '	' + postDate[i] + '	' + postLabels[i] + '
' + postTitle[i] + '	' + postDate[i] + '	' + postLabels[i] + '

'; // final de la tabla // mostrar un texto indicando si son todos los posts existententes o si hay mas if (numDisplayed == postTitle.length) { var tocNote = 'Se muestran ' + postTitle.length + ' posts
'; } else { var tocNote = 'Se muestran ' + numDisplayed + ' posts \''; tocNote += postFilter + '\' de un total de '+ postTitle.length + '
'; } // escribir la tabla en la pagina web var tocdiv = document.getElementById("toc"); tocdiv.innerHTML = tocNote + tocTable; } // final de la funcion // permutar el orden de los titulos function toggleTitleSort() { if (sortBy == "titleasc") { sortBy = "titledesc"; } else { sortBy = "titleasc"; } sortPosts(sortBy); displayToc(postFilter); } // final de la funcion // permutar el orden de las fechas function toggleDateSort() { if (sortBy == "datenewest") { sortBy = "dateoldest"; } else { sortBy = "datenewest"; } sortPosts(sortBy); displayToc(postFilter); } // final de la funcion // permutar el enlace function showToc() { if (tocLoaded) { displayToc(postFilter); var toclink = document.getElementById("toclink"); toclink.innerHTML = 'Ocultar Indice'; } else { alert("Un momento por favor. Cargando datos... "); } // advertencia de error, la funcion todavía no se ha ejecutado } // final de la funcion function hideToc() { var tocdiv = document.getElementById("toc"); tocdiv.innerHTML = ''; var toclink = document.getElementById("toclink"); toclink.innerHTML = 'Mostrar Indice'; } // final de la funcion

jueves 25 de septiembre de 2008

Ejemplo de índice

Pinchando en las cabeceras "Título" o "Fecha", las entradas se mostrarán en orden ascendente o descendente. Pinchando en una etiqueta se mostrarán sólo los posts correspondientes a la categoría seleccionada y haciéndolo en la cabecera "Etiquetas", se mostrarán todos.

Click en "Mostrar índice" (arriba) para abrir y click en "Ocultar índice" (abajo) para volver a cerrar... y un poco de paciencia que es un feed con más de 1.000 entradas.

Indice de entradas

0 comentarios:

Publicar un comentario en la entrada

SinEntradas

jueves 25 de septiembre de 2008

Ejemplo de índice

0 comentarios:

wibiya widget