The Hello Bar is a simple notification bar that engages users and communicates a call to action.

Archive for the ‘Plugins’ Category:


Atractivo efecto al dividir una imagen en tiras con jQuery

PicStrips es un plugin gratuito, desarrollado para el framework jQuery y que sirve para crear un atractivo efecto generando tiras de una misma imagen.

El plugin es de fácil personalización, podemos elegir la orientación de las tiras, la cantidad, el ancho, y finalmente el color de fondo de la composición.

Si utilizamos PicStrips vamos a obtener el siguiente resultado:

dividir imagen en tiras con jQuery

Utilizar este plugin es muy sencillo, por ejemplo podemos generar el efecto de tiras con una simple linea de código:

$("#s").picstrips( {
	splits: 18,
	hgutter: '2px',
	vgutter: '10px',
	bgcolor: '#fff'}
);

Menu contextual personalizado con jQuery

contextMenu es un pequeño y potente plugin jQuery, que nos permite con muy pocas lineas de código, modificar el aspecto y opciones disponibles en el menú contextual accesible mediante el botón derecho de nuestro ratón.

Un ejemplo de menu contextual modificado:

menu contextual personalizado con jQuery

Uno de los detalles más interesantes de este plugin es que puede ser asignado a elementos puntuales, por ejemplo podemos decidir si el menú contextual solo se muestra al presionar el botón derecho del mouse sobre un campo input, textarea, o bien sobre un texto determinado.
Ejemplo de uso:

$(function(){
    $.contextMenu({
        selector: '.context-menu-one',
        callback: function(key, options) {
            var m = "clicked: " + key;
            window.console && console.log(m) || alert(m);
        },
        items: {
            "edit": {name: "Edit", icon: "edit"},
            "cut": {name: "Cut", icon: "cut"},
            "copy": {name: "Copy", icon: "copy"},
            "paste": {name: "Paste", icon: "paste"},
            "delete": {name: "Delete", icon: "delete"},
            "sep1": "---------",
            "quit": {name: "Quit", icon: "quit"}
        }
    });
});

Les recomiendo leer la documentación oficial, el plugin es muy rico en opciones de personalización, también permite manejar de distintas formas los diferentes eventos y acciones que recibe el menú contextual.

Ejemplo demostración.

Una alternativa a este tambien es Menu contextual jQuery

ToolTip con CSS3 y jQuery

Bubble Point Tooltips es un plugin que modifica el comportamiento por defecto de la etiqueta title de los enlaces que se muestra comúnmente cuando posicionamos el puntero del ratón sobre un enlace con un fondo amarillo, bastante feo. Para ejecutar este plugin solo necesitamos inicializarlo con una simple linea de código.

Ejemplo de uso:

$("article a[title]").tooltips();

Pueden ver una demostración online directamente desde la demo disponible.

Web Bubble Point Tooltips with CSS3 & jQuery

Paginar resultados con jQuery

jqPagination es un plugin desarrollado con jQuery que sirve para paginar resultados de forma sencilla. El plugin tiene un funcionamiento muy simple y permite crear resultados paginados mediante AJAX.

Utilizar este  plugin es muy fácil, por un lado vamos a necesitar preparar nuestro documento HTML de la siguiente manera:

<div>
    <a href="#" data-action="first">&laquo;</a>
    <a href="#" data-action="previous">&lsaquo;</a>
    <input type="text" readonly="readonly" data-max-page="40" />
    <a href="#" data-action="next">&rsaquo;</a>
    <a href="#" data-action="last">&raquo;</a>
</div>

Finalmente vamos a inicializar el plugin:

$('.pagination').jqPagination({
    paged: function(page) {
        // do something with the page variable
    }
});

Lo importante de este plugin es que devuelve una variable con la pagina actual. Con esa misma variable debemos trabajar enviándola como parámetro a un ejecutable del lado del servidor (o no) que va a devolver la información a mostrar.

Paginar resultados jQuery y AJAX

Darle formato a fechas en jQuery

Sensible DateTime es un pequeño plugin desarrollado para funcionar con el framework jQuery, que permite la edición y manipulación rápida de datos del tipo fechas.

Ejemplo de uso:

<p>Nací el <abbr title="1985-06-15T00:00:00">Jun 5th, 1985
</abbr></p>

jQuery:

$(function() {
 $('.dtime').sensible();
});

Resultado:

Nací el June 5, 1985 at 12:00am

Filtrar, ordenar y buscar en listas con Javascript

Filtrar, ordenar y buscar en listas con Javascript

List.js es una solución que funciona perfectamente en los navegadores más modernos, con un peso de apenas 7 KB. El Javascript no solo permite realizar operaciones básicas referentes al filtrado de la información sino que también contempla la posibilidad de agregar, remover y actualizar elementos directamente desde la lista y sin complicaciones.

html:

<div id="hacker-list">
    <ul>
       <li>
           <h3>Jonny</h3>
           <p>Stockholm</p>
       </li>
       <li>
           <h3>Jonas</h3>
           <p>Berlin</p>
       </li>
    </ul>
</div>

Javascript:

var options = {
    valueNames: [ 'name', 'city' ]
};

var hackerList = new List('hacker-list', options);

Organización dinámica de elementos con jQuery

Masonry es un plugin gratuito desarrollado con jQuery que nos ayuda en la difícil tarea de organizar elementos de distintos anchos y altos en una grilla. De la forma más eficiente y aprovechando al máximo el tamaño disponible.

Un escenario bastante común con el que podemos encontrarnos es el de tener que organizar una serie de cajas de dimensiones idénticas a lo largo de toda una grilla, esto no representa ningún problema, ahora bien, ¿que pasa cuando el tamaño de las cajas es variable? en este último escenario es donde se encuentra la verdadera utilidad de Masonry.

Ejemplo de como se organizar el contenido:

organizar divs jQuery grid

Masonry detecta automáticamente el tamaño, ancho y alto de cada caja, y evalúa de forma inteligente su ubicación, de esta manera obtenemos de forma casi instantánea una disposición que economiza espacio y que gestiona perfectamente los lugares de una grilla conformada por elementos de diversos tamaños.

Ejemplo de uso:


$('#container').masonry({ itemSelector : '.item', columnWidth : 240 });

El plugin funciona de igual manera con distintos tipos de elementos, un dato de lo más interesante para aquellos que trabajan con fotografías, las mismas en línea general se encuentran en distintos tamaños y disposiciones por lo que ordenarlas siempre es una tarea complicada.

© Xtreme News
CyberChimps