JMiur [E]

Aunque este script tal vez no tenga demasiado uso en Blogger, no deja de ser una alternativa interesante, bastante fácil de usar y realmente potente dado su escaso tamaño. Se trata de List.js y no requiere librerías extras.

Una vez insertada en un sitio, nos permite transformar listas (UL LI) de tal modo que pueda buscarse en ellas de modo dinámico, filtrarlas, ordenarlas e incluso editarlas, agregando o borrando items. Obviamente, en Blogger, la parte de edición carece de sentido porque no podríamos guardar esos cambios pero, el resto de las opciones pueden ser aplicadas sin inconvenientes.

Descargamos el archivo, lo alojamos en algún servidor como DropBox o Google Sites y luego, lo agregamos a la plantilla:
<script src='URL_list.min.js' type='text/javascript'></script>
Para usarlo, sólo necesitamos un DIV al que identificaremos con un ID y adentro, agregaremos una lista cuya clase será list y donde cada item puede contener cualquier tipo de etiqueta que también deberemos identificar con una clase que será la que nos sirva para, por ejemplo, ordenarlas.

Un ejemplo:
<div id="miprimerejemplo">
  <span class="sort" rel="nombre"> NOMBRE </span>
  <span class="sort" rel="apellido"> APELLIDO </span>
  <ul class="list">
    <li>
      <span class="nombre"> texto 1 </span>
      <span class="apellido"> texto 2 </span>
    </li>
    <li>
      <span class="nombre"> texto 3 </span>
      <span class="apellido"> texto 4 </span>
    </li>
    .......
  </ul>
</div>
Si debajo del HTML llamamos a la función:
<script>
  var opciones = {valueNames: [ "nombre","apellido" ]};
  var featureList = new List("miprimerejemplo", opciones);
</script>
tendremos una lista que podrá ser ordenada haciendo click en los textos NOMBRE o APELLIDO.

Las características gráficas son las que se nos ocurra, no hay limitaciones al respecto:

NUMNOMBREHEXE
  • 1aqua#00FFFF
  • 2cornsilk#FFF8DC
  • 3azure#F0FFFF
  • 4bisque#FFE4C4
  • 5blue#0000FF
  • 6aliceblue#F0F8FF
  • 7antiquewhite#FAEBD7
  • 8black#000000
  • 9blueviolet#8A2BE2
  • 10brown#A52A2A
  • 11cyan#00FFFF
  • 12blanchedalmond#FFEBCD
  • 13coral#FF7F50
  • 14chartreuse#7FFF00
  • 15aquamarine#7FFFD4
  • 16burlywood#DEB887
  • 17cadetblue#5F9EA0
  • 18chocolate#D2691E
  • 19cornflowerblue#6495ED
  • 20crimson#DC143C
  • 21beige#F5F5DC


Un poco más espectacular es la forma de buscar en una lista ya que se hace de manera dinámica, a medida que vamos ingresando el texto, la lista se va filtrando.

Es similar al ejemplo anterior, acá, lo haremos sobre una lista que contiene algunas entradas del blog:
<div id="otralista">
  <span>buscar</span> <input class="search" />
  <ul class="list">
    <li><a class="orden" href="URL_1"> título 1</a></li>
    <li><a class="orden" href="URL_2"> título 2</a></li>
    <li><a class="orden" href="URL_3"> título 3</a></li>
    ......
  </ul>
</div>
<script>
  var opciones = {valueNames: [ "orden" ]};
  var featureList = new List("otralista", opciones);
</script>
Ver/Ocultar el ejemplo

buscar

43 comentarios:

Beben Koben  

whether we can use jquery also like this?

Responder
CristJian  

Muy buen dato JMiur, es posible usar ese script con otro?, por ejemplo en el indice o algún mapsite que se actualiza automaticamente

saludos :)

Responder
Adrián J. Messina  

Muy bueno, otra cosita para controlar :)

Responder
Yurika-Chan  

Me gusto mucho, se puede implementar para hacer una lista de las entradas del blog, usando ciertas etiquetas???

Responder
Manfenix  

Una buena opción para la búsqueda de posts, :)

Responder
sasa  

muy bueno





http://www.hd-tecnologia.com

Responder
JMiur  

Beben Koben
You can use jQuery if you want but many people don't use it

CristJian, Yurika-Chan:
Seguramente si aunque no lo he intentado, bastaría teenr los datos.

