ShiftCheckbox – jQuery Plugin

shiftcheckbox permite a los usuarios para seleccionar el rango de casillas de verificación, haga click en una casilla y, a continuación, SHIFT + click en la última casilla de verificación deseada. Todas las casillas entre la primera y la última se seleccionaran.

Para este ejemplo tendremos que descargar el plugin e incluirlo en el head de nuestra pagina.

<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script type="text/javascript" src="jquery.shiftcheckbox.js"></script>

Luego incluimos el código que relizara todo el proceso mediante el class del checkbox.

$(document).ready (
	function () {
  	$.shiftcheckbox.init('shiftchk');
});

Ahora tendremos que poner el class ‘shiftchk’ a las casillas de verificación.

<input name="chk1" value="1" class="input shiftchk" type="checkbox">1 Item<br>
<input name="chk1" value="1" class="input shiftchk" type="checkbox">2 Item<br>
<input name="chk1" value="1" class="input shiftchk" type="checkbox">3 Item<br>
<input name="chk1" value="1" class="input shiftchk" type="checkbox">4 Item<br>
<input name="chk1" value="1" class="input shiftchk" type="checkbox">5 Item<br>
<input name="chk1" value="1" class="input shiftchk" type="checkbox">6 Item<br>
<input name="chk1" value="1" class="input shiftchk" type="checkbox">7 Item<br>
<input name="chk1" value="1" class="input shiftchk" type="checkbox">8 Item<br>
<input name="chk1" value="1" class="input shiftchk" type="checkbox">9 Item<br>
<input name="chk1" value="1" class="input shiftchk" type="checkbox">10 Item<br>

Eso es todo lo necesario, código limpio, no obstrusivo en nuestra web.

Recursos

Link Nudging con Mootools y jQuery

Link nudging realiza un efecto de animación muy bueno para enlaces, cuando el mouse esta sobre el enlace, lo lanza a la derecha y cuando se quita el mouse regresa a su posición original.

Este ejemplo se realizara con dos librerías muy usadas, Mootools y jQuery.

Ejemplo con jQuery 1.2.6

Primero tienes que descargar esta versión de jQuery y colocarla en el head de tu pagina web, luego colocar este script también en el head.

$(document).ready(function()
{
	$('a.nodo').hover(function()
    {
		$(this).animate({ paddingLeft: '20px' },400);
	},
    function()
    {
		$(this).animate({ paddingLeft: 0 }, 400);
	});
});

Ejemplo con MooTools 1.2

Para este caso descargar Mootools 1.2 y colocarlo dentro del head de nuestra pagina web, el siguiente script al contrario con el de jQuery tendremos que colocarlo justo antes de cerrar la etiqueta body (</body>).

$$('a.nodo').each(
    function(el)
    {
        var fx = new Fx.Morph(el,{ duration:300, link:'cancel' });
        el.addEvents(
        	{
                'mouseenter':function()
                { fx.start({ 'padding-left': 20 }); },
                'mouseleave':function()
                { fx.start({ 'padding-left': 0 }); }
        	}
        );
    });

Recursos

Copiar Texto con jQuery

Navegando por internet encontre un script de como copiar en el portapapeles simplemente con una función javascript, esta función necesita de un archivo .swf el cual realiza el proceso de copia hacia el portapapeles.

Para este ejemplo utilizaremos jQuery_1.2.6, la descargamos y la incluimos en nuestra pagina html.

<script src="js/jquery-1.2.6.js" type="text/javascript"></script>

Luego abrimos otra etiqueta de script y copiamos este código que es el que realizara el copiado.

(function($) {
    $.copy = function(t) {
        var ruta = "swf/copy.swf"
        if (typeof t == 'undefined')
        {
            t = '';
        }
        var i = '<embed src="' + ruta + '" FlashVars="clipboard=' ;
         	i += encodeURIComponent(t) ;
            i += '" width="0" height="0" ';
            i += 'type="application/x-shockwave-flash"></embed>';
        if ($('#flashcopier').length == 0)
        {
            $('body').append('<div id="flashcopier">' + i + '</div>')
        }
        else
        {
            $('#flashcopier').html(i)
        }
    }
})(jQuery);

Ahora para probar podemos incluir dentro del body una caja de texto y un link que copie el texto ingresado en la caja.

<input type="text" id="copiame" name="copiame" value="Texto Copiado" />
<a href="javascript:$.copy($('#copiame').val())">Copiar Texto</a></div>

Recursos