File: Examples/Example_1.html

Recommend this page to a friend!
  Classes of Emmanuel Podvin   jQuery FSM   Examples/Example_1.html   Download  
File: Examples/Example_1.html
Role: Example script
Content type: text/plain
Description: Example
Class: jQuery FSM
Animate page elements using Finite State Machines
Author: By
Last change: update to jquery 3.7.1
Date: 7 months ago
Size: 3,557 bytes
 

Contents

Class file image Download
<!DOCTYPE html> <html> <head> <title>iFSM in action! countdown button managed with an FSM</title> <script type="text/javascript" src="../extlib/jquery.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>