aboutsummaryrefslogtreecommitdiffstats
path: root/demos
diff options
context:
space:
mode:
authorAlexander Schmitz <arschmitz@gmail.com>2014-01-22 12:02:32 -0500
committerAlexander Schmitz <arschmitz@gmail.com>2015-10-07 10:57:59 -0400
commit02033262ee0fb1d9f33c361b3c2ddfa168604854 (patch)
tree645ed2427d14a598d02754b79e9eb8b889baf846 /demos
parent79d312f3f5cb5629d1bd7f9f899b41f304c388ef (diff)
downloadjquery-ui-02033262ee0fb1d9f33c361b3c2ddfa168604854.tar.gz
jquery-ui-02033262ee0fb1d9f33c361b3c2ddfa168604854.zip
Button: Initial commit of button re-factor
Move to using element stats rather then js class states remove ui-button-text spans. Removed button set
Diffstat (limited to 'demos')
-rw-r--r--demos/button/checkbox.html38
-rw-r--r--demos/button/default.html28
-rw-r--r--demos/button/icons.html78
-rw-r--r--demos/button/index.html4
-rw-r--r--demos/button/radio.html33
5 files changed, 67 insertions, 114 deletions
diff --git a/demos/button/checkbox.html b/demos/button/checkbox.html
deleted file mode 100644
index 87abbf90f..000000000
--- a/demos/button/checkbox.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery UI Button - Checkboxes</title>
- <link rel="stylesheet" href="../../themes/base/all.css">
- <script src="../../external/jquery/jquery.js"></script>
- <script src="../../ui/core.js"></script>
- <script src="../../ui/widget.js"></script>
- <script src="../../ui/button.js"></script>
- <link rel="stylesheet" href="../demos.css">
- <script>
- $(function() {
- $( "#check" ).button();
- $( "#format" ).buttonset();
- });
- </script>
- <style>
- #format { margin-top: 2em; }
- </style>
-</head>
-<body>
-
-<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 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>
-</body>
-</html>
diff --git a/demos/button/default.html b/demos/button/default.html
index 88c666e9a..5418fd8c9 100644
--- a/demos/button/default.html
+++ b/demos/button/default.html
@@ -11,25 +11,33 @@
<script src="../../ui/button.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
- $(function() {
- $( "input[type=submit], a, button" )
- .button()
- .on( "click", function( event ) {
- event.preventDefault();
- });
- });
+ $( function() {
+ $( ".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 or by adding the classes yourself. This avoids the JavaScript overhead if you don't need any of the methods provided by the button widget.</p>
</div>
</body>
</html>
diff --git a/demos/button/icons.html b/demos/button/icons.html
index 0744218b2..f0b0f90fb 100644
--- a/demos/button/icons.html
+++ b/demos/button/icons.html
@@ -11,38 +11,58 @@
<script src="../../ui/button.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
- $(function() {
- $( "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
- });
- });
+ $( function() {
+ $( ".widget button" ).first()
+ .button()
+ .next().button( {
+ icon: "ui-icon-gear",
+ showLabel: false
+ } ).next().button( {
+ icon: "ui-icon-gear"
+ } ).next().button( {
+ icon: "ui-icon-gear",
+ iconPosition: "end"
+ } ).next().button( {
+ icon: "ui-icon-gear",
+ iconPosition: "top"
+ } ).next().button( {
+ icon: "ui-icon-gear",
+ iconPosition: "bottom"
+ } );
+ } );
</script>
</head>
<body>
-
-<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 class="widget">
+ <h1>Widget</h1>
+ <button>Button with only text</button>
+ <button>Button with icon only</button>
+ <button>Button with icon on the left</button>
+ <button>Button with icon on the right</button>
+ <button>Button with icon on the top</button>
+ <button>Button with icon on the bottom</button>
+</div>
+<div class="css">
+ <h1>CSS</h1>
+ <button class="ui-button ui-widget ui-corner-all">
+ Button with only text
+ </button>
+ <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">
+ <span class="ui-icon ui-icon-gear"></span> Button with icon on the left
+ </button>
+ <button class="ui-button ui-widget ui-corner-all">
+ Button with icon on the right <span class="ui-icon ui-icon-gear"></span>
+ </button>
+ <button class="ui-button ui-widget ui-corner-all">
+ <span class="ui-icon ui-icon-gear ui-widget-icon-block"></span> Button with icon on the top
+ </button>
+ <button class="ui-button ui-widget ui-corner-all">
+ Button with icon on the bottom <span class="ui-icon ui-icon-gear ui-widget-icon-block"></span>
+ </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
index 5e1b8b7b3..55eacffd8 100644
--- 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
deleted file mode 100644
index 86c55a39a..000000000
--- a/demos/button/radio.html
+++ /dev/null
@@ -1,33 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery UI Button - Radios</title>
- <link rel="stylesheet" href="../../themes/base/all.css">
- <script src="../../external/jquery/jquery.js"></script>
- <script src="../../ui/core.js"></script>
- <script src="../../ui/widget.js"></script>
- <script src="../../ui/button.js"></script>
- <link rel="stylesheet" href="../demos.css">
- <script>
- $(function() {
- $( "#radio" ).buttonset();
- });
- </script>
-</head>
-<body>
-
-<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 class="demo-description">
-<p>A set of three radio buttons transformed into a button set.</p>
-</div>
-</body>
-</html>
generated by cgit v1.2.3 (git 2.39.1) at 2025-03-13 17:49:44 +0000