jquery-ui/demos/menubar/default.html

<!DOCTYPE html>
<html>
<head>
	<title>jQuery UI Menubar - Default demo</title>
	<link rel="stylesheet" href="../demos.css" type="text/css" />
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css" type="text/css" title="ui-theme" />
	<script src="../../jquery-1.5.1.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.position.js"></script>
	<script src="../../ui/jquery.ui.button.js"></script>
	<script src="../../ui/jquery.ui.menu.js"></script>
	<script src="../../ui/jquery.ui.menubar.js"></script>
	<script>
	$(function() {
		$("#bar1").menubar({
			position: {
				within: $("#demo-frame").add(window).first()
			},
			select: function(event, ui) {
				$("<div/>").text("Selected: " + ui.item.text()).appendTo("#log");
			}
		});
		
		$(".menubar-icons").menubar({
			menuIcon: true,
			buttons: true,
			position: {
				within: $("#demo-frame").add(window).first()
			},
			select: function(event, ui) {
				$("<div/>").text("Selected: " + ui.item.text()).appendTo("#log");
			}
		});
	});
	</script>
	<style type="text/css">
		#bar1, #bar2 { margin: 0 0 4em; } /* style for this page only */
		.ui-menu { width: 200px; position: absolute; outline: none; z-index: 9999; }
		.ui-menu .ui-icon { float: right; }
		.ui-menu li.ui-state-disabled {
			font-weight: bold;
			padding: .0em .4em;
			margin: .4em 0 .2em;
			line-height: 1.5;
		}
		
		/* menubar styles */
		.ui-menubar .ui-button { float: left; font-weight: normal; border-top-width: 0 !important; border-bottom-width: 0 !important; margin: 0; outline: none; }
		.ui-menubar .ui-menubar-link { border-right: 1px dashed transparent; border-left: 1px dashed transparent; }
		
		.ui-menubar {
			list-style: none;
			margin: 0;
			padding-left: 0;	
		}
		
		.ui-menubar-item {
			float: left;  		
		}
		/*
		table {
			border-collapse: collapse;
		}
		th, td {
			padding: 0.5em;
			border: 1px solid black;
		}
		*/
 	</style>
</head>
<body>

<div class="demo">
<ul id="bar1" class="menubar">
	<li>
		<a href="#File">File</a>
		<ul>
			<li><a href="#Open...">Open...</a></li>
			<li class="ui-state-disabled">Open recent...</li>
			<li><a href="#Save">Save</a></li>
			<li><a href="#Save as...">Save as...</a></li>
			<li><a href="#Close">Close</a></li>
			<li><a href="#Quit">Quit</a></li>
		</ul>
	</li>
	<li>
		<a href="#Edit">Edit</a>
		<ul>
			<li><a href="#Copy">Copy</a></li>
			<li><a href="#Cut">Cut</a></li>
			<li class="ui-state-disabled">Paste</li>
		</ul>
	</li>
	<li>
		<a href="#View">View</a>
		<ul>
			<li><a href="#Fullscreen">Fullscreen</a></li>
			<li><a href="#Fit into view">Fit into view</a></li>
			<li>
				<a href="#Encoding">Encoding</a>
				<ul>
					<li><a href="#Auto-detect">Auto-detect</a></li>
					<li><a href="#UTF-8">UTF-8</a></li>
					<li>
					  <a href="#UTF-16">UTF-16</a>
				      <ul>
				         <li><a href="#Option 1">Option 1</a></li>
				         <li><a href="#Option 2">Option 2</a></li>
				         <li><a href="#Option 3">Option 3</a></li>
				         <li><a href="#Option 4">Option 4</a></li>
				      </ul>
				   </li>
				</ul>
			</li>
			<li><a href="#Customize...">Customize...</a></li>
		</ul>
	</li>
</ul>

