Toolbar: Implement classes option

Fixes jquery-archivegh-7687
Closes jquery-archivegh-8114

build/tasks/options/jscs.js

@@ -25,16 +25,18 @@ module.exports = {
 			"js/widgets/forms/checkboxradio.backcompat.js",
 			"js/widgets/forms/flipswitch.js",
 			"js/widgets/forms/flipswitch.backcompat.js",
-			"tests/unit/flipswitch/*.js",
 			"js/widgets/forms/rangeslider.js",
 			"js/widgets/forms/rangeslider.backcompat.js",
-			"js/tests/unit/rangeslider/*.js",
 			"js/widgets/forms/slider.js",
 			"js/widgets/forms/slider.backcompat.js",
-			"js/tests/unit/slider/*.js",
 			"js/widgets/controlgroup.js",
 			"js/widgets/controlgroup.backcompat.js",
 			"js/widgets/tabs.ajax.js",
+			"js/widgets/toolbar.js",
+			"js/widgets/toolbar.backcompat.js",
+			"js/widgets/fixedToolbar.js",
+			"js/widgets/fixedToolbar.backcompat.js",
+			"js/widgets/fixedToolbar.tapToggle.js",
 			"js/widgets/enhancer.js",
 			"js/widgets/enhancer.backcompat.js",
 			"js/degradeInputs.js",
@@ -55,6 +57,13 @@ module.exports = {
 			"tests/integration/page/page_enhance_within.js",
 			"tests/integration/page/page_theme.js",
 			"tests/integration/page/page_title_entity.js",
+			"tests/unit/flipswitch/*.js",
+			"tests/unit/slider/*.js",
+			"tests/unit/rangeslider/*.js",
+			"tests/unit/toolbar/*.js",
+			"tests/unit/fixed-toolbar/*.js",
+			"tests/integration/fixed-toolbar/*.js",
+			"tests/integration/toolbar/*.js",
 			"tests/unit/dialog/dialog_count.js",
 			"tests/unit/init/init_dialog.js",
 			"tests/unit/pagecontainer/pagecontainer_core.js",

css/structure/jquery.mobile.core.css

@@ -165,50 +165,24 @@ div.ui-mobile-viewport {
 	font-size: 1em;
 	display: inline-block;
 }
-.ui-header,
-.ui-footer {
-	border-width: 1px 0;
-	border-style: solid;
-	position: relative;
-}
-.ui-header:empty,
-.ui-footer:empty {
-	min-height: 2.6875em;
-}
-.ui-header .ui-title,
-.ui-footer .ui-title {
-	font-size: 1em;
-	min-height: 1.1em;
-	text-align: center;
-	display: block;
-	margin: 0 30%;
-	padding: .7em 0;
-	text-overflow: ellipsis;
-	overflow: hidden;
-	white-space: nowrap;
-	outline: 0 !important;
-}
-.ui-footer .ui-title {
-	margin: 0 1em;
-}
 .ui-content {
 	border-width: 0;
 	overflow: visible;
 	overflow-x: hidden;
 	padding: 1em;
 }
 /* Corner styling for dialogs and popups */
-.ui-corner-all > .ui-header:first-child,
+.ui-corner-all > .ui-toolbar-header:first-child,
 .ui-corner-all > .ui-content:first-child,
-.ui-corner-all > .ui-footer:first-child {
+.ui-corner-all > .ui-toolbar-footer:first-child {
 	-webkit-border-top-left-radius: inherit;
 	border-top-left-radius: inherit;
 	-webkit-border-top-right-radius: inherit;
 	border-top-right-radius: inherit;
 }
-.ui-corner-all > .ui-header:last-child,
+.ui-corner-all > .ui-toolbar-header:last-child,
 .ui-corner-all > .ui-content:last-child,
-.ui-corner-all > .ui-footer:last-child {
+.ui-corner-all > .ui-toolbar-footer:last-child {
 	-webkit-border-bottom-left-radius: inherit;
 	border-bottom-left-radius: inherit;
 	-webkit-border-bottom-right-radius: inherit;
@@ -234,8 +208,8 @@ div.ui-mobile-viewport {
 	user-select: none;
 }
 .ui-button-icon-only,
-.ui-header button.ui-button.ui-button-icon-only,
-.ui-footer button.ui-button.ui-button-icon-only {
+.ui-toolbar-header button.ui-button.ui-button-icon-only,
+.ui-toolbar-footer button.ui-button.ui-button-icon-only {
 	padding: 0;
 	width: 1.75em;
 	height: 1.75em;
@@ -254,25 +228,25 @@ div.ui-mobile-viewport {
 	line-height: inherit;
 }
 /* Make buttons in toolbars default to mini and inline. */
-.ui-header .ui-button,
-.ui-footer .ui-button {
+.ui-toolbar-header .ui-button,
+.ui-toolbar-footer .ui-button {
 	display: inline-block;
 	vertical-align: middle;
 }
 .ui-mini,
-.ui-header .ui-button,
-.ui-footer .ui-button,
-.ui-header .ui-controlgroup .ui-button-icon-only,
-.ui-footer .ui-controlgroup .ui-button-icon-only,
-.ui-header .ui-button-left,
-.ui-header .ui-button-right {
+.ui-toolbar-header .ui-button,
+.ui-toolbar-footer .ui-button,
+.ui-toolbar-header .ui-controlgroup .ui-button-icon-only,
+.ui-toolbar-footer .ui-controlgroup .ui-button-icon-only,
+.ui-toolbar-header .ui-toolbar-header-button-left,
+.ui-toolbar-header .ui-toolbar-header-button-right {
 	font-size: 13px;
 	line-height: 1.8462;
 }
 .ui-mini.ui-button-icon-only,
 .ui-mini .ui-button-icon-only,
-.ui-header .ui-button-icon-only,
-.ui-footer .ui-button-icon-only {
+.ui-toolbar-header .ui-button-icon-only,
+.ui-toolbar-footer .ui-button-icon-only {
 	font-size: 16px;
 	padding: 0;
 }
@@ -303,47 +277,14 @@ div.ui-mobile-viewport {
 	bottom: auto;
 	top: 50%;
 	left: 50%;
+}
+.ui-button-icon-only .ui-icon,
+.ui-button-icon-only.ui-toolbar-header-button-left > .ui-icon,
+.ui-button-icon-only.ui-toolbar-header-button-right > .ui-icon {
 	margin-top: -11px;
 	margin-left: -11px;
 }
 
-/* Float icons helper classes */
-.ui-widget-icon-floatbeginning {
-	bottom: auto;
-	float: left;
-}
-.ui-widget-icon-floatend {
-	bottom: auto;
-	float: right;
-}
-
-/* Buttons in header position classes */
-.ui-header .ui-button-left,
-.ui-header .ui-button-right,
-.ui-button-left > [class*="ui-"],
-.ui-button-right > [class*="ui-"] {
-	margin: 0;
-}
-.ui-button-left,
-.ui-button-right {
-	position: absolute;
-	top: .24em;
-}
-.ui-button-left {
-	left: .4em;
-}
-.ui-button-right {
-	right: .4em;
-}
-.ui-button-icon-only.ui-button-left {
-	top: .3125em;
-	left: .3125em;
-}
-.ui-button-icon-only.ui-button-right {
-	top: .3125em;
-	right: .3125em;
-}
-
 /* Button elements and input buttons */
 button.ui-button,
 input.ui-button {
@@ -356,8 +297,8 @@ input.ui-button {
 }
 button.ui-button-inline,
 input.ui-button-inline,
-.ui-header button.ui-button,
-.ui-footer button.ui-button {
+.ui-toolbar-header button.ui-button,
+.ui-toolbar-footer button.ui-button {
 	width: auto;
 }
 /* Firefox adds a 1px border in a button element. We negate this to make sure they have the same height as other buttons in controlgroups. */

css/structure/jquery.mobile.fixedToolbar.css

@@ -1,38 +1,38 @@
 /* fixed page header & footer configuration */
-.ui-header-fixed,
-.ui-footer-fixed {
+.ui-toolbar-header-fixed,
+.ui-toolbar-footer-fixed {
 	left: 0;
 	right: 0;
 	width: 100%;
 	position: fixed;
 	z-index: 1000;
 }
-.ui-header-fixed {
+.ui-toolbar-header-fixed {
 	top: -1px;
 	padding-top: 1px;
 }
-.ui-header-fixed.ui-fixed-hidden {
+.ui-toolbar-header-fixed.ui-toolbar-fixed-hidden {
 	top: 0;
 	padding-top: 0;
 }
-.ui-header-fixed .ui-button-left,
-.ui-header-fixed .ui-button-right {
+.ui-toolbar-header-fixed .ui-button-left,
+.ui-toolbar-header-fixed .ui-button-right {
 	margin-top: 1px;
 }
-.ui-header-fixed.ui-fixed-hidden .ui-button-left,
-.ui-header-fixed.ui-fixed-hidden .ui-button-right {
+.ui-toolbar-header-fixed.ui-toolbar-fixed-hidden .ui-button-left,
+.ui-toolbar-header-fixed.ui-toolbar-fixed-hidden .ui-button-right {
 	margin-top: 0;
 }
-.ui-footer-fixed {
+.ui-toolbar-footer-fixed {
 	bottom: -1px;
 	padding-bottom: 1px;
 }
-.ui-footer-fixed.ui-fixed-hidden {
+.ui-toolbar-footer-fixed.ui-toolbar-fixed-hidden {
 	bottom: 0;
 	padding-bottom: 0;
 }
-.ui-header-fullscreen,
-.ui-footer-fullscreen {
+.ui-toolbar-header-fullscreen,
+.ui-toolbar-footer-fullscreen {
 	filter: Alpha(Opacity=90);
 	opacity: .9;
 }
@@ -43,34 +43,34 @@
 .ui-page-footer-fixed {
 	padding-bottom: 2.8125em;
 }
-.ui-page-header-fullscreen > .ui-content,
-.ui-page-footer-fullscreen > .ui-content {
+.ui-toolbar-page-header-fullscreen > .ui-content,
+.ui-toolbar-page-footer-fullscreen > .ui-content {
 	padding: 0;
 }
-.ui-fixed-hidden {
+.ui-toolbar-fixed-hidden {
 	position: absolute;
 }
 /* Tap toggle: hide external fixed footer. See issue #6604 */
-.ui-footer-fixed.ui-fixed-hidden {
+.ui-toolbar-footer-fixed.ui-toolbar-fixed-hidden {
   display: none;
 }
-.ui-page .ui-footer-fixed.ui-fixed-hidden {
-  display: block;
+.ui-page .ui-toolbar-footer-fixed.ui-toolbar-fixed-hidden {
+  display: block
 }
 
-.ui-page-header-fullscreen .ui-fixed-hidden,
-.ui-page-footer-fullscreen .ui-fixed-hidden {
+.ui-toolbar-page-header-fullscreen .ui-toolbar-fixed-hidden,
+.ui-toolbar-page-footer-fullscreen .ui-toolbar-fixed-hidden {
 	position: absolute !important;
 	height: 1px;
 	width: 1px;
 	overflow: hidden;
 	clip: rect(1px,1px,1px,1px);
 }
-.ui-header-fixed .ui-button,
-.ui-footer-fixed .ui-button {
+.ui-toolbar-header-fixed .ui-button,
+.ui-toolbar-footer-fixed .ui-button {
 	z-index: 10;
 }
 /* workarounds for other widgets */
-.ui-android-2x-fixed .ui-li-has-thumb {
+.ui-toolbar-android-2x-fixed .ui-li-has-thumb {
 	-webkit-transform: translate3d(0,0,0);
 }

css/structure/jquery.mobile.structure.css

@@ -3,6 +3,7 @@
 @import url("jquery.mobile.transition.visuals.css");
 @import url("jquery.mobile.forms.fieldcontain.css");
 @import url("jquery.mobile.grid.css");
+@import url("jquery.mobile.toolbar.css");
 @import url("jquery.mobile.fixedToolbar.css");
 @import url("jquery.mobile.navbar.css");
 @import url("jquery.mobile.collapsible.css");

css/structure/jquery.mobile.toolbar.css

@@ -0,0 +1,58 @@
+.ui-toolbar,
+.ui-toolbar-header,
+.ui-toolbar-footer {
+	border-width: 1px 0;
+	border-style: solid;
+	position: relative;
+}
+.ui-toolbar:empty,
+.ui-toolbar-header:empty,
+.ui-toolbar-footer:empty {
+	min-height: 2.6875em;
+}
+.ui-toolbar .ui-toolbar-title,
+.ui-toolbar-header .ui-toolbar-title,
+.ui-toolbar-footer .ui-toolbar-title {
+	font-size: 1em;
+	min-height: 1.1em;
+	text-align: center;
+	display: block;
+	margin: 0 30%;
+	padding: .7em 0;
+	text-overflow: ellipsis;
+	overflow: hidden;
+	white-space: nowrap;
+	outline: 0 !important;
+}
+.ui-toolbar-footer .ui-toolbar-title {
+	margin: 0 1em;
+}
+/* Buttons in header position classes */
+.ui-toolbar-header .ui-toolbar-header-button-left,
+.ui-toolbar-header .ui-toolbar-header-button-right,
+.ui-toolbar-header-button-left > [class*="ui-"],
+.ui-toolbar-header-button-right > [class*="ui-"] {
+	margin: 0;
+}
+.ui-toolbar-header-button-left,
+.ui-toolbar-header-button-right {
+	position: absolute;
+	top: .24em;
+}
+.ui-toolbar-header-button-left {
+	left: .4em;
+}
+.ui-toolbar-header-button-right {
+	right: .4em;
+}
+.ui-btn-icon-notext.ui-toolbar-header-button-left {
+	top: .3125em;
+	left: .3125em;
+}
+.ui-btn-icon-notext.ui-toolbar-header-button-right {
+	top: .3125em;
+	right: .3125em;
+}
+.ui-toolbar-header .ui-controlgroup-horizontal:after {
+    clear: none;
+}

demos/_search/index.php

@@ -16,7 +16,7 @@
 <body>
 <div data-role="page" class="jqm-demos jqm-demos-index jqm-demos-search-results">
 
-	<div data-role="header" class="jqm-header">
+	<div data-role="toolbar" data-type="header" class="jqm-header">
 		<h2><a href="../" title="jQuery Mobile Demos home"><img src="../_assets/img/jquery-logo.png" alt="jQuery Mobile"></a></h2>
 		<p><span class="jqm-version"></span> Demos</p>
 		<a href="#" class="jqm-navmenu-link ui-button ui-button-icon-only ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-left">Menu<span class="ui-icon ui-icon-bars"></span></a>
@@ -37,7 +37,7 @@
 
 	<?php include( '../jqm-navmenu.php' ); ?>
 
-	<div data-role="footer" data-position="fixed" data-tap-toggle="false" class="jqm-footer">
+	<div data-role="toolbar" data-type="footer" data-position="fixed" data-tap-toggle="false" class="jqm-footer">
 		<p>jQuery Mobile Demos version <span class="jqm-version"></span></p>
 		<p>Copyright jQuery Foundation</p>
 	</div><!-- /footer -->