Button demos: Coding standards.

author: Scott González <scott.gonzalez@gmail.com> 2010-09-09 22:43:06 -0400
committer: Scott González <scott.gonzalez@gmail.com> 2010-09-09 22:45:43 -0400
commit: 8b4d1877465d92de68c83a92b9c2eee2a5e096fa (patch)
tree: 2ee4054cd75128faa49a66e477cd05342142d494 /demos/button
parent: eba3067479676d9fde9e1fcca76ba720cd9a4cee (diff)
download: jquery-ui-8b4d1877465d92de68c83a92b9c2eee2a5e096fa.tar.gz
jquery-ui-8b4d1877465d92de68c83a92b9c2eee2a5e096fa.zip
7 files changed, 150 insertions, 186 deletions
diff --git a/demos/button/checkbox.html b/demos/button/checkbox.html
index b6192ee28..1d44743e8 100644
--- a/demos/button/checkbox.html
+++ b/demos/button/checkbox.html
@@ -1,49 +1,44 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-	<meta charset="UTF-8" />
-	<title>jQuery UI Button - Checkboxes demo</title>
-	<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
-	<script type="text/javascript" src="../../jquery-1.4.2.js"></script>
-	<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
-	<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
-	<script type="text/javascript" src="../../ui/jquery.ui.button.js"></script>
-	<link type="text/css" href="../demos.css" rel="stylesheet" />
-	<script type="text/javascript">
+	<meta charset="utf-8">
+	<title>jQuery UI Button - Checkboxes</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.4.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.button.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<script>
 	$(function() {
-		$("#check").button();
-		$("#format").buttonset();
+		$( "#check" ).button();
+		$( "#format" ).buttonset();
 	});
 	</script>
 	<style>
-		#format { margin-top: 2em; }
+	#format { margin-top: 2em; }
 	</style>
 </head>
 <body>
 
 <div class="demo">
 
-	<input type="checkbox" id="check" /><label for="check">Toggle</label>
-	
-	<div id="format">
-		<input type="checkbox" id="check1" /><label for="check1">B</label>
-		<input type="checkbox" id="check2" /><label for="check2">I</label>
-		<input type="checkbox" id="check3" /><label for="check3">U</label>
-	</div>
+<input type="checkbox" id="check" /><label for="check">Toggle</label>
+
+<div id="format">
+	<input type="checkbox" id="check1" /><label for="check1">B</label>
+	<input type="checkbox" id="check2" /><label for="check2">I</label>
+	<input type="checkbox" id="check3" /><label for="check3">U</label>
+</div>
 
 </div><!-- End demo -->
 
 
 
 <div class="demo-description">
-
 <p>A checkbox is styled as a toggle button with the button widget. The label element associated with the checkbox is used for the button text.</p>
-
 <p>This demo also demonstrates three checkboxes styled as a button set by calling <code>.buttonset()</code> on a common container.</p>
-
 </div><!-- End demo-description -->
 
-
-
 </body>
 </html>
diff --git a/demos/button/default.html b/demos/button/default.html
index 700c64bcc..a42565744 100644
--- a/demos/button/default.html
+++ b/demos/button/default.html
@@ -1,46 +1,38 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-	<meta charset="UTF-8" />
-	<title>jQuery UI Button - Default demo</title>
-	<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
-	<script type="text/javascript" src="../../jquery-1.4.2.js"></script>
-	<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
-	<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
-	<script type="text/javascript" src="../../ui/jquery.ui.button.js"></script>
-	<link type="text/css" href="../demos.css" rel="stylesheet" />
-	<script type="text/javascript">
+	<meta charset="utf-8">
+	<title>jQuery UI Button - Default functionality</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.4.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.button.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<script>
 	$(function() {
-		$("button, input:submit, a", ".demo").button();
-		
-		$("a", ".demo").click(function() { return false; });
+		$( "button, input:submit, a", ".demo" ).button();
+		$( "a", ".demo" ).click(function() { return false; });
 	});
 	</script>
-	<style>
-		
-	</style>
 </head>
 <body>
 
 <div class="demo">
 
-	<button>A button element</button>
-	
-	<input type="submit" value="A submit button"/>
-	
-	<a href="#">An anchor</a>
+<button>A button element</button>
+
+<input type="submit" value="A submit button"/>
+
+<a href="#">An anchor</a>
 
 </div><!-- End demo -->
 
 
 
 <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>