<ul id="bar2" class="menubar-icons">
	<li>
		<a href="#File">File</a>
		<ul>
			<li><a href="#Open...">Open...</a></li>
			<li class="ui-state-disabled">Open recent...</li>
			<li><a href="#Save">Save</a></li>
			<li><a href="#Save as...">Save as...</a></li>
			<li><a href="#Close">Close</a></li>
			<li><a href="#Quit">Quit</a></li>
		</ul>
	</li>
	<li>
		<a href="#Edit">Edit</a>
		<ul>
			<li><a href="#Copy">Copy</a></li>
			<li><a href="#Cut">Cut</a></li>
			<li class="ui-state-disabled">Paste</li>
		</ul>
	</li>
	<li>
		<a href="#View">View</a>
		<ul>
			<li><a href="#Fullscreen">Fullscreen</a></li>
			<li><a href="#Fit into view">Fit into view</a></li>
			<li>
				<a href="#Encoding">Encoding</a>
				<ul>
					<li><a href="#Auto-detect">Auto-detect</a></li>
					<li><a href="#UTF-8">UTF-8</a></li>
					<li>
					  <a href="#UTF-16">UTF-16</a>
				      <ul>
				         <li><a href="#Option 1">Option 1</a></li>
				         <li><a href="#Option 2">Option 2</a></li>
				         <li><a href="#Option 3">Option 3</a></li>
				         <li><a href="#Option 4">Option 4</a></li>
				      </ul>
				   </li>
				</ul>
			</li>
			<li><a href="#Customize...">Customize...</a></li>
		</ul>
	</li>
</ul>

<div class="ui-widget" style="margin-top:2em; font-family:Arial">
	Log:
	<div id="log" style="height: 100px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
</div>
</div>

<div class="demo-description">

<p>TODO</p>

</div><!-- End demo-description -->


</body>
</html>
Menu: Add ui-state-active to active menu bar button 2011-02-24 21:57:44 +00:00			`<!DOCTYPE html>`
First attempt at a menubar 2010-04-30 12:46:12 +00:00			`<html>`
			`<head>`
Popup and Menubar demos 2011-05-08 18:41:21 +00:00			`<title>jQuery UI Menubar - Default demo</title>`
			`<link rel="stylesheet" href="../demos.css" type="text/css" />`
			`<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css" type="text/css" title="ui-theme" />`
			`<script src="../../jquery-1.5.1.js"></script>`
			`<script src="../../ui/jquery.ui.core.js"></script>`
			`<script src="../../ui/jquery.ui.widget.js"></script>`
			`<script src="../../ui/jquery.ui.position.js"></script>`
			`<script src="../../ui/jquery.ui.button.js"></script>`
			`<script src="../../ui/jquery.ui.menu.js"></script>`
			`<script src="../../ui/jquery.ui.menubar.js"></script>`
			`<script>`
First attempt at a menubar 2010-04-30 12:46:12 +00:00			`$(function() {`
Update menubar to forward menu option to nested menus, update default demo to set within update to the demo frame (for /demos) or window (standalone). Update visual test to have more useful defaults 2011-06-09 15:14:21 +00:00			`$("#bar1").menubar({`
			`position: {`
			`within: $("#demo-frame").add(window).first()`
			`},`
Menu: Overhauled menubar, again starting with Michael Lang's fork. Added working keyboard navigation, including nested menus. Still need to properly style the menu buttons, e.g. highlight the button of the currently open menu. 2011-02-22 14:14:12 +00:00			`select: function(event, ui) {`
			`$("<div/>").text("Selected: " + ui.item.text()).appendTo("#log");`
			`}`
			`});`
Added a second example to show a menubar with buttons and icons and one without (default) 2011-02-24 21:00:01 +00:00
			`$(".menubar-icons").menubar({`
			`menuIcon: true,`
			`buttons: true,`
Update menubar to forward menu option to nested menus, update default demo to set within update to the demo frame (for /demos) or window (standalone). Update visual test to have more useful defaults 2011-06-09 15:14:21 +00:00			`position: {`
			`within: $("#demo-frame").add(window).first()`
			`},`
