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

Added a second example to show a menubar with buttons and icons and one without (default)

Browse Source
This commit is contained in:
maggiewachs 2011-02-24 16:00:01 -05:00
parent f73466a320
commit 75afd3319b
1 changed files with 57 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
tests/visual/menu/menubar.html
View File

@ -27,11 +27,22 @@
$("<div/>").text("Selected: " + ui.item.text()).appendTo("#log"); $("<div/>").text("Selected: " + ui.item.text()).appendTo("#log");
} }
}); });
$(".menubar-icons").menubar({
menuIcon: true,
buttons: true,
select: function(event, ui) {
$("<div/>").text("Selected: " + ui.item.text()).appendTo("#log");
}
});
}); });
</script> </script>
<style> <style type="text/css">
body { font-size:62.5%; } body { font-size:62.5%; }
.ui-menu { width: 200px; position: absolute; outline: none; } .menubar { 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 .ui-icon { float: right; }
.ui-menu li.ui-state-disabled { .ui-menu li.ui-state-disabled {
font-weight: bold; font-weight: bold;
@ -41,16 +52,56 @@
} }
/* menubar styles */ /* menubar styles */
.ui-menubar .ui-button { float: left; margin: 0; border-width: 0 !important; border-right-width: 1px !important; } .ui-menubar .ui-button { float: left; font-weight: normal; border-top-width: 0 !important; border-bottom-width: 0 !important; margin: 0; }
.ui-menubar .ui-button.ui-corner-all { -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; } .ui-menubar .ui-button.ui-corner-all { -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; }
.ui-menubar .ui-menubar-link { border-right: 1px dashed transparent; border-left: 1px dashed transparent; }
</style> </style>
</head> </head>
<body> <body>
<div class="menubar"> <div class="menubar">
<!-- <a href="#">File</a>
<a href="#">About...</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">
<a href="#">File</a> <a href="#">File</a>
<ul> <ul>
<li><a href="#">Open...</a></li> <li><a href="#">Open...</a></li>