diff options
Diffstat (limited to 'include/jquery_ui/development-bundle/demos/button')
7 files changed, 375 insertions, 0 deletions
diff --git a/include/jquery_ui/development-bundle/demos/button/checkbox.html b/include/jquery_ui/development-bundle/demos/button/checkbox.html new file mode 100644 index 000000000..dffc9bf93 --- /dev/null +++ b/include/jquery_ui/development-bundle/demos/button/checkbox.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Button - Checkboxes</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.7.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(); + }); + </script> + <style> + #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> + +</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/include/jquery_ui/development-bundle/demos/button/default.html b/include/jquery_ui/development-bundle/demos/button/default.html new file mode 100644 index 000000000..60d2674c0 --- /dev/null +++ b/include/jquery_ui/development-bundle/demos/button/default.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <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.7.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() { + $( "input:submit, a, button", ".demo" ).button(); + $( "a", ".demo" ).click(function() { return false; }); + }); + </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 --> + +</body> +</html> diff --git a/include/jquery_ui/development-bundle/demos/button/icons.html b/include/jquery_ui/development-bundle/demos/button/icons.html new file mode 100644 index 000000000..b6cd4c599 --- /dev/null +++ b/include/jquery_ui/development-bundle/demos/button/icons.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Button - Icons</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.7.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({ + 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 --> + +</body> +</html> diff --git a/include/jquery_ui/development-bundle/demos/button/index.html b/include/jquery_ui/development-bundle/demos/button/index.html new file mode 100644 index 000000000..23977c820 --- /dev/null +++ b/include/jquery_ui/development-bundle/demos/button/index.html @@ -0,0 +1,23 @@ +<!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> + +</body> +</html> diff --git a/include/jquery_ui/development-bundle/demos/button/radio.html b/include/jquery_ui/development-bundle/demos/button/radio.html new file mode 100644 index 000000000..2f0dc8fb8 --- /dev/null +++ b/include/jquery_ui/development-bundle/demos/button/radio.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Button - Radios</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.7.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(); + }); + </script> +</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> + +</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/include/jquery_ui/development-bundle/demos/button/splitbutton.html b/include/jquery_ui/development-bundle/demos/button/splitbutton.html new file mode 100644 index 000000000..43302300b --- /dev/null +++ b/include/jquery_ui/development-bundle/demos/button/splitbutton.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <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.7.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" ) + .button() + .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(); + }); + </script> + <style> + + </style> +</head> +<body> + +<div class="demo"> + +<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> +</div><!-- End demo-description --> + +</body> +</html> diff --git a/include/jquery_ui/development-bundle/demos/button/toolbar.html b/include/jquery_ui/development-bundle/demos/button/toolbar.html new file mode 100644 index 000000000..2902b8110 --- /dev/null +++ b/include/jquery_ui/development-bundle/demos/button/toolbar.html @@ -0,0 +1,120 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Button - Toolbar</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.7.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> + $(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" + } + }) + .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" + } + }) + .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 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> + +</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> |