Added a second example to show a menubar with buttons and icons and one without (default) 2011-02-24 21:00:01 +00:00			`select: function(event, ui) {`
			`$("<div/>").text("Selected: " + ui.item.text()).appendTo("#log");`
			`}`
			`});`
First attempt at a menubar 2010-04-30 12:46:12 +00:00			`});`
			`</script>`
Added a second example to show a menubar with buttons and icons and one without (default) 2011-02-24 21:00:01 +00:00			`<style type="text/css">`
Menu: Add menubar-with-one-button-in-table example. 2011-03-11 17:13:10 +00:00			`#bar1, #bar2 { margin: 0 0 4em; } /* style for this page only */`
Added a second example to show a menubar with buttons and icons and one without (default) 2011-02-24 21:00:01 +00:00			`.ui-menu { width: 200px; position: absolute; outline: none; z-index: 9999; }`
Menu: Overhauled menubar, again starting with Michael Lang's fork. Added working keyboard navigation, including nested menus. Still need to properly style the menu buttons, e.g. highlight the button of the currently open menu. 2011-02-22 14:14:12 +00:00			`.ui-menu .ui-icon { float: right; }`
			`.ui-menu li.ui-state-disabled {`
			`font-weight: bold;`
			`padding: .0em .4em;`
			`margin: .4em 0 .2em;`
			`line-height: 1.5;`
			`}`
Added menubar styles 2011-02-24 16:05:24 +00:00
			`/* menubar styles */`
Menu: Fix menubar tab and focus handling 2011-03-17 10:50:21 +00:00			`.ui-menubar .ui-button { float: left; font-weight: normal; border-top-width: 0 !important; border-bottom-width: 0 !important; margin: 0; outline: none; }`
Added a second example to show a menubar with buttons and icons and one without (default) 2011-02-24 21:00:01 +00:00			`.ui-menubar .ui-menubar-link { border-right: 1px dashed transparent; border-left: 1px dashed transparent; }`

Fix menubar escape key + minor css fix 2011-04-20 18:15:26 +00:00			`.ui-menubar {`
Updated menubar test to use UL elements rather than DIVs 2011-04-15 17:19:27 +00:00			`list-style: none;`
Fix menubar escape key + minor css fix 2011-04-20 18:15:26 +00:00			`margin: 0;`
Updated menubar test to use UL elements rather than DIVs 2011-04-15 17:19:27 +00:00			`padding-left: 0;`
			`}`

Fix "menubar does not collapse when clicking on other menubar" + minor changes 2011-04-18 21:05:50 +00:00			`.ui-menubar-item {`
Updated menubar test to use UL elements rather than DIVs 2011-04-15 17:19:27 +00:00			`float: left;`
			`}`
Popup and Menubar demos 2011-05-08 18:41:21 +00:00			`/*`
Menu: Add menubar-with-one-button-in-table example. 2011-03-11 17:13:10 +00:00			`table {`
			`border-collapse: collapse;`
			`}`
			`th, td {`
			`padding: 0.5em;`
			`border: 1px solid black;`
			`}`
Popup and Menubar demos 2011-05-08 18:41:21 +00:00			`*/`
Menu: Add menubar-with-one-button-in-table example. 2011-03-11 17:13:10 +00:00			`</style>`
First attempt at a menubar 2010-04-30 12:46:12 +00:00			`</head>`
			`<body>`

Popup and Menubar demos 2011-05-08 18:41:21 +00:00			`<div class="demo">`
Updated menubar test to use UL elements rather than DIVs 2011-04-15 17:19:27 +00:00			`<ul id="bar1" class="menubar">`
			`<li>`
