File: Examples/Example_Request.html

Recommend this page to a friend!
  Classes of Emmanuel Podvin   jQuery FSM   Examples/Example_Request.html   Download  
File: Examples/Example_Request.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: 5 months ago
Size: 5,790 bytes
 

Contents

Class file image Download
<!DOCTYPE html> <html> <head> <title>iFSM in action! a request processing managed with iFSM</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: 100px; 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%); } #StatesImg { width: 750px; height: 550px; } #StatesImg img { opacity: 0; position: absolute; } pre { font-size: 12px; background-color: black; color: green; } </style> <script type="text/javascript" id="iFSMscript"> var aRequestStates = { Start : { enterState : { init_function : function() { $('#original').animate({ 'opacity' : '1' }, 500) }, }, Submit : { next_state : 'Submitted', }, exitState : { init_function : function() { $('#original').animate({ 'opacity' : '0' }, 500) }, } }, Submitted : { enterState : { init_function : function() { $('#submitted').animate({ 'opacity' : '1' }, 500) }, }, Duplicate : { next_state : 'Duplicate', }, Open : { next_state : 'Opened', }, Close : { next_state : 'Closed', }, exitState : { init_function : function() { $('#submitted').animate({ 'opacity' : '0' }, 500) }, } }, Duplicate : { enterState : { init_function : function() { $('#duplicate').animate({ 'opacity' : '1' }, 500) }, }, Open : { next_state : 'Opened', }, Close : { next_state : 'Closed', }, exitState : { init_function : function() { $('#duplicate').animate({ 'opacity' : '0' }, 500) }, } }, Opened : { enterState : { init_function : function() { $('#opened').animate({ 'opacity' : '1' }, 500) }, }, Close : { next_state : 'Closed', }, exitState : { init_function : function() { $('#opened').animate({ 'opacity' : '0' }, 500) }, } }, Closed : { enterState : { init_function : function() { $('#closed').animate({ 'opacity' : '1' }, 500) }, }, Reopen : { next_state : 'Opened', }, exitState : { init_function : function() { $('#closed').animate({ 'opacity' : '0' }, 500) }, } }, DefaultState : { start : { next_state : 'Start' }, Reset : { next_state : 'Start' } } }; var aEventButton = { DefaultState : { click : { init_function : function() { this.opts.MainFSM.trigger(this.myUIObject.attr('id')) }, }, } } $(document).ready(function() { $('#StatesImg').iFSM(aRequestStates); $(".onoff").iFSM(aEventButton, { 'MainFSM' : $('#StatesImg').getFSM(aRequestStates) }); //create the machine $('#Reset').trigger('click'); }); </script> </head> <body style="margin: 10px;"> <h1>FSM Demo</h1> <p> Open a new Request with the "Submit" button<br> Then change state by clicking the event you like<br> Then, when finished, you can reset, then do a new "Submit"... </p> <div id="StatesImg"> <img id="original" src="../img/EnhancementRequest_original.jpg"> <img id="submitted" src="../img/EnhancementRequest_submitted.jpg"> <img id="duplicate" src="../img/EnhancementRequest_duplicate.jpg"> <img id="opened" src="../img/EnhancementRequest_opened.jpg"> <img id="closed" src="../img/EnhancementRequest_closed.jpg"> </div> <h2>Event Buttons:</h2> <button class="onoff" id="Reset">Reset</button> <button class="onoff" id="Submit">Submit</button> <button class="onoff" id="Open">Open</button> <button class="onoff" id="Reopen">Reopen</button> <button class="onoff" id="Duplicate">Duplicate</button> <button class="onoff" id="Close">Close</button> <h2>the State Definition</h2> <br> <br> <pre> <script> function escapeHtml(text) { var map = { '&' : '&amp;', '<': '&lt;', '>' : '&gt;', '"' : '&quot;', "'" : '&#039;' }; return text.replace(/[&<>"']/g, function(m) { return map[m]; }); } document.write(escapeHtml($('#iFSMscript').html())) </script> </pre> <p> provided by <a href="http://www.intersel.fr">Intersel</a> </p> </body> </html>