sábado, 13 de septiembre de 2014

jQuery FSM - Controlar el estado de los elementos


jQuery FSM es un paquete jQuery que permite crear controles de estado en los elementos del DOM HTML.

Por ejemplo, tenemos un botón al cual le tenemos que asignar tres estados 1, 2, 3 y necesitamos acceder a cada estado tras un determinado evento (click, mouseover, mouseout, ...), tras cada estado puede ocurrir uno cosa diferente, un mensaje en un div, una petición ajax, reproducción de música, ..., es decir, cualquier acción que sea necesaria asignar a cada estado del botón.

En el paquete de descarga vienen muchos ejemplos de como utilizarlo.

Descargar: jQuery FSM

jQuery FSM - Controlar el estado de los elementos


 Código de uno de los ejemplos Example_1.html ...

<!DOCTYPE html>
<html>
<head>
<title>iFSM in action! countdown button managed with an FSM</title>
<script type="text/javascript" src="../extlib/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="../extlib/jquery.dotimeout.js"></script>
<script type="text/javascript" src="../extlib/jquery.attrchange.js"></script>
<script type="text/javascript" src="../iFSM.js"></script>

<style type="text/css">
  html {
    font-family: Helvetica, Arial, sans-serif;
  }
  body {
    padding: 0 20px;
  }
  button {
    margin: 0 2px;
    font-size: 20px;
    border: 1px solid #333;
    width: 70px;
    text-shadow: 0 -1px 0 #333;
    border-radius: 5px;
  }
  button.on {
    color: #dfd;
    background: #00aa00;
    background: -moz-linear-gradient(top, rgba(0,153,0,1) 0%, rgba(0,119,0,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,153,0,1)), color-stop(100%,rgba(0,119,0,1)));
    background: -webkit-linear-gradient(top, rgba(0,153,0,1) 0%,rgba(0,119,0,1) 100%);
    background: -o-linear-gradient(top, rgba(0,153,0,1) 0%,rgba(0,119,0,1) 100%);
    background: -ms-linear-gradient(top, rgba(0,153,0,1) 0%,rgba(0,119,0,1) 100%);
    background: linear-gradient(top, rgba(0,153,0,1) 0%,rgba(0,119,0,1) 100%);
  }
  button.off {
    color: #fdd;
    background: #CC0000;
    background: -moz-linear-gradient(top, rgba(204,0,0,1) 0%, rgba(153,0,0,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(204,0,0,1)), color-stop(100%,rgba(153,0,0,1)));
    background: -webkit-linear-gradient(top, rgba(204,0,0,1) 0%,rgba(153,0,0,1) 100%);
    background: -o-linear-gradient(top, rgba(204,0,0,1) 0%,rgba(153,0,0,1) 100%);
    background: -ms-linear-gradient(top, rgba(204,0,0,1) 0%,rgba(153,0,0,1) 100%);
    background: linear-gradient(top, rgba(204,0,0,1) 0%,rgba(153,0,0,1) 100%);
  }
</style>

<script type="text/javascript" id="iFSMscript">

var aStateDefinitionButton = {

	ButtonDoCountdown		: 
	{
		enterState : 
		{
			init_function		: function (){this.myUIObject.html("on").attr({'class':'on'});this.opts.counter=3}
		},
		exitState : 
		{
			init_function		: function (){this.myUIObject.html("wait");}
		},
		click	:	
		{
			process_event_if		: '(this.opts.counter<=0)',
			propagate_event_on_refused	: 'notReady',
			next_state			: 'ButtonWaitNextCountdown'
		},
		notReady :
		{
			init_function		: function (){this.myUIObject.html(this.opts.counter);this.opts.counter=this.opts.counter-1;}
		}
	},
	ButtonWaitNextCountdown		: 
	{
		enterState : 
		{
			init_function		: function (){this.trigger('setButtonOff');}
		},
		setButtonOff :
		{
			init_function		: function (){this.myUIObject.html("off").attr({'class':'off'});},
			how_process_event	: {delay:1000}
		},
		click	:	
		{
			next_state		: 'ButtonDoCountdown'
		}
	},
	DefaultState			:
	{
		start	:	
		{
			next_state		: 'ButtonDoCountdown'
		}
	}				
}
 
$(document).ready(function() {
	 $(".onoff").iFSM(aStateDefinitionButton); //create the machine
});
 </script>
 </head>
<body style="margin:100px;">
    <h2>On-Off Buttons:</h2>
   
    <button class="onoff" id="onoff_button1"></button>
    <button class="onoff" id="onoff_button2"></button>
    <button class="onoff" id="onoff_button3"></button>
    <button class="onoff" id="onoff_button4"></button>
    <button class="onoff" id="onoff_button5"></button>
    
        <br><br>
	<pre>
	<script>document.write($('#iFSMscript').html())</script>
    </pre>
    <p>iFSM provided by <a href="http://www.intersel.fr">Intersel</a></p>

</body>
</html>