Responder
♥ Ana  

JMiur, se que ésta quizás no sea la entrada adecuada para hacerte una pregunta, ya que no tiene nada que ver con el tema del que tratas aquí pero no sabía donde hacértela
Imagino que ya sabrás que estamos con problemas con el gadget lista de blogs, no deja añadir nuevos blogs, ni eliminar otros blogs, también he probado a poner el gadget de nuevo y no me deja,llevamos así un tiempo y hablo en plural porque somos much@s l@s que tenemos dicho problema, he mirado por Internet e incluso he hecho la pregunta en groups google, y, de momento, tengo la callada por respuesta, me consta que más gente ha preguntado sobre el tema y no contestan y, por eso acudo a ti, esperando que sepas alguna manera de solucionarlo y si no lo sabes, igualmente agradezco el tiempo que te tomas para ayudar, como lo has hecho en otras ocasiones
Un abrazo

Responder
JMiur  

No he visto que ocurriera tal cosa, Ana pero, efectivamente, veo que hay muchas quejas al respecto. Al parecer, no afecta a todos los sitios y eso es raro. Me temo que por ahora, no tengo ninguna respuesta.

¿Has probado con otro navegador y/o borrar la cache?

Responder
♥ Ana  

JMiur, creo que ya he probado todo :( y no sólo yo, hay muchas personas que me han comentado que también les pasa lo mismo y han probado con otros navegadores y borrar la caché y sigue igual
A modo de curiosidad te diré que yo tengo dos listas de blogs, una con blogs de cocina y otra con blogs de ayuda, como el tuyo, en la de blogs de cocina, no me deja hacer nada de nada, pensé que podía ser por la cantidad de blogs que tenía pero, no, ya que hay gente que tiene más y están con el mismo problema y, bueno, a lo que iba, en la otra lista, la de los blogs de ayuda, si que me deja añadir más blogs o eliminarlos, a mi todo ésto me confunde porque no tengo ni idea , y, como dices tú, no le pasa a todo el mundo, espero que las cabezas pensantes de Blogger nos digan algo sobre el tema, mientras tanto me temo que no queda otra que tener paciencia y más paciencia
De todas maneras, si sabes algo sobre el tema, te agradecería muchísimo que lo comentaras

Mil gracias por tu tiempo

Responder
JMiur  

Veo tu blog y el único error que noto es que estás cargando prototype y scriptaculous desde la wikipedia y esos enlaces ya no sirven y deberías cambiarlos; si estás usando esas librerías, cárgalos desde Google de este modo:

<script src='http://ajax.googleapis.com/ajax/libs/prototype/1/prototype.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/scriptaculous/1/scriptaculous.js' type='text/javascript'/>

No creo que eso influya pero, por las dudas :-)

Responder
♥ Ana  

Aquí vuelvo, te voy a volver loco con tanta consulta ;)
No me aclaro muy bien donde tengo que cambiar eso, debajo de
  

]]></b:skin>



tengo pueso un código que empieza así:
<script src='http://wiki.script.aculo.us/javascripts/prototype.js' type='text/javascript'/>

<script src='http://wiki.script.aculo.us/javascripts/scriptaculous.js?load=effects' type='text/javascript'/>

<script type='text/javascript'>

function navbarShow() {

new Effect.Opacity('navbar-iframe', {duration:0.5, from:0.0, to:1.0});

}



¿Es eso lo que tendría que cambiar por ésto?


<script src='http://ajax.googleapis.com/ajax/libs/prototype/1/prototype.js' type='text/javascript'/>

<script src='http://ajax.googleapis.com/ajax/libs/scriptaculous/1/scriptaculous.js' type='text/javascript'/>

<script type='text/javascript'>

function navbarShow() {

new Effect.Opacity('navbar-iframe', {duration:0.5, from:0.0, to:1.0});

}



Te lo pregunto para asegurarme antes de toquetear nada en la plantilla, además ahora mismo ya no se ni para que era ese código, jajaja, tengo que mirar en mis apuntes

Gracias de nuevo

Responder
JMiur  

Sí. Exactamente eso, Ana.

Si te fijas bien verás que sólo cambia la dirección URL colocada en el atributo src de los scripts.

Por lo que veo ahí, el código que sigue que es una función, ejecuta algún efecto en al navbar de Blogger que no debe estar funcionando porque esas librerías no se cargan.

