aboutsummaryrefslogtreecommitdiffstats
path: root/demos/button
diff options
context:
space:
mode:
Diffstat (limited to 'demos/button')
-rw-r--r--demos/button/checkbox.html11
-rw-r--r--demos/button/default.html18
-rw-r--r--demos/button/icons.html51
-rw-r--r--demos/button/index.html22
-rw-r--r--demos/button/radio.html11
-rw-r--r--demos/button/splitbutton.html31
-rw-r--r--demos/button/toolbar.html15
7 files changed, 57 insertions, 102 deletions
diff --git a/demos/button/checkbox.html b/demos/button/checkbox.html
index 05aac0af8..be9650402 100644
--- a/demos/button/checkbox.html
+++ b/demos/button/checkbox.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
@@ -21,8 +21,6 @@
</head>
<body>
-<div class="demo">
-
<input type="checkbox" id="check" /><label for="check">Toggle</label>
<div id="format">
@@ -31,14 +29,9 @@
<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 -->
-
+</div>
</body>
</html>
diff --git a/demos/button/default.html b/demos/button/default.html
index 00d7d6bd2..23cbef156 100644
--- a/demos/button/default.html
+++ b/demos/button/default.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
@@ -11,28 +11,24 @@
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
- $( "input[type=submit], a, button", ".demo" ).button();
- $( "a", ".demo" ).click(function() { return false; });
+ $( "input[type=submit], a, button" )
+ .button()
+ .click(function( event ) {
+ event.preventDefault();
+ });
});
</script>
</head>
<body>
-<div class="demo">
-
<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 -->
-
+</div>
</body>
</html>
diff --git a/demos/button/icons.html b/demos/button/icons.html
index 6d22af560..ee42063b3 100644
--- a/demos/button/icons.html
+++ b/demos/button/icons.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
@@ -12,45 +12,38 @@
<script>
$(function() {
$( ".demo button:first" ).button({
- icons: {
- primary: "ui-icon-locked"
- },
- text: false
- }).next().button({
- icons: {
- primary: "ui-icon-locked"
- }
- }).next().button({
- icons: {
- primary: "ui-icon-gear",
- secondary: "ui-icon-triangle-1-s"
- }
- }).next().button({
- icons: {
- primary: "ui-icon-gear",
- secondary: "ui-icon-triangle-1-s"
- },
- text: false
- });
+ icons: {
+ primary: "ui-icon-locked"
+ },
+ text: false
+ }).next().button({
+ icons: {
+ primary: "ui-icon-locked"
+ }
+ }).next().button({
+ icons: {
+ primary: "ui-icon-gear",
+ secondary: "ui-icon-triangle-1-s"
+ }
+ }).next().button({
+ icons: {
+ primary: "ui-icon-gear",
+ secondary: "ui-icon-triangle-1-s"
+ },
+ text: false
+ });
});
</script>
</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>
-</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 -->
-
+</div>
</body>
</html>
diff --git a/demos/button/index.html b/demos/button/index.html
index 23977c820..79560595b 100644
--- a/demos/button/index.html
+++ b/demos/button/index.html
@@ -1,23 +1,19 @@
-<!DOCTYPE html>
+<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Button Demos</title>
- <link rel="stylesheet" href="../demos.css">
</head>
<body>
-<div class="demos-nav">
- <h4>Examples</h4>
- <ul>
- <li class="demo-config-on"><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>
-</div>
+<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>
</html>
diff --git a/demos/button/radio.html b/demos/button/radio.html
index 216da0935..b435cb130 100644
--- a/demos/button/radio.html
+++ b/demos/button/radio.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
@@ -17,8 +17,6 @@
</head>
<body>
-<div class="demo">
-
<form>
<div id="radio">
<input type="radio" id="radio1" name="radio" /><label for="radio1">Choice 1</label>
@@ -27,13 +25,8 @@
</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 -->
-
+</div>
</body>
</html>
diff --git a/demos/button/splitbutton.html b/demos/button/splitbutton.html
index 177e7d02b..c5f663aae 100644
--- a/demos/button/splitbutton.html
+++ b/demos/button/splitbutton.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
@@ -49,30 +49,21 @@
</head>
<body>
-<div class="demo">
-
+<div>
<div>
- <div>
- <button id="rerun">Run last action</button>
- <button id="select">Select an action</button>
- </div>
- <ul>
- <li><a href="#">Open...</a></li>
- <li><a href="#">Save</a></li>
- <li><a href="#">Delete</a></li>
- </ul>
+ <button id="rerun">Run last action</button>
+ <button id="select">Select an action</button>
</div>
-
-</div><!-- End demo -->
-
-
+ <ul>
+ <li><a href="#">Open...</a></li>
+ <li><a href="#">Save</a></li>
+ <li><a href="#">Delete</a></li>
+ </ul>
+</div>
<div class="demo-description">
-
<p>An example of a split button built with two buttons: A plain 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 -->
-
+</div>
</body>
</html>
diff --git a/demos/button/toolbar.html b/demos/button/toolbar.html
index c7066b21d..fcd05f505 100644
--- a/demos/button/toolbar.html
+++ b/demos/button/toolbar.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
@@ -86,8 +86,6 @@
</head>
<body>
-<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>
@@ -95,9 +93,9 @@
<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>
@@ -105,16 +103,11 @@
</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 -->
-
+</div>
</body>
</html>
generated by cgit v1.2.3 (git 2.39.1) at 2025-05-01 01:35:08 +0000