aboutsummaryrefslogtreecommitdiffstats
path: root/demos/button
diff options
context:
space:
mode:
authorFelix Nagel <info@felixnagel.com>2015-12-02 18:20:54 +0100
committerFelix Nagel <info@felixnagel.com>2015-12-02 18:30:05 +0100
commitc10ef0a170218ae64abaee54518b09068eadb51e (patch)
tree8ff6c9cb8e0f4a8846a3b272a26e65fef946ae3c /demos/button
parent7ed45541096b58c56c4fc40b1a0ca9c10b2fe229 (diff)
parent6c738d961d9918f75a3043a49ab21ac79bca45ae (diff)
downloadjquery-ui-c10ef0a170218ae64abaee54518b09068eadb51e.tar.gz
jquery-ui-c10ef0a170218ae64abaee54518b09068eadb51e.zip
Merge branch 'master' into datepicker
Diffstat (limited to 'demos/button')
-rw-r--r--demos/button/checkbox.html38
-rw-r--r--demos/button/default.html33
-rw-r--r--demos/button/icons.html83
-rw-r--r--demos/button/index.html4
-rw-r--r--demos/button/radio.html33
-rw-r--r--demos/button/splitbutton.html70
-rw-r--r--demos/button/toolbar.html115
7 files changed, 67 insertions, 309 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..644dcd225 100644
--- a/demos/button/default.html
+++ b/demos/button/default.html
@@ -5,31 +5,34 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Button - Default functionality</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() {
- $( "input[type=submit], a, button" )
- .button()
- .on( "click", function( event ) {
- event.preventDefault();
- });
- });
+ <script src="../../external/requirejs/require.js"></script>
+ <script src="../bootstrap.js">
+ $( ".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..f3d4a3852 100644
--- a/demos/button/icons.html
+++ b/demos/button/icons.html
@@ -5,44 +5,59 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Button - Icons</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() {
- $( "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
- });
- });
+ <script src="../../external/requirejs/require.js"></script>
+ <script src="../bootstrap.js">
+ $( ".widget button" )
+ .eq( 0 ).button()
+ .end().eq( 1 ).button( {
+ icon: "ui-icon-gear",
+ showLabel: false
+ } ).end().eq( 2 ).button( {
+ icon: "ui-icon-gear"
+ } ).end().eq( 3 ).button( {
+ icon: "ui-icon-gear",
+ iconPosition: "end"
+ } ).end().eq( 4 ).button( {
+ icon: "ui-icon-gear",
+ iconPosition: "top"
+ } ).end().eq( 5 ).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>
diff --git a/demos/button/splitbutton.html b/demos/button/splitbutton.html
deleted file mode 100644
index 6b7562d68..000000000
--- a/demos/button/splitbutton.html
+++ /dev/null
@@ -1,70 +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 - Split button</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>
- <script src="../../ui/position.js"></script>
- <script src="../../ui/menu.js"></script>
- <link rel="stylesheet" href="../demos.css">
- <style>
- .ui-menu { position: absolute; width: 100px; }
- </style>
- <script>
- $(function() {
- $( "#rerun" )
- .button()
- .on( "click", function() {
- alert( "Running the last action" );
- })
- .next()
- .button({
- text: false,
- icons: {
- primary: "ui-icon-triangle-1-s"
- }
- })
- .on( "click", function() {
- var menu = $( this ).parent().next().show().position({
- my: "left top",
- at: "left bottom",
- of: this
- });
- $( document ).one( "click", function() {
- menu.hide();
- });
- return false;
- })
- .parent()
- .buttonset()
- .next()
- .hide()
- .menu();
- });
- </script>
-</head>
-<body>
-
-<div>
- <div>
- <button id="rerun">Run last action</button>
- <button id="select">Select an action</button>
- </div>
- <ul>
- <li><div>Open...</div></li>
- <li><div>Save</div></li>
- <li><div>Delete</div></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>
-</body>
-</html>
diff --git a/demos/button/toolbar.html b/demos/button/toolbar.html
deleted file mode 100644
index f2c242f1f..000000000
--- a/demos/button/toolbar.html
+++ /dev/null
@@ -1,115 +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 - Toolbar</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">
- <style>
- #toolbar {
- padding: 4px;
- display: inline-block;
- }
- </style>
- <script>
- $(function() {
- $( "#beginning" ).button({
- text: false,
- icons: {
- primary: "ui-icon-seek-start"
- }
- });
- $( "#rewind" ).button({
- text: false,
- icons: {
- primary: "ui-icon-seek-prev"
- }
- });
- $( "#play" ).button({
- text: false,
- icons: {
- primary: "ui-icon-play"
- }
- })
- .on( "click", function() {
- var options;
- if ( $( this ).text() === "play" ) {
- options = {
- label: "pause",
- icons: {
- primary: "ui-icon-pause"
- }
- };
- } else {
- options = {
- label: "play",
- icons: {
- primary: "ui-icon-play"
- }
- };
- }
- $( this ).button( "option", options );
- });
- $( "#stop" ).button({
- text: false,
- icons: {
- primary: "ui-icon-stop"
- }
- })
- .on( "click", function() {
- $( "#play" ).button( "option", {
- label: "play",
- icons: {
- primary: "ui-icon-play"
- }
- });
- });
- $( "#forward" ).button({
- text: false,
- icons: {
- primary: "ui-icon-seek-next"
- }
- });
- $( "#end" ).button({
- text: false,
- icons: {
- primary: "ui-icon-seek-end"
- }
- });
- $( "#shuffle" ).button();
- $( "#repeat" ).buttonset();
- });
- </script>
-</head>
-<body>
-
-<div 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>
-</div>
-
-<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>
-</body>
-</html>
generated by cgit v1.2.3 (git 2.39.1) at 2025-07-05 04:07:38 +0000