diff options
| -rw-r--r-- | tests/visual/menu/menubar.html | 63 | ||||
| -rw-r--r-- | tests/visual/menu/menubar.js | 39 |
2 files changed, 83 insertions, 19 deletions
diff --git a/tests/visual/menu/menubar.html b/tests/visual/menu/menubar.html index bd7ea44ef..d10b83aef 100644 --- a/tests/visual/menu/menubar.html +++ b/tests/visual/menu/menubar.html @@ -27,11 +27,22 @@ $("<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> - <style> + <style type="text/css"> 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 li.ui-state-disabled { font-weight: bold; @@ -41,16 +52,56 @@ } /* 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-menubar-link { border-right: 1px dashed transparent; border-left: 1px dashed transparent; } + + </style> </head> <body> <div class="menubar"> - <!-- - <a href="#">About...</a> - --> + <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"> <a href="#">File</a> <ul> <li><a href="#">Open...</a></li> diff --git a/tests/visual/menu/menubar.js b/tests/visual/menu/menubar.js index 9bb3f38e9..f384668d4 100644 --- a/tests/visual/menu/menubar.js +++ b/tests/visual/menu/menubar.js @@ -7,10 +7,15 @@ // TODO take non-menubar buttons into account $.widget("ui.menubar", { + options: { + buttons: false, + menuIcon: false + }, _create: function() { var self = this; var items = this.element.children("button, a"); - + var o = this.options; + this.element.addClass('ui-menubar ui-widget-header ui-helper-clearfix'); items.next("ul").each(function(i, elm) { @@ -42,18 +47,26 @@ $.widget("ui.menubar", { }); items.each(function() { var input = $(this), - menu = input.next("ul"); - input.bind("click focus mouseenter", function(event) { - if (menu.length && (!/^mouse/.test(event.type) || self.active && self.active.is(":visible") )) { - self._open(event, menu); - } - event.preventDefault(); - event.stopPropagation(); - }).button({ - icons: { - secondary: menu.length ? 'ui-icon-triangle-1-s' : '' - } - }); + menu = input.next("ul"); + + input + .bind("click focus mouseenter", function(event) { + if (menu.length && (!/^mouse/.test(event.type) || self.active && self.active.is(":visible") )) { + self._open(event, menu); + } + event.preventDefault(); + event.stopPropagation(); + }) + .button({ + icons: { + secondary: o.menuIcon ? (menu.length ? 'ui-icon-triangle-1-s' : '') : '' + } + }); + + if (!o.buttons) { + input.addClass('ui-menubar-link').removeClass('ui-state-default'); + }; + }); $(document).click(function(event) { !$(event.target).closest(".ui-menubar").length && items.next("ul").hide(); |