Contenedor flotante

Proyecto LIGA

El proyecto LIGA presenta jquery.liga.js, no sólo es un Plugin para JQuery, es toda una suite de funcionalidades que mejoran la expediencia del usuario en una aplicación web.

Posee compatibilidad con los temas de JQuery UI, basta con cargar su hoja de estilos para obtener su diseño con jquery.liga.js

En caso de cargar la función Draggable de JQuery UI podrá mover las ventanas de alerta y preguntas, siendo totalmente opcional su uso.

A continuación una demostración de sus funciones:

    
        $('body').liga('mensaje', 'Mensaje de pruebas con jquery.liga.js');
        
        
        $('.flotante').liga('mensaje',  {msj:'Mensaje alterno con class personalizado 
        y colocado en un contenedor distinto a <em>body</em>, puede tener HTML: <img src="img/LIGA.png" />', 'class':'msj2'} );
    
        $.liga('alerta',  {msj:'Ventana de alerta personalizable, acepta HTML: <pre>Código  fuente...</pre> <img src="img/LIGAG.png" />',
                           tit:'Con título'} );
                           
        
        $.liga('pregunta', {msj:'¿Le gusta LIGA.js?',
                            funcS:function() {
                             $.liga('alerta', '¡Muchas gracias!')
                            },
                            funcN:function() {
                             $.liga('alerta', ':,(')
                            }
                           } );
    
        $.liga('memoria', ['llave', 'valor']);
    
    
        var dato = $.liga('memoria', ['llave']);
        $.liga('alerta', {msj: dato, tit: 'La llave contiene'} );
    
    
        $.liga('memoria', ['llave', null]);
    
        // Si el navegador no implementa Notificaciones de escritorio lanza un mensaje en el body 
        $.liga('notificacion', 'Notificando desde jquery.liga.js');

Gestión del historial AJAX

Formularios AJAX con validación local

Registro de usuarios nuevos
        // Se definen las reglas de validación para el formulario
        var reglas = {
         nombre       : {
          requerido : true
         },
         'contraseña' : {
          requerido : true,
          cond      : 'valor.length > 5',
          msj       : 'La contraseña debe contener más de 5 caracteres'
         },
         edad         : {
          mayor     : 17,
          menor     : 100,
          msj       : 'La edad debe estar entre los 18 y 99 años'
         },
         fecha        : {
          patron    : /^\d{4}-\d{2}-\d{2}$/,
          msj       : 'La fecha debe tener el formato YYYY-MM-DD'
         },
         foto         : {
          msj       : 'Foto no válida (1 jpg o png entre 500Kb y 5Mb)',
          patron    : /image/,
          tamin     : 0.5*1048576,
          tamax     : 5*1048576,
          numin     : 1
         }
        };
        
        // Permite modificar el valor de un campo después de la validación y antes del envío
        var filtro = {
         'contraseña' : function(valor) {
          // Se cargó la biblioteca md5 de http://pajhome.org.uk/crypt/md5
          return hex_md5(valor);
         }
        };
        
        // Se aplica AJAX al submit del formulario seleccionado
        $('#formulario').liga('AJAX', {reg:reglas, fil:filtro, mensajes:function(msj) {
         // Colocamos los mensajes en un contener distinto al que viene por defecto
         $('.flotante').liga('mensaje', msj);
        }});