File: Examples/Example_Test_Bubbling.html

Recommend this page to a friend!
  Classes of Emmanuel Podvin   jQuery FSM   Examples/Example_Test_Bubbling.html   Download  
File: Examples/Example_Test_Bubbling.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,766 bytes
 

Contents

Class file image Download
<!DOCTYPE html> <html> <head> <title>iFSM in action! Test on bubbling events on objects</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 10px; } #ButtonContainerNoBubble {font-size: 12px;background-color: #AAA;margin:5px;padding:5px;} #ButtonContainerBubble {font-size: 12px;background-color: #CCC;width:300px;margin:5px;padding:5px;} pre { font-size: 12px; background-color: black; color: green; } </style> <script type="text/javascript" id="iFSMscript"> var StateButton = { IsOn : { enterState: { init_function: function(){this.myUIObject.html("I'm On");}, UI_event_bubble:true, }, click: { UI_event_bubble:true, next_state: 'IsOff' } }, IsOff : { enterState: { init_function: function(){this.myUIObject.html("I'm Off");}, UI_event_bubble:true, }, click: { UI_event_bubble:true, next_state: 'IsOn' } }, DefaultState : { start : { next_state : 'IsOn' } } }; var StateBContainerBubble = { WaitClick : { click: { init_function: function(){this.opts.status.html(this.opts.status.html()+"<br>click on ButtonContainerBubble!");}, process_on_UItarget: false, } }, DefaultState : { start : { next_state : 'WaitClick' } } }; var StateBContainerNoBubble = { WaitClick : { click: { init_function: function(){this.opts.status.html(this.opts.status.html()+"<br>click on ButtonContainerNoBubble!");}, process_on_UItarget: true, } }, DefaultState : { start : { next_state : 'WaitClick' } } }; $(document).ready(function() { $('.button').iFSM(StateButton); $('#ButtonContainerNoBubble').iFSM(StateBContainerNoBubble,{status:$('#status')}); $('#ButtonContainerBubble').iFSM(StateBContainerBubble,{status:$('#status')}); }); </script> </head> <body style="margin:20px;"> <div id="ButtonContainerBubble">This container receives the click from the buttons and on its div container<br>ButtonContainerBubble <div id="ButtonContainerNoBubble">This container does not receive the click from the buttons but does on its div container. As it does not consume the click button event, button event will bubble... <br>ButtonContainerNoBubble<br> <button id="myButton1" class="button">I'm Displayed</button> <button id="myButton2" class="button">I'm Displayed</button> </div> <div id="status"></div> </div> <br><br> <pre> <script>document.write($('#iFSMscript').html())</script> </pre> <p>provided by <a href="http://www.intersel.fr">Intersel</a></p> </body> </html>