Ahora bien, si sólo las tienes agregadas para ese efecto y da la impresión que es así ya que sino, habrías notado que no funcionaban, yo aconsejaría quitarlas por completo ya que son librerías muy pesadas para agregar al blog a menos que se usen intensivamente para muchas otras cosas; caso contrario, no vale la pena y aliviará muchísimo la carga.

Responder
♥ Ana  

Creo que lo único que he hecho con la navbar es ocultarla, y, si es esa la función de ese script, sigue estando oculta la navbar o, yo no la veo, parece que si funciona, suponiendo que efectivamente sea para eso, de todas maneras, lo miraré bien para asegurarme
He puesto varios trucos y códigos en mi blog que no he señalizado adecuadamente y, ahora, me pierdo buscando que es cada cosa, así que me armaré de paciencia y buscaré en los trucos que tengo guardados

Gracias de nuevo y un abrazo

Responder
♥ Ana  

Vuelvo, jejejeje, solo vengo para decirte que gracias por comentarme que quitando eso se aliviaría la carga del blog porque últimamente estaba mirando la manera de poder hacer que mi blog cargara más rápido y aunque he quitado alguna cosa , creo que quedan muchas cosas que podría mejorar o quitar, aunque hace falta saber cuáles son
Veo que tú también tienes la navbar oculta y tu blog carga de maravilla, eso está genial
Hasta luego

Responder
JMiur  

Ana:
La navbar la tienes oculta con CSS:
#navbar-iframe { .... }
lo que haría el script ese es mostrarla cuando se colocara el cursor encima y volverla a ocultar luego. Por eso, si sacas esos scripts, todo quedará igual y seguirá oculta tal como está ahora.

Es improbable que estés usando esas librerías para otras cosas porque te hubieras dado cuenta que algo no funcionaba; de todas maneras, si quieres ir sobre seguro, en lugar de borrarlas, las puedes comentar y de tal forma, probar.

Basta que coloques esto antes de la primera etiqueta <script
<!--
y esto al final de la última </script>
-->

Responder
♥ Ana  

Hola, ahora mismo estaba quitando ese código del blog y he visto que habías comentado aquí
Para ser sincera , ni sabía que había puesto la navbar para mostrarla y ocultarla, creo que esa no era mi intención, yo sólo quería ocultarla, sin más, pero, está visto que lo hice y no se ni cuando, ni como, jajaja, en fin, ya lo he quitado y listo
Imagino que tendré más cosas en la plantilla que no me sirven para nada y están ahí ralentizando la carga del blog pero, si miro me voy perder entre tanto código
No se como darte las gracias por tus ayudas, si nos cobraras por cada ayuda que nos das, ya estarías nadando en la opulencia, jajajaja
Un abrazo y no te vas a librar de mi fácilmente, seguro que te pregunto algo más, hasta pronto

Responder
♥ Ana  

Se me olvidaba, el quitar el código no ha servido para lo de la lista de blogs, sigue sin funcionar pero, está genial que me lo dijeras
Ya ves que pronto he vuelto :D :D

Responder
JMiur  

Quitar lo inútil o lo que no funciona siempre es bueno pero claro, hubiera sido un milagro que eso resolviera el problema de la lista de bogs porque parecería más un problema interno de Blogger que algún error de la plantilla en si misma ¿Será que al usar dos gadgets de ese tipo se provoca un conflicto?

Habrá que esperar y seguir los comentarios de los foros a ver si alguien da una respuesta.

Responder
♥ Ana  

No creo que el problema surja por usar dos gadgets del mismo tipo, de hecho, hasta hace poco funcionaban bien y, además, la gente que me ha comentado que les pasa lo mismo, solo tienen un gadget de ese tipo
He probado a poner uno nuevo añadiendo todos los blogs que sigo y me deja ponerlo perfectamente y también me deja añadir otros blogs, o sea, me funciona bien pero, no me deja eliminar el antiguo, vamos, ésto es de risa, así que he vuelto a quitar el nuevo que había puesto y sigo con el antiguo
No voy a darle más vueltas, ya se arreglará algún día

Responder
♥ Ana  

Bueno, ya la he liado, me he cargado la lista de blogs y no me deja añadir otra, buffffff

Responder
JMiur  

Recuerda que los gadgets, pueden ser agregado o eliminados directamente en el HTML de la plantilla. Por ejemplo, si no expandes lso artilugios para que sea más sencillo, deberías ver algo así:

