Menubar and Menu: Cleanup menu styles. Pull out menubar styles from demo into css file.

This commit is contained in:
Jörn Zaefferer 2011-06-10 19:07:54 +02:00
parent 85eeaf0b05
commit 75408eb08a
4 changed files with 27 additions and 66 deletions

View File

@ -3,7 +3,7 @@
<head> <head>
<title>jQuery UI Menubar - Default demo</title> <title>jQuery UI Menubar - Default demo</title>
<link rel="stylesheet" href="../demos.css" type="text/css" /> <link rel="stylesheet" href="../demos.css" type="text/css" />
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css" type="text/css" title="ui-theme" /> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css" />
<script src="../../jquery-1.5.1.js"></script> <script src="../../jquery-1.5.1.js"></script>
<script src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.widget.js"></script>
@ -21,7 +21,7 @@
$("<div/>").text("Selected: " + ui.item.text()).appendTo("#log"); $("<div/>").text("Selected: " + ui.item.text()).appendTo("#log");
} }
}); });
$(".menubar-icons").menubar({ $(".menubar-icons").menubar({
menuIcon: true, menuIcon: true,
buttons: true, buttons: true,
@ -34,39 +34,8 @@
}); });
}); });
</script> </script>
<style type="text/css"> <style>
#bar1, #bar2 { margin: 0 0 4em; } /* style for this page only */ #bar1, #bar2 { margin: 0 0 4em; }
.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;
padding: .0em .4em;
margin: .4em 0 .2em;
line-height: 1.5;
}
/* menubar styles */
.ui-menubar .ui-button { float: left; font-weight: normal; border-top-width: 0 !important; border-bottom-width: 0 !important; margin: 0; outline: none; }
.ui-menubar .ui-menubar-link { border-right: 1px dashed transparent; border-left: 1px dashed transparent; }
.ui-menubar {
list-style: none;
margin: 0;
padding-left: 0;
}
.ui-menubar-item {
float: left;
}
/*
table {
border-collapse: collapse;
}
th, td {
padding: 0.5em;
border: 1px solid black;
}
*/
</style> </style>
</head> </head>
<body> <body>

View File

@ -15,6 +15,7 @@
@import url("jquery.ui.datepicker.css"); @import url("jquery.ui.datepicker.css");
@import url("jquery.ui.dialog.css"); @import url("jquery.ui.dialog.css");
@import url("jquery.ui.menu.css"); @import url("jquery.ui.menu.css");
@import url("jquery.ui.menubar.css");
@import url("jquery.ui.progressbar.css"); @import url("jquery.ui.progressbar.css");
@import url("jquery.ui.resizable.css"); @import url("jquery.ui.resizable.css");
@import url("jquery.ui.selectable.css"); @import url("jquery.ui.selectable.css");

View File

@ -7,38 +7,14 @@
* *
* http://docs.jquery.com/UI/Menu#theming * http://docs.jquery.com/UI/Menu#theming
*/ */
.ui-menu { .ui-menu { list-style:none; padding: 2px; margin: 0; display:block; outline: none; }
list-style:none; .ui-menu .ui-menu { margin-top: -3px; position: absolute; }
padding: 2px; .ui-menu .ui-menu-item { margin: 0; padding: 0; zoom: 1; width: 100%; }
margin: 0; .ui-menu .ui-menu-item a { text-decoration: none; display: block; padding: 2px .4em; line-height: 1.5; zoom: 1; font-weight: normal; }
display:block;
outline: none;
}
.ui-menu .ui-menu {
margin-top: -3px;
}
.ui-menu .ui-menu-item {
margin:0;
padding: 0;
zoom: 1;
width: 100%;
}
.ui-menu .ui-menu-item a {
text-decoration:none;
display:block;
padding: 2px .4em;
line-height:1.5;
zoom:1;
font-weight: normal;
}
.ui-menu .ui-menu-item a.ui-state-focus, .ui-menu .ui-menu-item a.ui-state-focus,
.ui-menu .ui-menu-item a.ui-state-active { .ui-menu .ui-menu-item a.ui-state-active { font-weight: normal; margin: -1px; }
font-weight: normal;
margin: -1px;
}
/* nested menus */ .ui-menu li.ui-state-disabled { font-weight: normal; padding: .0em .4em; margin: .4em 0 .2em; line-height: 1.5; }
.ui-menu .ui-menu { position: absolute; }
/* icon support */ /* icon support */
.ui-menu-icons { position: relative; } .ui-menu-icons { position: relative; }
@ -48,4 +24,4 @@
.ui-menu .ui-icon { position: absolute; top: .2em; left: .2em; } .ui-menu .ui-icon { position: absolute; top: .2em; left: .2em; }
/* right-aligned */ /* right-aligned */
.ui-menu .ui-menu-icon { position: static; float: right; } .ui-menu .ui-menu-icon { position: static; float: right; }

15
themes/base/jquery.ui.menubar.css vendored Normal file
View File

@ -0,0 +1,15 @@
/*
* jQuery UI Menubar @VERSION
*
* Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
* Dual licensed under the MIT or GPL Version 2 licenses.
* http://jquery.org/license
*/
.ui-menubar { list-style: none; margin: 0; padding-left: 0; }
.ui-menubar-item { float: left; }
.ui-menubar .ui-button { float: left; font-weight: normal; border-top-width: 0 !important; border-bottom-width: 0 !important; margin: 0; outline: none; }
.ui-menubar .ui-menubar-link { border-right: 1px dashed transparent; border-left: 1px dashed transparent; }
.ui-menubar .ui-menu { width: 200px; position: absolute; z-index: 9999; }