diff options
Diffstat (limited to 'apps/it/static/js/ui/demos/button')
| -rw-r--r-- | apps/it/static/js/ui/demos/button/checkbox.html | 37 | ||||
| -rw-r--r-- | apps/it/static/js/ui/demos/button/default.html | 34 | ||||
| -rw-r--r-- | apps/it/static/js/ui/demos/button/icons.html | 49 | ||||
| -rw-r--r-- | apps/it/static/js/ui/demos/button/index.html | 19 | ||||
| -rw-r--r-- | apps/it/static/js/ui/demos/button/radio.html | 32 | ||||
| -rw-r--r-- | apps/it/static/js/ui/demos/button/splitbutton.html | 69 | ||||
| -rw-r--r-- | apps/it/static/js/ui/demos/button/toolbar.html | 118 |
7 files changed, 358 insertions, 0 deletions
diff --git a/apps/it/static/js/ui/demos/button/checkbox.html b/apps/it/static/js/ui/demos/button/checkbox.html new file mode 100644 index 0000000..704ae1e --- /dev/null +++ b/apps/it/static/js/ui/demos/button/checkbox.html @@ -0,0 +1,37 @@ +<!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.10.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> + +<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/apps/it/static/js/ui/demos/button/default.html b/apps/it/static/js/ui/demos/button/default.html new file mode 100644 index 0000000..2318ecc --- /dev/null +++ b/apps/it/static/js/ui/demos/button/default.html @@ -0,0 +1,34 @@ +<!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.10.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[type=submit], a, button" ) + .button() + .click(function( event ) { + event.preventDefault(); + }); + }); + </script> +</head> +<body> + +<button>A button element</button> + +<input type="submit" value="A submit button"> + +<a 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> +</div> +</body> +</html> diff --git a/apps/it/static/js/ui/demos/button/icons.html b/apps/it/static/js/ui/demos/button/icons.html new file mode 100644 index 0000000..757a71c --- /dev/null +++ b/apps/it/static/js/ui/demos/button/icons.html @@ -0,0 +1,49 @@ +<!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.10.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: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> + +<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="demo-description"> +<p>Some buttons with various combinations of text and icons.</p> +</div> +</body> +</html> diff --git a/apps/it/static/js/ui/demos/button/index.html b/apps/it/static/js/ui/demos/button/index.html new file mode 100644 index 0000000..7956059 --- /dev/null +++ b/apps/it/static/js/ui/demos/button/index.html @@ -0,0 +1,19 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Button Demos</title> +</head> +<body> + +<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/apps/it/static/js/ui/demos/button/radio.html b/apps/it/static/js/ui/demos/button/radio.html new file mode 100644 index 0000000..1674b7c --- /dev/null +++ b/apps/it/static/js/ui/demos/button/radio.html @@ -0,0 +1,32 @@ +<!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.10.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> + +<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/apps/it/static/js/ui/demos/button/splitbutton.html b/apps/it/static/js/ui/demos/button/splitbutton.html new file mode 100644 index 0000000..faf7f06 --- /dev/null +++ b/apps/it/static/js/ui/demos/button/splitbutton.html @@ -0,0 +1,69 @@ +<!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.10.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> + <script src="../../ui/jquery.ui.position.js"></script> + <script src="../../ui/jquery.ui.menu.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> + .ui-menu { position: absolute; width: 100px; } + </style> + <script> + $(function() { + $( "#rerun" ) + .button() + .click(function() { + alert( "Running the last action" ); + }) + .next() + .button({ + text: false, + icons: { + primary: "ui-icon-triangle-1-s" + } + }) + .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><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> +</body> +</html> diff --git a/apps/it/static/js/ui/demos/button/toolbar.html b/apps/it/static/js/ui/demos/button/toolbar.html new file mode 100644 index 0000000..d5dcb26 --- /dev/null +++ b/apps/it/static/js/ui/demos/button/toolbar.html @@ -0,0 +1,118 @@ +<!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.10.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: 4px; + display: inline-block; + } + /* support: IE7 */ + *+html #toolbar { + display: inline; + } + </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 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> |