<b:widget id='BlogList1' locked='false' title='Mi lista de blogs' type='BlogList'/&glt;

donde varía el ID que será BlogList1para el primero, BlogList2 para el segundo, etc
y title será el título que le hayas puesto al gadget

eliminado esa línea, eliminas el gadget y al revés, poniendo una cosa así:

<b:widget id='BlogList99' locked='false' title='OTRO GRADGET' type='BlogList'/&glt;

agregas uno en blanco que luego puedes llenar desde la pantalla de diseño

Responder
♥ Ana  

JMiur, creo que me he explicado mal, si que me deja añadir el gadget pero, no me deja llenarlo, al añadir todos los Blogs de los que soy asiduo, no me deja guardar el gadget, se queda guardando eternamente y tengo que cancelarlo
He probado añadiendo solo un blog y, si que me deja, así que probaré mañana añadiendo de uno en uno a ver que sucede y si no, pues ya no se que hacer
Espero no molestarte ya más con éste tema
Saludos

Responder
JMiur  

Entiendo; si el problema se genera en los datos, entonces no hay nada que hacer porque es evidente que el problema es Blogger mismo.

Habrá que esperar.

Responder
Junio Uno  

JMiur: Te he leído lo suficiente :D como para saber que te caracterizan la curiosidad y las ganas de aprender, de manera que quiero comentarte que sí: es posible usar list.js para crear índices y sitemaps para Blogger.
Mira las pruebas que he hecho en algunos de mis blogs de pruebas: Link1
Link2 (Lo sé:vaya con la Url ... eso me pasa por olvidar poner el título a la página)

La estructura es muy, muy fácil, y puedes verla en sitios como
Link3

El "problemilla" viene porque ... funcionan a base de query. Y ya sabes que no hay mucha afición en los blogeros por esta librería. Pero a mí me gusta, qué se le va a hacer ...

Te comento ahora la estructura, para que puedas estudiarla y comentarla, si quieres (yo no tengo tiempo, ni ganas: prefiero trabajar en Arte Digital ;) ) :

Responder
Junio Uno  

En el primer vínculo, la estructura iría de esta manera:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script> <script src="http://.../js/jquery/jquery.autocomplete.pack.js">
</script> <script>
function load_labels(callback) {
$('#search-labels-box-loader').hide();
$.getJSON("http://www.blogger.com/feeds/" + PROFILE_ID + "/blogs/" + BLOG_ID + "?alt=json-in-script&callback=?", function(data){
if (!data || !data.entry || !data.entry.category)
return;
window.LABELS = [];
var LABELS = window.LABELS;
for (var idx in data.entry.category) {
LABELS.push(data.entry.category[idx].term);
}
LABELS.sort();

var $ddl = $('#labels-ddl');
for (var idx in LABELS) {
$('<option/>').text(LABELS[idx]).val(LABELS[idx]).appendTo($ddl);
}

$('#search-labels-box').slideDown('fast');
// set up autocomplete
$('#labels-search-box').autocomplete(LABELS, {multiple: true});

if (callback)
callback();
});
}
function list_labels() {
var $labels = $('<ul/>').appendTo($('#blogger-labels-result').empty());
for (var idx in LABELS) {
var label = LABELS[idx];
$('<li/>')
.append(
$('<a/>')
.text(label)
.attr('href', '#')
.attr('label', label)
.click(function(){list_posts($(this).attr('label'))})
)
.appendTo($labels);
}
}

Responder
Junio Uno  

