LIGA.js

Ejemplo de jquery.liga.js

HTML

<script src="http://148.202.148.10/matrix/jquery.liga/js/jquery.liga.min.js"></script>
<script src="http://148.202.148.10/matrix/jquery.liga/js/md5.min.js"></script>
<link rel="stylesheet" href="http://148.202.148.10/matrix/jquery.liga/css/LIGA.css">
<link rel="stylesheet" href="http://148.202.148.10/matrix/jquery.liga/css/jquery-ui/liga/jquery-ui-1.9.2.liga.min.css">
<div class="flotante">Contenedor flotante</div>
 <h1><img src="http://148.202.148.10/matrix/jquery.liga/img/LIGA.png" alt="Proyecto LIGA" /></h1>

<p>El proyecto LIGA presenta <strong>jquery.liga.js</strong>, no sólo es un
    Plugin para <strong>JQuery</strong>, es toda una <em>suite</em> de funcionalidades
    que mejoran la expediencia del usuario en una aplicación web.</p>
<p>Posee compatibilidad con los temas de JQuery UI, basta con cargar su hoja
    de estilos para obtener su diseño con <strong>jquery.liga.js</strong>
</p>
<p>En caso de cargar la función <em>Draggable</em> de <strong>JQuery UI</strong> podrá
    mover las ventanas de alerta y preguntas, siendo totalmente opcional su
    uso.</p>
<p>A continuación una demostración de sus funciones:</p> <pre class="ui-widget-content">
    <button class="btn1" onclick="$('body').liga('mensaje', 'Mensaje de pruebas con jquery.liga.js')">Mensaje (en body)</button>
        $('body').liga('mensaje', 'Mensaje de pruebas con jquery.liga.js');
        
    <button class="btn2" onclick="$('.flotante').liga('mensaje', {msj:'Mensaje alterno con class personalizado y colocado en un contenedor distinto a <em>body</em>, puede tener HTML: <img src=\'http://148.202.148.10/matrix/jquery.liga/img/LIGA.png\' />','class':'msj2'})">Mensaje (en contenedor flotante a la derecha)</button>    
        $('.flotante').liga('mensaje',  {msj:'Mensaje alterno con class personalizado 
        y colocado en un contenedor distinto a &lt;em>body&lt;/em>, puede tener HTML: &lt;img src="img/LIGA.png" />', 'class':'msj2'} );</pre>

<pre
class="ui-widget-content">
    <button...

CSS

html {
          background-color:#dfdfdf;
      }
      pre {
          font-family:monospace;
          background-color:#c4c4c4;
          font-size:15px;
          border-radius:5px;
          padding:5px;
      }
      .flotante {
          position:fixed;
          right:10px;
          top:10px
      }
      label {
          width:120px;
      }
      fieldset {
          width: 40%;
          min-width:260px;
      }

JavaScript

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'
            }
        };
        var filtro = {
            'contraseña': function (valor) {
                return hex_md5(valor);
            }
        };
        $('#nvoUsr').liga('AJAX', {
            reg: reglas,
            fil: filtro,
            mensajes: function (msj) {
                $('.flotante').liga('mensaje', msj);
            },
            error: function (msj, campo) {
                $('.flotante').liga('mensaje', msj);
            }
        });