|
27 | 27 | $("<div/>").text("Selected: " + ui.item.text()).appendTo("#log"); |
28 | 28 | } |
29 | 29 | }); |
| 30 | + |
| 31 | + $(".menubar-icons").menubar({ |
| 32 | + menuIcon: true, |
| 33 | + buttons: true, |
| 34 | + select: function(event, ui) { |
| 35 | + $("<div/>").text("Selected: " + ui.item.text()).appendTo("#log"); |
| 36 | + } |
| 37 | + }); |
| 38 | + |
| 39 | + |
30 | 40 | }); |
31 | 41 | </script> |
32 | | - <style> |
| 42 | + <style type="text/css"> |
33 | 43 | body { font-size:62.5%; } |
34 | | - .ui-menu { width: 200px; position: absolute; outline: none; } |
| 44 | + .menubar { margin: 0 0 4em; } /* style for this page only */ |
| 45 | + .ui-menu { width: 200px; position: absolute; outline: none; z-index: 9999; } |
35 | 46 | .ui-menu .ui-icon { float: right; } |
36 | 47 | .ui-menu li.ui-state-disabled { |
37 | 48 | font-weight: bold; |
|
41 | 52 | } |
42 | 53 |
|
43 | 54 | /* menubar styles */ |
44 | | - .ui-menubar .ui-button { float: left; margin: 0; border-width: 0 !important; border-right-width: 1px !important; } |
| 55 | + .ui-menubar .ui-button { float: left; font-weight: normal; border-top-width: 0 !important; border-bottom-width: 0 !important; margin: 0; } |
45 | 56 | .ui-menubar .ui-button.ui-corner-all { -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; } |
| 57 | + .ui-menubar .ui-menubar-link { border-right: 1px dashed transparent; border-left: 1px dashed transparent; } |
| 58 | + |
| 59 | + |
46 | 60 | </style> |
47 | 61 | </head> |
48 | 62 | <body> |
49 | 63 |
|
50 | 64 | <div class="menubar"> |
51 | | - <!-- |
52 | | - <a href="#">About...</a> |
53 | | - --> |
| 65 | + <a href="#">File</a> |
| 66 | + <ul> |
| 67 | + <li><a href="#">Open...</a></li> |
| 68 | + <li class="ui-state-disabled">Open recent...</li> |
| 69 | + <li><a href="#">Save</a></li> |
| 70 | + <li><a href="#">Save as...</a></li> |
| 71 | + <li><a href="#">Close</a></li> |
| 72 | + <li><a href="#">Quit</a></li> |
| 73 | + </ul> |
| 74 | + <a href="#">Edit</a> |
| 75 | + <ul> |
| 76 | + <li><a href="#">Copy</a></li> |
| 77 | + <li><a href="#">Cut</a></li> |
| 78 | + <li class="ui-state-disabled">Paste</li> |
| 79 | + </ul> |
| 80 | + <a href="#">View</a> |
| 81 | + <ul> |
| 82 | + <li><a href="#">Fullscreen</a></li> |
| 83 | + <li><a href="#">Fit into view</a></li> |
| 84 | + <li> |
| 85 | + <a href="#">Encoding</a> |
| 86 | + <ul> |
| 87 | + <li><a href="#">Auto-detect</a></li> |
| 88 | + <li><a href="#">UTF-8</a></li> |
| 89 | + <li> |
| 90 | + <a href="#">UTF-16</a> |
| 91 | + <ul> |
| 92 | + <li><a href="#">Option 1</a></li> |
| 93 | + <li><a href="#">Option 2</a></li> |
| 94 | + <li><a href="#">Option 3</a></li> |
| 95 | + <li><a href="#">Option 4</a></li> |
| 96 | + </ul> |
| 97 | + </li> |
| 98 | + </ul> |
| 99 | + </li> |
| 100 | + <li><a href="#">Customize...</a></li> |
| 101 | + </ul> |
| 102 | +</div> |
| 103 | + |
| 104 | +<div class="menubar-icons"> |
54 | 105 | <a href="#">File</a> |
55 | 106 | <ul> |
56 | 107 | <li><a href="#">Open...</a></li> |
|
0 commit comments