-
 </div><!-- End demo-description -->
 
-
-
 </body>
 </html>
diff --git a/demos/button/icons.html b/demos/button/icons.html
index 2dc11c5d8..c57f40c15 100644
--- a/demos/button/icons.html
+++ b/demos/button/icons.html
@@ -1,63 +1,56 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-	<meta charset="UTF-8" />
-	<title>jQuery UI Button - Icons demo</title>
-	<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
-	<script type="text/javascript" src="../../jquery-1.4.2.js"></script>
-	<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
-	<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
-	<script type="text/javascript" src="../../ui/jquery.ui.button.js"></script>
-	<link type="text/css" href="../demos.css" rel="stylesheet" />
-	<script type="text/javascript">
+	<meta charset="utf-8">
+	<title>jQuery UI Button - Icons</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.4.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.button.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<script>
 	$(function() {
-		$(".demo button:first").button({
+		$( ".demo button:first" ).button({
             icons: {
-                primary: 'ui-icon-locked'
+                primary: "ui-icon-locked"
             },
             text: false
         }).next().button({
             icons: {
-                primary: 'ui-icon-locked'
+                primary: "ui-icon-locked"
             }
         }).next().button({
             icons: {
-                primary: 'ui-icon-gear',
-                secondary: 'ui-icon-triangle-1-s'
+                primary: "ui-icon-gear",
+                secondary: "ui-icon-triangle-1-s"
             }
         }).next().button({
             icons: {
-                primary: 'ui-icon-gear',
-                secondary: 'ui-icon-triangle-1-s'
+                primary: "ui-icon-gear",
+                secondary: "ui-icon-triangle-1-s"
             },
             text: false
         });
 	});
 	</script>
-	<style>
-		
-	</style>
 </head>
 <body>
 
 <div class="demo">
 
-	<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>
+<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><!-- End demo -->
 
 
 
 <div class="demo-description">
-
 <p>Some buttons with various combinations of text and icons, here specified via metadata.</p>
-
 </div><!-- End demo-description -->
 
-
-
 </body>
 </html>
diff --git a/demos/button/index.html b/demos/button/index.html
index c2b37200d..23977c820 100644
--- a/demos/button/index.html
+++ b/demos/button/index.html
@@ -1,9 +1,9 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-	<meta charset="UTF-8" />
+	<meta charset="utf-8">
 	<title>jQuery UI Button Demos</title>
-	<link type="text/css" href="../demos.css" rel="stylesheet" />
+	<link rel="stylesheet" href="../demos.css">
 </head>
 <body>
 
diff --git a/demos/button/radio.html b/demos/button/radio.html
index 3e5dc2379..62bab21a0 100644
--- a/demos/button/radio.html
+++ b/demos/button/radio.html
@@ -1,46 +1,39 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-	<meta charset="UTF-8" />
-	<title>jQuery UI Button - Radio Buttons demo</title>
-	<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
-	<script type="text/javascript" src="../../jquery-1.4.2.js"></script>
-	<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
-	<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
-	<script type="text/javascript" src="../../ui/jquery.ui.button.js"></script>
-	<link type="text/css" href="../demos.css" rel="stylesheet" />
-	<script type="text/javascript">
+	<meta charset="utf-8">
+	<title>jQuery UI Button - Radios</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.4.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.button.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<script>
 	$(function() {
-		$("#radio").buttonset();
+		$( "#radio" ).buttonset();
 	});
 	</script>
-	<style>
-		
-	</style>
 </head>
 <body>
 
 <div class="demo">
 
-	<form>
-		<div id="radio">
-			<input type="radio" id="radio1" name="radio" /><label for="radio1">Choice 1</label>
-			<input type="radio" id="radio2" name="radio" checked="checked" /><label for="radio2">Choice 2</label>
-			<input type="radio" id="radio3" name="radio" /><label for="radio3">Choice 3</label>
-		</div>
-	</form>
+<form>
+	<div id="radio">
+		<input type="radio" id="radio1" name="radio" /><label for="radio1">Choice 1</label>
+		<input type="radio" id="radio2" name="radio" checked="checked" /><label for="radio2">Choice 2</label>
+		<input type="radio" id="radio3" name="radio" /><label for="radio3">Choice 3</label>
+	</div>
+</form>
 
 </div><!-- End demo -->
 
 
 
 <div class="demo-description">
-
 <p>A set of three radio buttons transformed into a button set.</p>
-
 </div><!-- End demo-description -->
 
-
-
 </body>
 </html>
diff --git a/demos/button/splitbutton.html b/demos/button/splitbutton.html
index 7e4d66038..e1faa12af 100644
--- a/demos/button/splitbutton.html
+++ b/demos/button/splitbutton.html
@@ -1,33 +1,33 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-	<meta charset="UTF-8" />
-	<title>jQuery UI Button - Default demo</title>
-	<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
-	<script type="text/javascript" src="../../jquery-1.4.2.js"></script>
-	<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
-	<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
-	<script type="text/javascript" src="../../ui/jquery.ui.button.js"></script>
-	<link type="text/css" href="../demos.css" rel="stylesheet" />
-	<script type="text/javascript">
+	<meta charset="utf-8">
+	<title>jQuery UI Button - Split button</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.4.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.button.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<script>
 	$(function() {
-		$("#rerun")
+		$( "#rerun" )
 			.button()
-			.click( function() {
+			.click(function() {
 				alert( "Running the last action" );
 			})
-		.next()
-			.button( {
-				text: false,
-				icons: {
-					primary: "ui-icon-triangle-1-s"
-				}
-			})
-			.click( function() {
-				alert( "Could display a menu to select an action" );
-			})
-		.parent()
-			.buttonset();
+			.next()
+				.button( {
+					text: false,
+					icons: {
+						primary: "ui-icon-triangle-1-s"
+					}
+				})
+				.click(function() {
+					alert( "Could display a menu to select an action" );
+				})
+				.parent()
+					.buttonset();
 	});
 	</script>
 	<style>
@@ -38,23 +38,18 @@
 
 <div class="demo">
 
-	<div>
-		<button id="rerun">Run last action</button>
-		<button id="select">Select an action</button>
-	</div>
+<div>
+	<button id="rerun">Run last action</button>
+	<button id="select">Select an action</button>
+</div>
 
 </div><!-- End demo -->
 
 
 
 <div class="demo-description">
-
-<p>An example of a split button built with two buttons: A plan button with just text, one with only a primary icon
-and no text. Both are grouped together in a set.</p>
-
+<p>An example of a split button built with two buttons: A plan button with just text, one with only a primary icon and no text. Both are grouped together in a set.</p>
 </div><!-- End demo-description -->
 
-
-
 </body>
 </html>
diff --git a/demos/button/toolbar.html b/demos/button/toolbar.html
index 5573872a7..a03036451 100644
--- a/demos/button/toolbar.html
+++ b/demos/button/toolbar.html
@@ -1,86 +1,86 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-	<meta charset="UTF-8" />
-	<title>jQuery UI Button - Toolbar demo</title>
-	<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
-	<script type="text/javascript" src="../../jquery-1.4.2.js"></script>
-	<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
-	<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
-	<script type="text/javascript" src="../../ui/jquery.ui.button.js"></script>
-	<link type="text/css" href="../demos.css" rel="stylesheet" />
-	<style type="text/css">
+	<meta charset="utf-8">
+	<title>jQuery UI Button - Toolbar</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.4.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.button.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<style>
 	#toolbar {
 		padding: 10px 4px;
 	}
 	</style>
-	<script type="text/javascript">
+	<script>
 	$(function() {
-		$('#beginning').button({
+		$( "#beginning" ).button({
 			text: false,
 			icons: {
-				primary: 'ui-icon-seek-start'
+				primary: "ui-icon-seek-start"
 			}
 		});
-		$('#rewind').button({
+		$( "#rewind" ).button({
 			text: false,
 			icons: {
-				primary: 'ui-icon-seek-prev'
+				primary: "ui-icon-seek-prev"
 			}
 		});
-		$('#play').button({
+		$( "#play" ).button({
 			text: false,
 			icons: {
-				primary: 'ui-icon-play'
+				primary: "ui-icon-play"
 			}
 		})
 		.click(function() {
 			var options;
-			if ($(this).text() == 'play') {
+			if ( $( this ).text() === "play" ) {
 				options = {
-					label: 'pause',
+					label: "pause",
 					icons: {
-						primary: 'ui-icon-pause'
+						primary: "ui-icon-pause"
 					}
 				};
 			} else {
 				options = {
-					label: 'play',
+					label: "play",
 					icons: {
-						primary: 'ui-icon-play'
+						primary: "ui-icon-play"
 					}
 				};
 			}
-			$(this).button('option', options);
+			$( this ).button( "option", options );
 		});
-		$('#stop').button({
+		$( "#stop" ).button({
 			text: false,
 			icons: {
-				primary: 'ui-icon-stop'
+				primary: "ui-icon-stop"
 			}
 		})
 		.click(function() {
-			$('#play').button('option', {
-				label: 'play',
+			$( "#play" ).button( "option", {
+				label: "play",
 				icons: {
-					primary: 'ui-icon-play'
+					primary: "ui-icon-play"
 				}
 			});
 		});
-		$('#forward').button({
+		$( "#forward" ).button({
 			text: false,
 			icons: {
-				primary: 'ui-icon-seek-next'
+				primary: "ui-icon-seek-next"
 			}
 		});
-		$('#end').button({
+		$( "#end" ).button({
 			text: false,
 			icons: {
-				primary: 'ui-icon-seek-end'
+				primary: "ui-icon-seek-end"
 			}
 		});
-		$("#shuffle").button();
-		$("#repeat").buttonset();
+		$( "#shuffle" ).button();
+		$( "#repeat" ).buttonset();
 	});
 	</script>
 </head>
@@ -88,37 +88,33 @@
 
 <div class="demo">
 
-	<span id="toolbar" class="ui-widget-header ui-corner-all">
-		<button id="beginning">go to beginning</button>
-		<button id="rewind">rewind</button>
-		<button id="play">play</button>
-		<button id="stop">stop</button>
-		<button id="forward">fast forward</button>
-		<button id="end">go to end</button>
-		
-		<input type="checkbox" id="shuffle" /><label for="shuffle">Shuffle</label>
-		
-		<span id="repeat">
-			<input type="radio" id="repeat0" name="repeat" checked="checked" /><label for="repeat0">No Repeat</label>
-			<input type="radio" id="repeat1" name="repeat" /><label for="repeat1">Once</label>
-			<input type="radio" id="repeatall" name="repeat" /><label for="repeatall">All</label>
-		</span>
+<span id="toolbar" class="ui-widget-header ui-corner-all">
+	<button id="beginning">go to beginning</button>
+	<button id="rewind">rewind</button>
+	<button id="play">play</button>
+	<button id="stop">stop</button>
+	<button id="forward">fast forward</button>
+	<button id="end">go to end</button>
+	
+	<input type="checkbox" id="shuffle" /><label for="shuffle">Shuffle</label>
+	
+	<span id="repeat">
+		<input type="radio" id="repeat0" name="repeat" checked="checked" /><label for="repeat0">No Repeat</label>
+		<input type="radio" id="repeat1" name="repeat" /><label for="repeat1">Once</label>
+		<input type="radio" id="repeatall" name="repeat" /><label for="repeatall">All</label>
 	</span>
+</span>
 
 </div><!-- End demo -->
 
 
 
 <div class="demo-description">
-
 <p>
 	A mediaplayer toolbar. Take a look at the underlying markup: A few button elements,
 	an input of type checkbox for the Shuffle button, and three inputs of type radio for the Repeat options. 
 </p>
-
 </div><!-- End demo-description -->
 
-
-
 </body>
 </html>
author	Scott González <scott.gonzalez@gmail.com>	2010-09-09 22:43:06 -0400
committer	Scott González <scott.gonzalez@gmail.com>	2010-09-09 22:45:43 -0400
commit	8b4d1877465d92de68c83a92b9c2eee2a5e096fa (patch)
tree	2ee4054cd75128faa49a66e477cd05342142d494 /demos/button
parent	eba3067479676d9fde9e1fcca76ba720cd9a4cee (diff)
download	jquery-ui-8b4d1877465d92de68c83a92b9c2eee2a5e096fa.tar.gz jquery-ui-8b4d1877465d92de68c83a92b9c2eee2a5e096fa.zip