function list_posts(slabels, query, show_all) {
var $container = $('#blogger-labels-result');
if (query) {
var query_url = query + '&alt=json-in-script&callback=?';
}
else {
var _labels = slabels.split(',');
var labels = [];
for (var idx in _labels) {
if (_labels[idx].trim())
labels.push(encodeURIComponent(_labels[idx].trim()));
}
var MAX_RESULTS = parseInt($('#max_results').val());
// If it's 0, then set to 500
if (!MAX_RESULTS) {
MAX_RESULTS = 500;
show_all = true;
$container.empty();
}
var labels_part = labels.join('/');
if (labels_part)
labels_part = '/-/' + labels_part;
var query_url = "http://www.blogger.com/feeds/" + BLOG_ID + "/posts/summary" + labels_part + "?alt=json-in-script&callback=?&orderby=" + $('#orderby').val() + '&max-results=' + MAX_RESULTS;
}

if (!show_all)
$container.empty();

var $posts = $container.children('ul');
if ($posts.length == 0) {
$posts = $('<ul/>');
$container.append($posts);
}

$.getJSON(query_url, function(data) {
if (!data.feed.entry) {
$posts.replaceWith($('<span/>').text('No posts found.'));
return;
}
var summary_class = $('#show_summary').attr('checked') ? 'summary' : 'summary hidden';
var timestamp_class = $('#show_timestamp').attr('checked') ? 'timestamp' : 'timestamp hidden';
for (var entry_idx in data.feed.entry) {
var entry = data.feed.entry[entry_idx];
var link = "";
// Find the url of this post
for (var idx in entry.link) {
var l = entry.link[idx];
if (l.rel == 'alternate') {
link = l.href;
break;
}
}
var $li = $('<li/>')
.append(
$('<a/>')
.text(entry.title.$t)
.attr('href', link)
)
.append(
$('<span/>')
.addClass(summary_class)
.text(' - ' + entry.summary.$t)
)
.append(
$('<span/>')
.addClass(timestamp_class)
.text(' - ' + new Date(entry.published.$t))
)
.appendTo($posts);
}

Responder
Junio Uno  

// Check if there are next or prev links
var prev = '';
var next = '';
for (var idx in data.feed.link) {
var l = data.feed.link[idx];
if (l.rel == 'previous')
// Blogger API repeat labels, that causes problem
prev = l.href.replace(/-\/[^-]+/, '');
if (l.rel == 'next')
next = l.href.replace(/-\/[^-]+/, '');
}
if (show_all) {
if (next) {
list_posts(undefined, next, true)
}
else {
// Finish showing all posts
var total_results = parseInt(data.feed.openSearch$totalResults.$t);
$container.append(total_results + ' post' + (total_results==1?'':'s'));
}
}
else {
if (prev)
$container.append($('<a/>').html('« Previous').attr('href', '#').click(function(){list_posts(undefined, prev)}));
var total_results = parseInt(data.feed.openSearch$totalResults.$t);
var start_index = parseInt(data.feed.openSearch$startIndex.$t);
var items_per_page = parseInt(data.feed.openSearch$itemsPerPage.$t);
var end_index = start_index + items_per_page - 1;
if (end_index > total_results)
end_index = total_results;
$container.append(' ' + start_index + '-' + end_index + ' of ' + total_results + ' post' + (total_results==1?'':'s') + ' ');
if (next)
$container.append($('<a/>').html('Next »').attr('href', '#').click(function(){list_posts(undefined, next)}));
}
});
}

Responder
Junio Uno  

function show_summary_change() {
if ($('#show_summary').attr('checked'))
$('#blogger-labels-result .summary').removeClass('hidden');
else
$('#blogger-labels-result .summary').addClass('hidden');
}
function show_timestamp_change() {
if ($('#show_timestamp').attr('checked'))
$('#blogger-labels-result .timestamp').removeClass('hidden');
else
$('#blogger-labels-result .timestamp').addClass('hidden');
}

function append_to_search_box(label) {
if (!window.LABELS) {
load_labels(function(){append_to_search_box(label)});
return;
}
var $input = $('#labels-search-box');
if ($input.val()) {
if (/.*, *$/.test($input.val()))
$input.val($input.val() + ' ' + label);
else
$input.val($input.val() + ', ' + label);
}
else
$input.val(label);
}

function sort_alphabet() {
var $ul = $('<ul/>');
$('#blogger-labels-result ul li').sort(function(a,b){a=$(a).text();b=$(b).text();return a > b ? 1 : (a == b ? 0 : -1)}).appendTo($ul);
$('#blogger-labels-result ul').replaceWith($ul);
}

