File: extlib/iFSM/Examples/Example_DropdownMenu.html

Recommend this page to a friend!
  Classes of Emmanuel Podvin  >  iFSM Animation  >  extlib/iFSM/Examples/Example_DropdownMenu.html  >  Download  
File: extlib/iFSM/Examples/Example_DropdownMenu.html
Role: Example script
Content type: text/plain
Description: Example script
Class: iFSM Animation
Animate elements with parameters from attributes
Author: By
Last change: Update of extlib/iFSM/Examples/Example_DropdownMenu.html
Date: 1 month ago
Size: 4,962 bytes
 

Contents

Class file image Download
<!DOCTYPE html>
<html>
<head>
<title>iFSM in action! Checkbox example</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 10px;
}

pre {
	font-size: 12px;
	background-color: black;
	color: green;
}
/* DEFAULT state for MENU. */
div.menu {
	height: 30px;
	position: relative;
	width: 200px;
}

div.menu>a.header {
	background-color: #F0F0F0;
	border: 1px solid #999999;
	border-radius: 5px 5px 5px 5px;
	color: #333333;
	display: block;
	height: 30px;
	line-height: 30px;
	padding: 0px 10px 0px 10px;
	width: 180px;
}

div.menu>ol.items {
	border: 1px solid #999999;
	border-width: 0px 1px 1px 1px;
	border-radius: 0px 0px 5px 5px;
	display: none;
	left: 0px;
	list-style-type: none;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	position: absolute;
	top: 30px;
	width: 200px;
}

div.menu li.item {
	border-top: 1px solid #999999;
	cursor: pointer;
	height: 30px;
	line-height: 30px;
	margin: 0px 0px 0px 0px;
	padding: 0px 10px 0px 10px;
}

/* HOVER state for MENU. */
div.menuInHover {
	
}

div.menuInHover>a.header {
	background-color: #EAEAEA;
	border-color: #333333;
}

/* ACTIVE state for MENU. */
div.menuInActive {
	
}

div.menuInActive>a.header {
	border-bottom-width: 0px;
	border-radius: 5px 5px 0px 0px;
}

div.menuInActive>ol.items {
	display: block;
	background-color: #FEFEFE;
}

div.menuInActive li.item:hover {
	background-color: #F0F0F0;
}
</style>

<script type="text/javascript" id="iFSMscript">
	var DropdownMachine = {
		subMenuHidden : {
			enterState:{
				init_function:function(){
					this.opts.menu
						.removeClass('menuInHover')
						.removeClass('menuInActive');
				},
			},
			mouseenter:{
				next_state:'subMenuHiddenHover',
			},
		},
		subMenuHiddenHover:{
			enterState:{
				init_function:function(){
					this.opts.menu
						.removeClass('menuInActive')
						.addClass('menuInHover');
					},
			},
			mouseleave:{
				next_state:'subMenuHidden',
			},
			click:{
				next_state:'subMenuHoverDisplayed',
			},
		},
		subMenuDisplayed:{
			enterState:{
				init_function:function(){
					this.opts.menu
						.addClass('menuInActive')
						.removeClass('menuInHover');
					},
			},
			clickDoc:{
				next_state:'subMenuHidden',
			},
			mouseenter:{
				next_state:'subMenuHoverDisplayed',
			},
		},
		subMenuHoverDisplayed:{
			enterState:{
				init_function:function(){
					this.opts.menu
						.addClass('menuInActive')
						.addClass('menuInHover');
					},
			},
			mouseleave:{
				next_state:'subMenuDisplayed',
			},
			click:{
				next_state:'subMenuHiddenHover',
			},
		},
		DefaultState : {
			start : {
				next_state : 'subMenuHidden'
			},
		}
	};

	docMachine= {
		DefaultState : {
			click:{
				init_function:function(){
					this.opts.dropDown.trigger('clickDoc');
				},
				UI_event_bubble:true,
			},
		},
	};
	
	submenuMachine= {
			DefaultState : {
				click:{
					init_function:function(){
						this.opts.dropDown.trigger('clickMenu');
						this.opts.status.html(this.opts.status.html()
											+'<br>'
											+this.myUIObject.html()
											+' clicked'
										);
					},
				},
			},
		};
	$(document).ready(function() {
		$('#dropDown').iFSM(DropdownMachine, {debug:true,menu : $('#menu')});
		$(document).iFSM(docMachine,{debug:true,dropDown:$('#dropDown')});
		$('.item').iFSM(submenuMachine,{debug:true,dropDown:$('#dropDown'),status:$('#status')});
	});
</script>
</head>
<body style="margin: 10px;">
	<h1>Dropdown menus Example with iFSM...</h1>
	<p>This example is the implementation of <a href="http://www.bennadel.com/blog/2242-treating-user-interface-ui-widgets-like-finite-state-machines.htm">the example shown in this explanation</a> using a finite state machine to manage ""not so simple" graphic user interface...</p>
	
	
	<!-- BEGIN: Menu Widget. -->
	<div class="menu" id="menu">

		<a href="#" class="header" id="dropDown"> My Awesome Friends </a>

		<ol class="items" id="submenus">
			<li class="item" id="submenu1">Anna Banana</li>
			<li class="item" id="submenu2">Joanna</li>
			<li class="item" id="submenu3">Tricia</li>
		</ol>

	</div>
	<div id="status" ></div>
	<br>
	<br> Propulsed by
	<a href="http://www.intersel.fr">Intersel</a>, iFSM is available on
	<a href="https://github.com/intersel/iFSM">Github
		(https://github.com/intersel/iFSM)</a>
	<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>
</body>
</html>