Menu: Remove default preventDefault. Add more meaningful href's on menu and menubar demos. Change doesn't seem to affect autocomplete as that doesn't use href-attributes anyway. 2011-05-11 11:39:58 +00:00			`<a href="#File">File</a>`
Updated menubar test to use UL elements rather than DIVs 2011-04-15 17:19:27 +00:00			`<ul>`
Menu: Remove default preventDefault. Add more meaningful href's on menu and menubar demos. Change doesn't seem to affect autocomplete as that doesn't use href-attributes anyway. 2011-05-11 11:39:58 +00:00			`<li><a href="#Open...">Open...</a></li>`
Updated menubar test to use UL elements rather than DIVs 2011-04-15 17:19:27 +00:00			`<li class="ui-state-disabled">Open recent...</li>`
Menu: Remove default preventDefault. Add more meaningful href's on menu and menubar demos. Change doesn't seem to affect autocomplete as that doesn't use href-attributes anyway. 2011-05-11 11:39:58 +00:00			`<li><a href="#Save">Save</a></li>`
			`<li><a href="#Save as...">Save as...</a></li>`
			`<li><a href="#Close">Close</a></li>`
			`<li><a href="#Quit">Quit</a></li>`
Updated menubar test to use UL elements rather than DIVs 2011-04-15 17:19:27 +00:00			`</ul>`
			`</li>`
			`<li>`
Menu: Remove default preventDefault. Add more meaningful href's on menu and menubar demos. Change doesn't seem to affect autocomplete as that doesn't use href-attributes anyway. 2011-05-11 11:39:58 +00:00			`<a href="#Edit">Edit</a>`
Updated menubar test to use UL elements rather than DIVs 2011-04-15 17:19:27 +00:00			`<ul>`
Menu: Remove default preventDefault. Add more meaningful href's on menu and menubar demos. Change doesn't seem to affect autocomplete as that doesn't use href-attributes anyway. 2011-05-11 11:39:58 +00:00			`<li><a href="#Copy">Copy</a></li>`
			`<li><a href="#Cut">Cut</a></li>`
Updated menubar test to use UL elements rather than DIVs 2011-04-15 17:19:27 +00:00			`<li class="ui-state-disabled">Paste</li>`
			`</ul>`
			`</li>`
			`<li>`
Menu: Remove default preventDefault. Add more meaningful href's on menu and menubar demos. Change doesn't seem to affect autocomplete as that doesn't use href-attributes anyway. 2011-05-11 11:39:58 +00:00			`<a href="#View">View</a>`
Updated menubar test to use UL elements rather than DIVs 2011-04-15 17:19:27 +00:00			`<ul>`
Menu: Remove default preventDefault. Add more meaningful href's on menu and menubar demos. Change doesn't seem to affect autocomplete as that doesn't use href-attributes anyway. 2011-05-11 11:39:58 +00:00			`<li><a href="#Fullscreen">Fullscreen</a></li>`
			`<li><a href="#Fit into view">Fit into view</a></li>`
Updated menubar test to use UL elements rather than DIVs 2011-04-15 17:19:27 +00:00			`<li>`
Menu: Remove default preventDefault. Add more meaningful href's on menu and menubar demos. Change doesn't seem to affect autocomplete as that doesn't use href-attributes anyway. 2011-05-11 11:39:58 +00:00			`<a href="#Encoding">Encoding</a>`
Updated menubar test to use UL elements rather than DIVs 2011-04-15 17:19:27 +00:00			`<ul>`
Menu: Remove default preventDefault. Add more meaningful href's on menu and menubar demos. Change doesn't seem to affect autocomplete as that doesn't use href-attributes anyway. 2011-05-11 11:39:58 +00:00			`<li><a href="#Auto-detect">Auto-detect</a></li>`
			`<li><a href="#UTF-8">UTF-8</a></li>`
