Plantillas HTML5 que podemos usar

Plantillas HTML5 que podemos usar

Observa más listas creadas por Dominando jQuery

Plugin jQuery Easy Ticker, una manera facíl de generar barra de noticias

Plugin jQuery Easy Ticker, para barra de noticias (animando sus artículos), muchas veces utilizamos listas de elementos obtenidas de alguna base de datos, por ejemplo:

• Listas de productos
• Listas de noticias
• Listas de usuarios
• Listas de comentarios

En ocasiones paginamos estos elementos ya que no tienemos una forma automática de pasar de un elemento a otro, debido a esa necesidad hay un plugin que puede ayudarnos a mostrar dicho contenido de forma infinita, mostrando inclusive una animación con diferentes estilos, su nombre es jQuery Easy Ticker.

Con este plugin podemos implementar efectos como animación hacia arriba o abajo, ademas que tenemos un control sobre los elementos que quieremos mostrar; como en el caso del ejemplo que implementamos en jsfiddle.

Posee una documentación (en ingles), muy sencilla, además de ejemplos muy legibles, también seria bueno que antes de implementar el plugin tengas en cuenta los siguientes puntos con los cuales cuenta:

1. Dos direcciones disponibles (Arriba y abajo).
2. Puede ser dirigido.
3. API flexible para que se extiende a varias aplicaciones.
4. Soporta suavizar funciones.
5. Botón de pausa.
6. La velocidad de la transición se puede cambiar.
7. Los controles pueden ser añadidos para reproducir / pausar o mover la lista hacia arriba y hacia abajo.
8. Soporta Cross browser.
9. Ligero (4 Kb – fuente completo / 2,7 Kb – fuente minimizada).

Un simple ejemplo de su implementación:

Código en html

<div class="barranoticia">
 <div class="barra">
  <div class="noticia"> Noticia 1 </div>
  <div class="noticia"> Noticia 2 </div>
  <div class="noticia"> Noticia 3 </div>
  <div class="noticia"> Noticia 4 </div>
 </div>
</div>

Código en jQuery

$('.barranoticia').easyTicker({
 direction: 'up',
 speed: 'slow',
 interval: 2000,
 height: 'auto',
 visible: 0,
 mousePause: 1
});

Visitar la web official | github | jQuery Plugin

Demostración en jsfiddle:

Alertify un plugin para realizar alertas y notificaciones personalizados

Alertify es pequeña librería para la mostrar interesantes ventanas de diálogo y notificaciones. Es fácil de personalizar con CSS, posee una API sencilla, además no depende de librerías de terceros (pero se adapta muy bien a ellos).

Este plugin está completamente en Inglés en su página oficial. Pero es muy fácil adaptar al español.

Principales características de Alertify.js:

• Código Javascript no invasivo y ligero.
• Fácil de implementar.
• Permite crear diálogos de alertas, confirmaciones y de entrada de datos.
• Permite crear etiquetas de botones personalizadas.
• Permite crear mensajes de log personalizados.
• Alertify.js es una completa solución para crear elementos personalizados en la interfaz de cualquier desarrollo web sin sacrificar tiempo ni usabilidad.

Ejemplos de su uso:

// diálogo de alerta
alertify.alert("Mensaje");

// diálogo de confirmación
alertify.confirm("Mensaje", function (e) {
    if (e) {
        // Usuario ha hecho clic en "aceptar"
    } else {
        // Usuario ha hecho clic en "cancelar"
    }
});

// diálogo con entrada de texto
alertify.prompt("Mensaje", function (e, str) {
    // str contiene el texto introducido
    if (e) {
        // Usuario ha hecho clic en "aceptar"
    } else {
        // Usuario ha hecho clic en "cancelar"
    }
}, "Valor predeterminado");

Notificaciones

// notificación básica
alertify.log("Notificación");

// notificación básica
alertify.success("Notificación correcta");

// notificación básica
alertify.error("Notificación erronea");

Un video explicando su implementación:

Visitar la web official | github | cdn

Nuestra demostración en jsfiddle

Alternativas a alertify.js no oficiales:

• alertifyjs.org
• alertifyjs.com