library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2024-11-21 11:04:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity
e448cd0761
jquery-ui/tests/visual/menu/menubar.html

233 lines
6.3 KiB
HTML
Raw Normal View History

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>
<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" />
Switched to latest stable jQuery 1.5.1
2011-03-03 01:44:26 +00:00
<script type="text/javascript" src="../../../jquery-1.5.1.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: Add menubar-with-one-button-in-table example.
2011-03-11 17:13:10 +00:00
$("td:has(.menubar)").clone().appendTo("tbody tr:not(:first)");
$("#bar1, .menubar").menubar({
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,
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%; }
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; }
Updated menubar test to use UL elements rather than DIVs
2011-04-15 17:19:27 +00:00
ol.ui-menubar, ul.ui-menubar {
list-style: none;
margin-left: 0;
padding-left: 0;
}
li.ui-menubar-item {
float: left;
}
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;
}
</style>
First attempt at a menubar
2010-04-30 12:46:12 +00:00
</head>
<body>
Updated menubar test to use UL elements rather than DIVs
2011-04-15 17:19:27 +00:00
<ul id="bar1" class="menubar">
<li>
<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>
</li>
<li>
<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>
</li>
<li>
<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>
</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>
<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>
</li>
<li>
<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>
</li>
<li>
<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>
</li>
</ul>
First attempt at a menubar
2010-04-30 12:46:12 +00:00
Menu: Add menubar-with-one-button-in-table example.
2011-03-11 17:13:10 +00:00
<table id="movies" class="ui-widget">
<thead>
<tr>
<th data-field="Name" class="ui-widget-header">Name</th>
<th data-field="ReleaseYear" class="ui-widget-header">Release Year</th>
<th data-field="AverageRating" class="ui-widget-header">Average Rating</th>
<th class="ui-widget-header"></th>
</tr>
</thead>
<tbody>
<tr>
<td class="ui-widget-content">Red Hot Chili Peppers: Funky Monks</td>
<td class="ui-widget-content">1993</td>
<td class="ui-widget-content">3.6</td>
<td class="ui-widget-content">
Updated menubar test to use UL elements rather than DIVs
2011-04-15 17:19:27 +00:00
<ul class="menubar">
<li>
<a href="#">Options</a>
<ul>
<li><a href="#">Order...</a></li>
<li class="ui-state-disabled">Write a Review...</li>
<li><a href="#">Find Similar Movies...</a></li>
<li>
<a href="#">Rate</a>
<ul>
<li><a href="#">5 stars</a></li>
<li><a href="#">4 stars</a></li>
<li><a href="#">3 stars</a></li>
<li><a href="#">2 stars</a></li>
<li><a href="#">1 stars</a></li>
</ul>
</li>
</ul>
</li>
</ul>
Menu: Add menubar-with-one-button-in-table example.
2011-03-11 17:13:10 +00:00
</td>
</tr>
<tr>
<td class="ui-widget-content">Rod Stewart: Storyteller 1984-1991</td>
<td class="ui-widget-content">1991</td>
<td class="ui-widget-content">3.1</td>
</tr>
<tr>
<td class="ui-widget-content">Stevie Ray Vaughan and Double Trouble: Live at the El Mocambo 1983</td>
<td class="ui-widget-content">1991</td>
<td class="ui-widget-content">3.9</td>
</tr>
<tr>
<td class="ui-widget-content">Spike and Mike's Sick &amp; Twisted Festival of Animation</td>
<td class="ui-widget-content">1997</td>
<td class="ui-widget-content">2.6</td>
</tr>
</tbody>
</table>
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:
<div id="log" style="height: 400px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
</div>
</body>
</html>
Reference in New Issue Copy Permalink