Updated menubar test to use UL elements rather than DIVs 2011-04-15 17:19:27 +00:00			`<li>`
Menu: Remove default preventDefault. Add more meaningful href's on menu and menubar demos. Change doesn't seem to affect autocomplete as that doesn't use href-attributes anyway. 2011-05-11 11:39:58 +00:00			`<a href="#UTF-16">UTF-16</a>`
Updated menubar test to use UL elements rather than DIVs 2011-04-15 17:19:27 +00:00			`<ul>`
Menu: Remove default preventDefault. Add more meaningful href's on menu and menubar demos. Change doesn't seem to affect autocomplete as that doesn't use href-attributes anyway. 2011-05-11 11:39:58 +00:00			`<li><a href="#Option 1">Option 1</a></li>`
			`<li><a href="#Option 2">Option 2</a></li>`
			`<li><a href="#Option 3">Option 3</a></li>`
			`<li><a href="#Option 4">Option 4</a></li>`
Updated menubar test to use UL elements rather than DIVs 2011-04-15 17:19:27 +00:00			`</ul>`
			`</li>`
			`</ul>`
			`</li>`
Menu: Remove default preventDefault. Add more meaningful href's on menu and menubar demos. Change doesn't seem to affect autocomplete as that doesn't use href-attributes anyway. 2011-05-11 11:39:58 +00:00			`<li><a href="#Customize...">Customize...</a></li>`
Updated menubar test to use UL elements rather than DIVs 2011-04-15 17:19:27 +00:00			`</ul>`
			`</li>`
			`</ul>`
Added a second example to show a menubar with buttons and icons and one without (default) 2011-02-24 21:00:01 +00:00
Updated menubar test to use UL elements rather than DIVs 2011-04-15 17:19:27 +00:00			`<ul id="bar2" class="menubar-icons">`
			`<li>`
Menu: Remove default preventDefault. Add more meaningful href's on menu and menubar demos. Change doesn't seem to affect autocomplete as that doesn't use href-attributes anyway. 2011-05-11 11:39:58 +00:00			`<a href="#File">File</a>`
Updated menubar test to use UL elements rather than DIVs 2011-04-15 17:19:27 +00:00			`<ul>`
Menu: Remove default preventDefault. Add more meaningful href's on menu and menubar demos. Change doesn't seem to affect autocomplete as that doesn't use href-attributes anyway. 2011-05-11 11:39:58 +00:00			`<li><a href="#Open...">Open...</a></li>`
Updated menubar test to use UL elements rather than DIVs 2011-04-15 17:19:27 +00:00			`<li class="ui-state-disabled">Open recent...</li>`
Menu: Remove default preventDefault. Add more meaningful href's on menu and menubar demos. Change doesn't seem to affect autocomplete as that doesn't use href-attributes anyway. 2011-05-11 11:39:58 +00:00			`<li><a href="#Save">Save</a></li>`
			`<li><a href="#Save as...">Save as...</a></li>`
			`<li><a href="#Close">Close</a></li>`
			`<li><a href="#Quit">Quit</a></li>`
Updated menubar test to use UL elements rather than DIVs 2011-04-15 17:19:27 +00:00			`</ul>`
			`</li>`
			`<li>`
Menu: Remove default preventDefault. Add more meaningful href's on menu and menubar demos. Change doesn't seem to affect autocomplete as that doesn't use href-attributes anyway. 2011-05-11 11:39:58 +00:00			`<a href="#Edit">Edit</a>`
Updated menubar test to use UL elements rather than DIVs 2011-04-15 17:19:27 +00:00			`<ul>`
Menu: Remove default preventDefault. Add more meaningful href's on menu and menubar demos. Change doesn't seem to affect autocomplete as that doesn't use href-attributes anyway. 2011-05-11 11:39:58 +00:00			`<li><a href="#Copy">Copy</a></li>`
			`<li><a href="#Cut">Cut</a></li>`
Updated menubar test to use UL elements rather than DIVs 2011-04-15 17:19:27 +00:00			`<li class="ui-state-disabled">Paste</li>`
			`</ul>`
			`</li>`
			`<li>`
