jquery · arschmitz · Feb 3, 2015 · Dec 3, 2014 · Feb 3, 2015 · Dec 3, 2014
diff --git a/.csslintrc b/.csslintrc
@@ -7,5 +7,6 @@
 	"important": false,
 	"outline-none": false,
 	"overqualified-elements": false,
-	"text-indent": false
+	"text-indent": false,
+	"box-sizing": false
 }
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -229,6 +229,9 @@ grunt.initConfig({
 				"qunit/qunit.css": "qunit/qunit/qunit.css",
 				"qunit/MIT-LICENSE.txt": "qunit/MIT-LICENSE.txt",
 
+				"qunit-assert-classes/qunit-assert-classes.js": "qunit-assert-classes/qunit-assert-classes.js",
+				"qunit-assert-classes/LICENSE.txt": "qunit-assert-classes/LICENSE",
+
 				"jquery-mousewheel/jquery.mousewheel.js": "jquery-mousewheel/jquery.mousewheel.js",
 				"jquery-mousewheel/LICENSE.txt": "jquery-mousewheel/LICENSE.txt",
 

diff --git a/bower.json b/bower.json
@@ -15,6 +15,7 @@
 		"jquery-simulate": "1.0.0",
 		"jshint": "2.4.4",
 		"qunit": "1.17.1",
+		"qunit-assert-classes": "0.1.5",
 
 		"jquery-1.7.0": "jquery#1.7.0",
 		"jquery-1.7.1": "jquery#1.7.1",

diff --git a/demos/autocomplete/combobox.html b/demos/autocomplete/combobox.html
@@ -58,7 +58,9 @@
 						source: $.proxy( this, "_source" )
 					})
 					.tooltip({
-						tooltipClass: "ui-state-highlight"
+						classes: {
+							"ui-tooltip": "ui-state-highlight"
+						}
 					});
 
 				this._on( this.input, {

diff --git a/demos/button/checkbox.html b/demos/button/checkbox.html
diff --git a/demos/button/default.html b/demos/button/default.html
@@ -11,24 +11,33 @@
 	<link rel="stylesheet" href="../demos.css">
 	<script>
 	$(function() {
-		$( "input[type=submit], a, button" )
-			.button()
-			.click(function( event ) {
-				event.preventDefault();
-			});
+		$( ".widget input[type=submit], .widget a, .widget button" ).button();
+		$( "button, input, a" ).click( function( event ) {
+			event.preventDefault();
+		});
 	});
 	</script>
 </head>
 <body>
+<div class="widget">
+	<h1>Widget Buttons</h1>
+	<button>A button element</button>
 
-<button>A button element</button>
+	<input type="submit" value="A submit button">
 
-<input type="submit" value="A submit button">
+	<a href="#">An anchor</a>
+</div>
+<h1>CSS Buttons</h1>
+<button class="ui-button ui-widget ui-corner-all">A button element</button>
+
+<input class="ui-button ui-widget ui-corner-all" type="submit" value="A submit button">
 
-<a href="#">An anchor</a>
+<a class="ui-button ui-widget ui-corner-all" href="#">An anchor</a>
 
 <div class="demo-description">
 <p>Examples of the markup that can be used for buttons: A button element, an input of type submit and an anchor.</p>
+<p>Buttons can be styled via the button widget for by adding the classes yourself to avoid the javascript overhead if you dont need any of the methods provided by the button widget</p>
+<p>Here you can see examples of buttons using the button widget and styled with css only.</p>
 </div>
 </body>
 </html>
diff --git a/demos/button/icons.html b/demos/button/icons.html
@@ -11,37 +11,56 @@
 	<link rel="stylesheet" href="../demos.css">
 	<script>
 	$(function() {
-		$( "button:first" ).button({
-			icons: {
-				primary: "ui-icon-locked"
-			},
-			text: false
+		$( ".widget button, .widget a" ).first().button({
+			icon: "ui-icon-gear",
+			showLabel: false
 		}).next().button({
-			icons: {
-				primary: "ui-icon-locked"
-			}
+			icon: "ui-icon-gear"
 		}).next().button({
-			icons: {
-				primary: "ui-icon-gear",
-				secondary: "ui-icon-triangle-1-s"
-			}
+			icon: "ui-icon-gear",
+			iconPosition: "end"
 		}).next().button({
-			icons: {
-				primary: "ui-icon-gear",
-				secondary: "ui-icon-triangle-1-s"
-			},
-			text: false
+			icon: "ui-icon-gear",
+			iconPosition: "bottom"
+		}).next().button({
+			icon: "ui-icon-gear",
+			iconPosition: "top"
 		});
 	});
 	</script>
 </head>
 <body>
+<div class="widget">
+	<h1>Widget</h1>
+	<a href="#">Button with icon only</a>
+	<button>Button with icon on the left</button>
+	<button>Button with icon on the right</button>
+	<button>Button with icon on the bottom</button>
+	<button>Button with icon on the top</button>
+</div>
+<div class="css">
+	<h1>CSS</h1>
+	<button class="ui-button ui-widget ui-corner-all ui-button-icon-only" title="Button with icon only">
+		<span class="ui-icon ui-icon-gear"></span>Button with icon only
+	</button>
+	<button class="ui-button ui-widget ui-corner-all ui-icon-beginning">
+		Button with no text
+	</button>
+	<button class="ui-button ui-widget ui-corner-all ui-icon-beginning">
+		<span class="ui-icon ui-icon-triangle-1-w"></span>Button with icon on the left
+	</button>
+	<button class="ui-button ui-widget ui-corner-all ui-icon-end">
+		Button with icon on the right<span class="ui-icon ui-icon-triangle-1-e"></span>
+	</button>
+	<button class="ui-button ui-widget ui-corner-all">
+		Button with icon on bottom<span class="ui-icon ui-icon-triangle-1-s ui-icon-display-block"></span>
+	</button>
+	<button class="ui-button ui-widget ui-corner-all">
+		<span class="ui-icon ui-icon-triangle-1-n ui-icon-display-block"></span>Button with icon on top
+	</button>
+	<button class="ui-button ui-widget ui-corner-all"><span class="ui-icon ui-icon-triangle-1-n ui-icon-display-block"></span><span class="ui-icon ui-icon-triangle-1-w"></span>Button with many icons<span class="ui-icon ui-icon-triangle-1-e"></span><span class="ui-icon ui-icon-triangle-1-s ui-icon-display-block"></span></button>
 
-<button>Button with icon only</button>
-<button>Button with icon on the left</button>
-<button>Button with two icons</button>
-<button>Button with two icons and no text</button>
-
+</div>
 <div class="demo-description">
 <p>Some buttons with various combinations of text and icons.</p>
 </div>

diff --git a/demos/button/index.html b/demos/button/index.html
@@ -9,11 +9,7 @@
 
 <ul>
 	<li><a href="default.html">Default functionality</a></li>
-	<li><a href="radio.html">Radios</a></li>
-	<li><a href="checkbox.html">Checkboxes</a></li>
 	<li><a href="icons.html">Icons</a></li>
-	<li><a href="toolbar.html">Toolbar</a></li>
-	<li><a href="splitbutton.html">Split Button</a></li>
 </ul>
 
 </body>

diff --git a/demos/button/radio.html b/demos/button/radio.html
diff --git a/demos/button/splitbutton.html b/demos/button/splitbutton.html