$(function() {
$('#search-labels-box').hide();
var $container = $('#blogger-labels-container');
var $predefined_labels = $('#predefined-labels');
var $predefined_labels_ul = $('<ul/>').appendTo($predefined_labels);
// List predefined labels
for (var idx_cat in PREDEFINED_LABELS) {
var cat = PREDEFINED_LABELS[idx_cat][0];
var cat_lbls = PREDEFINED_LABELS[idx_cat][1];
var $cat_ul = $('<ul/>');
for (var idx_lbl in cat_lbls) {
var label = cat_lbls[idx_lbl];
$('<li/>')
.append(
$('<a/>')
.text(label)
.attr('href', '#')
.attr('label', label)
.click(function(){list_posts($(this).attr('label'))})
)
.append(' ')
.append(
$('<a/>')
.html('↓')
.attr('href', '#')
.attr('label', label)
.click(function(){append_to_search_box($(this).attr('label'));return false;})
)
.appendTo($cat_ul);
}

$('<li/>')
.text(cat)
.append($cat_ul)
.appendTo($predefined_labels_ul);
}
});

Responder
Junio Uno  

Y ahora definimos CSS, HTML, opciones y nuestro contenido:

</script> <style>
@import url("http://lilbtn.yjl.im/css/jquery.autocomplete.css");
#blogger-labels-container {
color: #222;
}
#predefined-labels {
background-color: #eef;
border-radius: 1ex;
padding: 1ex;
}
#search-options {
background-color: #efe;
border-radius: 1ex;
padding: 1ex;
}
#search-box {
background-color: #fee;
border-radius: 1ex;
padding: 1ex;
}
#blogger-labels-result {
background-color: #ffe;
border-radius: 1ex;
padding: 1ex;
}
#blogger-labels-result .hidden {
display: none;
}

</style>
<div id="blogger-labels-container">
<div id="predefined-labels">
Click on the following label to list posts labeled with the label or click on down arrow to bring them into search box:</div>
<hr />
<div id="search-options">
<div>
<label><input checked="checked" id="show_summary" onchange="show_summary_change()" type="checkbox" /> Show summary</label> • <label><input checked="checked" id="show_timestamp"
onchange="show_timestamp_change()" type="checkbox" /> Show timestamp</label> • <label alt="0 shows all posts" title="0 shows all posts">Show <input id="max_results" size="3" type="text" value="20" /> posts per page</label> </div>
<div>
Sort by <select id="orderby"><option value="published">Published time</option><option value="updated">Last updated time</option></select> or <input onclick="sort_alphabet()" type="button" value="Sort alphabetically" /> after posts listed below. </div>
</div>
<hr />
<div id="search-box">
<div id="search-labels-box-loader">
<input onclick="load_labels()" type="button" value="Click here to get more functions" /></div>
<div id="search-labels-box">
<div>
<input onclick="list_labels()" type="button" value="List labels" /></div>
<div>
<input onclick="list_posts($('#labels-ddl').val())" type="button" value="List posts labeled with" /> <select id="labels-ddl"></select></div>
<div>
<input onclick="list_posts($('#labels-search-box').val())" type="button" value="List posts labeled with" /> <input id="labels-search-box" type="text" value="" /> (Separate by commas)</div>
</div>
</div>
<hr />
<div id="blogger-labels-result">
</div>
</div>
<script>
/*
You should be able to get the following IDs from Blogger Dashboard
PROFILE_ID can be found in View Profile url
BLOG_ID can be found in links of a blog, e.g. NEW POST, Edit Posts, Comments, etc.
*/
var PROFILE_ID = 'Tu ID de perfil de Blogger';
var BLOG_ID = 'La ID de tu Blog';
// Be careful when adding commas if you don't know about JavaScript.
var PREDEFINED_LABELS = [
['Integro', ['El Secreto de Leire', 'Contenidos', 'Comienzos', 'Comento']],
// ^ This one is a label
// ^ they are labels ^^ no commas
['Repetimos', ['Contenidos', 'Comienzos']],
['Poesia', ['Clásicos']],
// ^ need comma
['Musica', ['Tono']]
// ^ no comma
];
</script> </div>

<div style='clear:both'>
</div>
</div>

Responder
Junio Uno  

No hay nada más: salvo cambiar en el último apartado las ID del perfil y del blog de cada uno y colocar en su sitio los nombres de los bloques de etiquetas y, dentro, los nombres de las etiquetas que vamos a incluir en cada bloque. Y,por supuesto, acomodar el CSS a las necesidades cada uno.

Discúlpame por atiborrarte de elementos extraños la bandeja de comentarios :S , pero así estoy segura de que no me salto ni un solo dato

Aprovecho para felicitarte nuevamente por tu trabajo y ... gracias :)

Responder
Yu-Jie Lin  