Menu: Remove default preventDefault. Add more meaningful href's on menu and menubar demos. Change doesn't seem to affect autocomplete as that doesn't use href-attributes anyway. 2011-05-11 11:39:58 +00:00			`<a href="#View">View</a>`
Updated menubar test to use UL elements rather than DIVs 2011-04-15 17:19:27 +00:00			`<ul>`
Menu: Remove default preventDefault. Add more meaningful href's on menu and menubar demos. Change doesn't seem to affect autocomplete as that doesn't use href-attributes anyway. 2011-05-11 11:39:58 +00:00			`<li><a href="#Fullscreen">Fullscreen</a></li>`
			`<li><a href="#Fit into view">Fit into view</a></li>`
Updated menubar test to use UL elements rather than DIVs 2011-04-15 17:19:27 +00:00			`<li>`
Menu: Remove default preventDefault. Add more meaningful href's on menu and menubar demos. Change doesn't seem to affect autocomplete as that doesn't use href-attributes anyway. 2011-05-11 11:39:58 +00:00			`<a href="#Encoding">Encoding</a>`
Updated menubar test to use UL elements rather than DIVs 2011-04-15 17:19:27 +00:00			`<ul>`
Menu: Remove default preventDefault. Add more meaningful href's on menu and menubar demos. Change doesn't seem to affect autocomplete as that doesn't use href-attributes anyway. 2011-05-11 11:39:58 +00:00			`<li><a href="#Auto-detect">Auto-detect</a></li>`
			`<li><a href="#UTF-8">UTF-8</a></li>`
Updated menubar test to use UL elements rather than DIVs 2011-04-15 17:19:27 +00:00			`<li>`
Menu: Remove default preventDefault. Add more meaningful href's on menu and menubar demos. Change doesn't seem to affect autocomplete as that doesn't use href-attributes anyway. 2011-05-11 11:39:58 +00:00			`<a href="#UTF-16">UTF-16</a>`
Updated menubar test to use UL elements rather than DIVs 2011-04-15 17:19:27 +00:00			`<ul>`
Menu: Remove default preventDefault. Add more meaningful href's on menu and menubar demos. Change doesn't seem to affect autocomplete as that doesn't use href-attributes anyway. 2011-05-11 11:39:58 +00:00			`<li><a href="#Option 1">Option 1</a></li>`
			`<li><a href="#Option 2">Option 2</a></li>`
			`<li><a href="#Option 3">Option 3</a></li>`
			`<li><a href="#Option 4">Option 4</a></li>`
Updated menubar test to use UL elements rather than DIVs 2011-04-15 17:19:27 +00:00			`</ul>`
			`</li>`
			`</ul>`
			`</li>`
Menu: Remove default preventDefault. Add more meaningful href's on menu and menubar demos. Change doesn't seem to affect autocomplete as that doesn't use href-attributes anyway. 2011-05-11 11:39:58 +00:00			`<li><a href="#Customize...">Customize...</a></li>`
Updated menubar test to use UL elements rather than DIVs 2011-04-15 17:19:27 +00:00			`</ul>`
			`</li>`
			`</ul>`
First attempt at a menubar 2010-04-30 12:46:12 +00:00
			`<div class="ui-widget" style="margin-top:2em; font-family:Arial">`
			`Log:`
Popup and Menubar demos 2011-05-08 18:41:21 +00:00			`<div id="log" style="height: 100px; width: 300px; overflow: auto;" class="ui-widget-content"></div>`
First attempt at a menubar 2010-04-30 12:46:12 +00:00			`</div>`
Popup and Menubar demos 2011-05-08 18:41:21 +00:00			`</div>`

			`<div class="demo-description">`

			`<p>TODO</p>`

			`</div><!-- End demo-description -->`

First attempt at a menubar 2010-04-30 12:46:12 +00:00
			`</body>`
			`</html>`