library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2024-10-05 01:44:18 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity
bed6def5c0
jquery-ui/tests/visual/menu/menubar.html

151 lines
4.3 KiB
HTML
Raw Normal View History

First attempt at a menubar
2010-04-30 12:46:12 +00:00
<!doctype html>
<html>
<head>
<title>Menu Visual Test: Default</title>
<link rel="stylesheet" href="../visual.css" type="text/css" />
<link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css" title="ui-theme" />
Fixed bad references to jQuery-1.4.4.js
2010-12-22 17:59:29 +00:00
<script type="text/javascript" src="../../../jquery-1.4.4.js"></script>
First attempt at a menubar
2010-04-30 12:46:12 +00:00
<script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script>
<script type="text/javascript" src="../../../ui/jquery.ui.button.js"></script>
<script type="text/javascript" src="../../../ui/jquery.ui.menu.js"></script>
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
<script type="text/javascript" src="menubar.js"></script>
<!--
First attempt at a menubar
2010-04-30 12:46:12 +00:00
<script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
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
-->
First attempt at a menubar
2010-04-30 12:46:12 +00:00
<script type="text/javascript">
$(function() {
$.fn.themeswitcher && $('<div/>').css({
position: "absolute",
right: 10,
top: 10
}).appendTo(document.body).themeswitcher();
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
$(".menubar").menubar({
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,
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">
First attempt at a menubar
2010-04-30 12:46:12 +00:00
body { font-size:62.5%; }
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 { margin: 0 0 4em; } /* style for this page only */
.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 */
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-button { float: left; font-weight: normal; border-top-width: 0 !important; border-bottom-width: 0 !important; margin: 0; }
Added menubar styles
2011-02-24 16:05:24 +00:00
.ui-menubar .ui-button.ui-corner-all { -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; }
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; }
First attempt at a menubar
2010-04-30 12:46:12 +00:00
</style>
</head>
<body>
Added menubar styles and removed ui-widget-header class from markup
2011-02-24 16:06:47 +00:00
<div class="menubar">
Added a second example to show a menubar with buttons and icons and one without (default)
2011-02-24 21:00:01 +00:00
<a href="#">File</a>
<ul>
<li><a href="#">Open...</a></li>
<li class="ui-state-disabled">Open recent...</li>
<li><a href="#">Save</a></li>
<li><a href="#">Save as...</a></li>
<li><a href="#">Close</a></li>
<li><a href="#">Quit</a></li>
</ul>
<a href="#">Edit</a>
<ul>
<li><a href="#">Copy</a></li>
<li><a href="#">Cut</a></li>
<li class="ui-state-disabled">Paste</li>
</ul>
<a href="#">View</a>
<ul>
<li><a href="#">Fullscreen</a></li>
<li><a href="#">Fit into view</a></li>
<li>
<a href="#">Encoding</a>
<ul>
<li><a href="#">Auto-detect</a></li>
<li><a href="#">UTF-8</a></li>
<li>
<a href="#">UTF-16</a>
<ul>
<li><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
<li><a href="#">Option 3</a></li>
<li><a href="#">Option 4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Customize...</a></li>
</ul>
</div>
<div class="menubar-icons">
First attempt at a menubar
2010-04-30 12:46:12 +00:00
<a href="#">File</a>
<ul>
<li><a href="#">Open...</a></li>
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
<li class="ui-state-disabled">Open recent...</li>
First attempt at a menubar
2010-04-30 12:46:12 +00:00
<li><a href="#">Save</a></li>
<li><a href="#">Save as...</a></li>
<li><a href="#">Close</a></li>
<li><a href="#">Quit</a></li>
</ul>
<a href="#">Edit</a>
<ul>
<li><a href="#">Copy</a></li>
<li><a href="#">Cut</a></li>
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
<li class="ui-state-disabled">Paste</li>
First attempt at a menubar
2010-04-30 12:46:12 +00:00
</ul>
<a href="#">View</a>
<ul>
<li><a href="#">Fullscreen</a></li>
<li><a href="#">Fit into view</a></li>
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
<li>
<a href="#">Encoding</a>
<ul>
<li><a href="#">Auto-detect</a></li>
<li><a href="#">UTF-8</a></li>
Added another nested list for testing
2011-02-24 16:35:34 +00:00
<li>
<a href="#">UTF-16</a>
<ul>
<li><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
<li><a href="#">Option 3</a></li>
<li><a href="#">Option 4</a></li>
</ul>
</li>
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
</ul>
</li>
First attempt at a menubar
2010-04-30 12:46:12 +00:00
<li><a href="#">Customize...</a></li>
</ul>
</div>
<div class="ui-widget" style="margin-top:2em; font-family:Arial">
Log:
<div id="log" style="height: 400px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
</div>
</body>
</html>
Reference in New Issue Copy Permalink