Hi, I am the author of the code which Junio Uno posted. (I saw the referrer link in Blogger Stat, that's why I know this post)

I can't read Spanish, so I don't really know what this post is about. If it happens to be an English translation of this post somewhere, please let me know.

But this gave me a chance to update my post because HTML comments were stripped by Blogger and I didn't notice before, license text and help text were stripped.

If you want to have the clean entire code, you can grab it and read the installation instructions (you may ask for help in comments of my post).

I saw some codes in comments above, if there is some issues or ideas and someone can translate, I may be able to add my inputs. (Sorry, I know this is a Spanish blog)

Responder
JMiur  

Yu-Jie Lin

I do not know the meaning of the comments added and this post has nothing to do with it because it talks about a script ready to handle lists. You can translate the page with the link in the sidebar or use this link.

It is clear that there is an example of something that is not explained in the comments but not translated since many lines are still in english.

I have not tried so I can say nothing about it. I think it would be reasonable that you will communicate with the author of the comments to see if she can bring something more to your work or help you to translate it.

Responder
Junio Uno  

Buenos días, JMiur:

Ya me he puesto en contacto, en su página web, con el autor: le he dejado un comentario sugiriéndole que adapte el código para que pueda figurar en él una mención de atribución de su trabajo y le he ofrecido traducirlo al español y explicarlo en mi blog, para hacerlo más conocido y accesible a la comunidad de bloggers hispano-parlante.

No sé de dónde voy a sacar tiempo para hacerlo, si me da su permiso, pero creo firmemente que el trabajo de Yu-Jie Lin merece la pena, y mucho, ser divulgado.

Un saludo.

Responder
Solo pero vivo  

en que parte va este codigo

script
var opciones = {valueNames: [ "nombre","apellido" ]};
var featureList = new List("miprimerejemplo", opciones);
script

porque no me sale la lista asi como en el ejemplo
me sale asi

NOMBRE APELLIDO

•texto 1 texto 2
•texto 3 texto 4

osea no me aparece para clikear y ordenarlos

Responder
JMiur  

Tal como se muestra en el ejemplo, eso va debajo del DIV con la tabla.

Responder
Junio Uno  

El autor de "labels page" me ha contestado de forma muy afable (cosa que mi sentido de la cortesía agradece profundamente)) y, a sugerencia mía, ha subido de nuevo el script, para que contenga su autoria y la oportuna Licencia.

Me ha pedido que le informe si tengo alguna idea para mejorar los blogs de Blogger, pues él quisiera colaborar. De la misma manera que me ha pedido que le comente si recibo alguna mención respecto de su trabajo.

Teniendo en cuenta que su autor es quien hace ya un montón de tiempo, cuando nadie sabía nada de las entradas relacionadas y Blogger estaba en la plantilla clásica, hizo el primer hack al respecto, y Blogger lo hizo suyo, me parece que merece la pena divulgar su trabajo ... aunque sea con una librería tan despreciada (y temida) entre los bloggers como es query.

En cuanto traduzca su trabajo al español, vuelvo y pongo una referencia.


Un saludo.

Responder
Yu-Jie Lin  

I think there is some misunderstanding about the translation I mentioned and I didn't try to as for translation help or any other help in my previous comment.

I was actually talking about this post and the issues in the comments, for instance Ana's.

After read the translation of this page by Google Translate, I think I understand why Junio Uno posted my code here. It's because #4 and #5 suggested some use of this post's code.

However, I do expect collaboration of anything about coding.

Responder
JMiur  

Hay muchos ejemplos de scripts que generan Tablas de contenido que pueden ordenarse o llegado el caso, filtrarse. Esta es una de las más antiguas. En los ejemplos, sólo se ordena por nombre y fecha pero podría ordenase según cualquier otro criterio agregado.

Responder
Mauricio Vargas Garcia  

Quisiera saber como ocultar la lista y solo dejar el buscador (me refiero al ultimo ejemplo) y que cuando alguien ponga una letra, vayan saliendo los resultados como usted tiene su buscador ,así, similar, Te agradecería mucho si pudieras saber como se hace eso !!

JMiur  

Supongo que para eso debería modificarse el script sustancialmente. Tendrías que preguntar en el sitio del desarrollador a ver si tal cosa es posible.

Responder
Mauricio Vargas Garcia  

JMiur Quisiera saber como hizo usted el buscador que tiene en este blog?

JMiur  

Es el buscador de Google. Fíjate en esta entrada.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR