Un script para manejar listas

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

• Yahoo! WebPlayer Beta: Audio y video
• Circus: Cinco íconos para divertirse
• jCodeCollector: Guardar códigos de modo ordenado
• liteAccordion: Un acordeón para jQuery
• Columnas con CSS: Mosaico de entradas
• Usar CSS para crear etiquetas repetitivas
• El presidente más grande del mundo
• c64 YOURSELF
• Traducciones de textos con el API de Google
• Columnas con CSS: Introducción
• Blogger: La nueva interfaz será obligatoria
• Imágenes y CSS: Todo depende del navegador
• Lúmen
• Si todo falla: Hay que borrar la caché del navegad...
• Navegación con círculos
• El retorno del Lightbox de Blogger
• Jugando con las voces de Google
• Videos fluidos sin librerías
• Google Plus Icons
• Cómo crear una ventana modal propia (final )
• CSSWarp: Curvas al extremo
• Las posiciones absolutas son relativas a "algo"
• Alinear el texto y el avatar en los comentarios
• The bridge
• Picons Social Icon Pack
• La propiedad text-overflow
• Cómo crear una ventana modal propia (3)
• Jugando a superponer contenidos
• Aubade
• hiperurl: Un enlace para múltpes direcciones
• Twitvid: Alojar imagenes y videos sin problemas
• Transiciones sin usar :hover
• Cómo crear una ventana modal propia (2)
• Ryan Larkin
• Eliminar el nuevo LightBox de Blogger
• Los pixeles son unidades indivisibles
• Cómo crear una ventana modal propia (1)
• Mejorar la indexación del blog
• Pop-Up sólo con CSS
• T-Shirts para diseñadores web
• HTML aleatorio con randomtext.me
• Videos de tamaños fluidos con jQuery
• Condicionar widgets según etiquetas
• Proteger Facebook y Twitter con Bitdefender
• Invention of love
• Cinco y un par de dias
• Google Panda al ataque