diff options
author | Felix Nagel <info@felixnagel.com> | 2015-12-02 18:20:54 +0100 |
---|---|---|
committer | Felix Nagel <info@felixnagel.com> | 2015-12-02 18:30:05 +0100 |
commit | c10ef0a170218ae64abaee54518b09068eadb51e (patch) | |
tree | 8ff6c9cb8e0f4a8846a3b272a26e65fef946ae3c /demos | |
parent | 7ed45541096b58c56c4fc40b1a0ca9c10b2fe229 (diff) | |
parent | 6c738d961d9918f75a3043a49ab21ac79bca45ae (diff) | |
download | jquery-ui-c10ef0a170218ae64abaee54518b09068eadb51e.tar.gz jquery-ui-c10ef0a170218ae64abaee54518b09068eadb51e.zip |
Merge branch 'master' into datepicker
Diffstat (limited to 'demos')
26 files changed, 825 insertions, 315 deletions
diff --git a/demos/bootstrap.js b/demos/bootstrap.js index 602afa3e7..0a109ef9e 100644 --- a/demos/bootstrap.js +++ b/demos/bootstrap.js @@ -31,6 +31,8 @@ var widgets = [ "autocomplete", "button", "calendar", + "checkboxradio", + "controlgroup", "datepicker", "dialog", "draggable", @@ -113,7 +115,7 @@ require( modules, function() { document.documentElement.className = ""; newScript.text = "( function() { " + script.innerHTML + " } )();"; - document.head.appendChild( newScript ).parentNode.removeChild( newScript ); + document.body.appendChild( newScript ).parentNode.removeChild( newScript ); } ); } )(); 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> diff --git a/demos/checkboxradio/default.html b/demos/checkboxradio/default.html new file mode 100644 index 000000000..064967c12 --- /dev/null +++ b/demos/checkboxradio/default.html @@ -0,0 +1,63 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Checkboxradio - Default functionality</title> + <link rel="stylesheet" href="../../themes/base/all.css"> + <link rel="stylesheet" href="../demos.css"> + <script src="../../external/requirejs/require.js"></script> + <script src="../bootstrap.js"> + $( "input" ).checkboxradio(); + </script> +</head> +<body> +<div class="widget"> + <h1>Checkbox and radio button widgets</h1> + + <h2>Radio Group</h2> + <fieldset> + <legend>Select a Location: </legend> + <label for="radio-1">New York</label> + <input type="radio" name="radio-1" id="radio-1"> + <label for="radio-2">Paris</label> + <input type="radio" name="radio-1" id="radio-2"> + <label for="radio-3">London</label> + <input type="radio" name="radio-1" id="radio-3"> + </fieldset> + + <h2>Checkbox</h2> + <fieldset> + <legend>Hotel Ratings: </legend> + <label for="checkbox-1">2 Star</label> + <input type="checkbox" name="checkbox-1" id="checkbox-1"> + <label for="checkbox-2">3 Star</label> + <input type="checkbox" name="checkbox-2" id="checkbox-2"> + <label for="checkbox-3">4 Star</label> + <input type="checkbox" name="checkbox-3" id="checkbox-3"> + <label for="checkbox-4">5 Star</label> + <input type="checkbox" name="checkbox-4" id="checkbox-4"> + </fieldset> + + <h2>Checkbox nested in label</h2> + <fieldset> + <legend>Bed Type: </legend> + <label for="checkbox-nested-1">2 Double + <input type="checkbox" name="checkbox-nested-1" id="checkbox-nested-1"> + </label> + <label for="checkbox-nested-2">2 Queen + <input type="checkbox" name="checkbox-nested-2" id="checkbox-nested-2"> + </label> + <label for="checkbox-nested-3">1 Queen + <input type="checkbox" name="checkbox-nested-3" id="checkbox-nested-3"> + </label> + <label for="checkbox-nested-4">1 King + <input type="checkbox" name="checkbox-nested-4" id="checkbox-nested-4"> + </label> + </fieldset> +</div> + +<div class="demo-description"> + <p>Examples of the markup that can be used with checkboxes and radio buttons.</p> +</div> +</body> +</html> diff --git a/demos/checkboxradio/images/jquery-mobile.png b/demos/checkboxradio/images/jquery-mobile.png Binary files differnew file mode 100644 index 000000000..fe2c36376 --- /dev/null +++ b/demos/checkboxradio/images/jquery-mobile.png diff --git a/demos/checkboxradio/images/jquery-ui.png b/demos/checkboxradio/images/jquery-ui.png Binary files differnew file mode 100644 index 000000000..651e2e115 --- /dev/null +++ b/demos/checkboxradio/images/jquery-ui.png diff --git a/demos/checkboxradio/images/jquery.png b/demos/checkboxradio/images/jquery.png Binary files differnew file mode 100644 index 000000000..ff3fdc21d --- /dev/null +++ b/demos/checkboxradio/images/jquery.png diff --git a/demos/checkboxradio/images/qunit.png b/demos/checkboxradio/images/qunit.png Binary files differnew file mode 100644 index 000000000..048bcfddb --- /dev/null +++ b/demos/checkboxradio/images/qunit.png diff --git a/demos/checkboxradio/images/sizzle.png b/demos/checkboxradio/images/sizzle.png Binary files differnew file mode 100644 index 000000000..6145cd8ec --- /dev/null +++ b/demos/checkboxradio/images/sizzle.png diff --git a/demos/checkboxradio/index.html b/demos/checkboxradio/index.html new file mode 100644 index 000000000..08e598dbc --- /dev/null +++ b/demos/checkboxradio/index.html @@ -0,0 +1,18 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <title>jQuery UI Checkboxradio Demos</title> +</head> +<body> + +<ul> + <li><a href="default.html">Default functionality</a></li> + <li><a href="no-icons.html">No icons</a></li> + <li><a href="radiogroup.html">Radiogroup</a></li> + <li><a href="product-selector.html">Product Selector</a></li> +</ul> + +</body> +</html> diff --git a/demos/checkboxradio/no-icons.html b/demos/checkboxradio/no-icons.html new file mode 100644 index 000000000..bcff28dcd --- /dev/null +++ b/demos/checkboxradio/no-icons.html @@ -0,0 +1,65 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Checkboxradio - No Icons</title> + <link rel="stylesheet" href="../../themes/base/all.css"> + <link rel="stylesheet" href="../demos.css"> + <script src="../../external/requirejs/require.js"></script> + <script src="../bootstrap.js"> + $( "input" ).checkboxradio({ + icon: false + }); + </script> +</head> +<body> +<div class="widget"> + <h1>Checkbox and radio button widgets</h1> + + <h2>Radio Group</h2> + <fieldset> + <legend>Select a Location: </legend> + <label for="radio-1">New York</label> + <input type="radio" name="radio-1" id="radio-1"> + <label for="radio-2">Paris</label> + <input type="radio" name="radio-1" id="radio-2"> + <label for="radio-3">London</label> + <input type="radio" name="radio-1" id="radio-3"> + </fieldset> + + <h2>Checkbox</h2> + <fieldset> + <legend>Hotel Ratings: </legend> + <label for="checkbox-1">2 Star</label> + <input type="checkbox" name="checkbox-1" id="checkbox-1"> + <label for="checkbox-2">3 Star</label> + <input type="checkbox" name="checkbox-2" id="checkbox-2"> + <label for="checkbox-3">4 Star</label> + <input type="checkbox" name="checkbox-3" id="checkbox-3"> + <label for="checkbox-4">5 Star</label> + <input type="checkbox" name="checkbox-4" id="checkbox-4"> + </fieldset> + + <h2>Checkbox nested in label</h2> + <fieldset> + <legend>Bed Type: </legend> + <label for="checkbox-nested-1">2 Double + <input type="checkbox" name="checkbox-nested-1" id="checkbox-nested-1"> + </label> + <label for="checkbox-nested-2">2 Queen + <input type="checkbox" name="checkbox-nested-2" id="checkbox-nested-2"> + </label> + <label for="checkbox-nested-3">1 Queen + <input type="checkbox" name="checkbox-nested-3" id="checkbox-nested-3"> + </label> + <label for="checkbox-nested-4">1 King + <input type="checkbox" name="checkbox-nested-4" id="checkbox-nested-4"> + </label> + </fieldset> +</div> + +<div class="demo-description"> + <p>Examples of the markup that can be used with checkboxes and radio buttons, here showing both without icons.</p> +</div> +</body> +</html> diff --git a/demos/checkboxradio/product-selector.html b/demos/checkboxradio/product-selector.html new file mode 100644 index 000000000..c78c51657 --- /dev/null +++ b/demos/checkboxradio/product-selector.html @@ -0,0 +1,138 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Checkboxradio - Product Selector</title> + <link rel="stylesheet" href="../../themes/base/all.css"> + <link rel="stylesheet" href="../demos.css"> + <script src="../../external/requirejs/require.js"></script> + <script src="../bootstrap.js" data-modules="controlgroup"> + function handleShape( e ) { + $( ".shape" ) + .removeClass( "circle pill square rectangle" ) + .addClass( $( e.target ).val() ); + }; + function handleToggle( e ) { + var target = $( e.target ); + + if ( target.is( ".brand-toggle" ) ) { + var checked = target.is( ":checked" ), + value = $( "[name='brand']" ) + .filter( ":checked" ) + .attr( "data-" + target[ 0 ].id ) + $( ".shape" ).css( target[ 0 ].id, checked ? value : "" ); + } else { + $( ".shape" ).toggleClass( target[ 0 ].id, target.is( ":checked") ); + } + } + function updateBrand() { + handleShape( { target: $( "[name='shape']:checked" ) } ); + $( ".toggle:checked" ).each( function() { + handleToggle( { target: $( this ) } ); + } ); + } + + // Initalize widgets + $( "input" ).checkboxradio(); + $( ".shape-bar, .brand" ).controlgroup(); + $( ".toggles" ).controlgroup( { + direction: "vertical" + } ); + + // Bind event handlers + $( "[name='shape']").on( "change", handleShape ); + $( ".toggle" ).on( "change", handleToggle ); + $( "[name='brand']").on( "change", updateBrand ); + + // Set initial values + updateBrand(); + </script> + <style> + .shape { + margin-left: 4em; + margin-top: 2.5em; + height: 8em; + width: 8em; + box-shadow: 4px 4px 8px; + color: #ccc; + background-repeat: no-repeat; + background-size: 90%; + background-position: 50%; + } + .circle, .pill { + border-radius: 8em; + } + .pill, .rectangle { + width: 16em; + } + .square, .circle { + margin-left: 9em; + } + .border { + border: 2px solid #333333; + } + .toggles { + width: 200px; + } + .toggle-wrap, .shape { + display: inline-block; + vertical-align: top; + } + .controls { + background: #ccc; + padding: 1em; + display: inline-block; + } + </style> +</head> +<body> +<div class="controls"> + <div class="brand-wrap"> + <h3>1.) Select a brand</h3> + <div class="brand"> + <label for="brand-jquery">jQuery</label> + <input type="radio" name="brand" id="brand-jquery" data-background-color="#0769AD" data-color="#7ACEF4" data-background-image="url(images/jquery.png)"> + <label for="brand-jquery-ui">jQuery UI</label> + <input type="radio" name="brand" id="brand-jquery-ui" data-background-color="#B24926" data-color="#FAA523" data-background-image="url(images/jquery-ui.png)" checked> + <label for="brand-jquery-mobile">jQuery Mobile</label> + <input type="radio" name="brand" id="brand-jquery-mobile" data-background-color="#108040" data-color="#3EB249" data-background-image="url(images/jquery-mobile.png)"> + <label for="brand-sizzle">Sizzle</label> + <input type="radio" name="brand" id="brand-sizzle" data-background-color="#9A1B1E" data-color="#FAA523" data-background-image="url(images/sizzle.png)"> + <label for="brand-qunit">QUnit</label> + <input type="radio" name="brand" id="brand-qunit" data-background-color="#390F39" data-color="#9C3493" data-background-image="url(images/qunit.png)"> + </div> + </div> + <div class="shape-wrap"> + <h3>2.) Select a shape</h3> + <div class="shape-bar"> + <label for="shape-circle">Circle</label> + <input type="radio" name="shape" id="shape-circle" value="circle" checked> + <label for="shape-square">Square</label> + <input type="radio" name="shape" id="shape-square" value="square"> + <label for="shape-pill">Pill</label> + <input type="radio" name="shape" id="shape-pill" value="pill"> + <label for="shape-rectangle">Rectangle</label> + <input type="radio" name="shape" id="shape-rectangle" value="rectangle"> + </div> + </div> + <div class="toggle-wrap"> + <h3>3.) Customize</h3> + <div class="toggles"> + <label for="color">Shadow</label> + <input class="toggle brand-toggle" type="checkbox" name="color" id="color"> + <label for="border">Border</label> + <input class="toggle" type="checkbox" name="border" id="border"> + <label for="background-color">Background</label> + <input class="toggle brand-toggle" type="checkbox" name="background-color" id="background-color" checked> + <label for="background-image">Background Image</label> + <input class="toggle brand-toggle" type="checkbox" name="background-image" id="background-image" checked> + </div> + </div> + <div class="shape circle background jquery-ui"></div> +</div> + +<div class="demo-description"> +<p>Using two sets of radio buttons, as horizontal controlgroups, and one group of checkboxes, as a vertical controlgroup, to implement a product selector.</p> +</div> +</body> +</html> diff --git a/demos/checkboxradio/radiogroup.html b/demos/checkboxradio/radiogroup.html new file mode 100644 index 000000000..a8f808c11 --- /dev/null +++ b/demos/checkboxradio/radiogroup.html @@ -0,0 +1,33 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Checkboxradio - Radio Group</title> + <link rel="stylesheet" href="../../themes/base/all.css"> + <link rel="stylesheet" href="../demos.css"> + <script src="../../external/requirejs/require.js"></script> + <script src="../bootstrap.js" data-modules="controlgroup"> + $( "input" ).checkboxradio(); + $( "fieldset" ).controlgroup(); + </script> +</head> +<body> +<div class="widget"> + + <h2>Radio Group</h2> + <fieldset> + <legend>Select a Location: </legend> + <label for="radio-1">New York</label> + <input type="radio" name="radio-1" id="radio-1"> + <label for="radio-2">Paris</label> + <input type="radio" name="radio-1" id="radio-2"> + <label for="radio-3">London</label> + <input type="radio" name="radio-1" id="radio-3"> + </fieldset> +</div> + +<div class="demo-description"> +<p>Example markup using the controlgroup widget to create a radio group.</p> +</div> +</body> +</html> diff --git a/demos/controlgroup/default.html b/demos/controlgroup/default.html new file mode 100644 index 000000000..0c26bd6cd --- /dev/null +++ b/demos/controlgroup/default.html @@ -0,0 +1,86 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Controlgroup - Default Functionality</title> + <link rel="stylesheet" href="../../themes/base/all.css"> + <link rel="stylesheet" href="../demos.css"> + <style> + .ui-controlgroup-vertical { + width: 150px; + } + .ui-controlgroup.ui-controlgroup-vertical > button.ui-button, + .ui-controlgroup.ui-controlgroup-vertical > .ui-controlgroup-label { + text-align: center; + } + #car-type-button { + width: 120px; + } + .ui-controlgroup-horizontal .ui-spinner-input { + width: 20px; + } + </style> + <script src="../../external/requirejs/require.js"></script> + <script src="../bootstrap.js" data-modules="button checkboxradio selectmenu spinner"> + $( ".controlgroup" ).controlgroup() + $( ".controlgroup-vertical" ).controlgroup({ + "direction": "vertical" + }); + </script> +</head> +<body> +<div class="widget"> + <h1>Controlgroup</h1> + <fieldset> + <legend>Rental Car</legend> + <div class="controlgroup"> + <select id="car-type"> + <option>Compact car</option> + <option>Midsize car</option> + <option>Full size car</option> + <option>SUV</option> + <option>Luxury</option> + <option>Truck</option> + <option>Van</option> + </select> + <label for="transmission-standard">Standard</label> + <input type="radio" name="transmission" id="transmission-standard"> + <label for="transmission-automatic">Automatic</label> + <input type="radio" name="transmission" id="transmission-automatic"> + <label for="insurance">Insurance</label> + <input type="checkbox" name="insurance" id="insurance"> + <label for="horizontal-spinner" class="ui-controlgroup-label"># of cars</label> + <input id="horizontal-spinner" class="ui-spinner-input"> + <button>Book Now!</button> + </div> + </fieldset> + <br/> + <fieldset> + <legend>Rental Car</legend> + <div class="controlgroup-vertical"> + <select> + <option>Compact car</option> + <option>Midsize car</option> + <option>Full size car</option> + <option>SUV</option> + <option>Luxury</option> + <option>Truck</option> + <option>Van</option> + </select> + <label for="transmission-standard-v">Standard</label> + <input type="radio" name="transmission-v" id="transmission-standard-v"> + <label for="transmission-automatic-v">Automatic</label> + <input type="radio" name="transmission-v" id="transmission-automatic-v"> + <label for="insurance-v">Insurance</label> + <input type="checkbox" name="insurance" id="insurance-v"> + <label for="vertical-spinner" class="ui-controlgroup-label"># of cars</label> + <input id="vertical-spinner" class="ui-spinner-input"> + <button>Book Now!</button> + </div> + </fieldset> +</div> +<div class="demo-description"> +<p>A controlgroup featuring various form controls. The first features a horizontal toolbar like orientation, the second is in a space saving vertical orientation for usages like mobile devices and panels.</p> +</div> +</body> +</html> diff --git a/demos/controlgroup/index.html b/demos/controlgroup/index.html new file mode 100644 index 000000000..5aa4f5fd6 --- /dev/null +++ b/demos/controlgroup/index.html @@ -0,0 +1,17 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <title>jQuery UI Controlgroup Demos</title> +</head> +<body> + +<ul> + <li><a href="default.html">Default functionality</a></li> + <li><a href="splitbutton.html">Split Button</a></li> + <li><a href="toolbar.html">Toolbar</a></li> +</ul> + +</body> +</html> diff --git a/demos/controlgroup/splitbutton.html b/demos/controlgroup/splitbutton.html new file mode 100644 index 000000000..ec2b78876 --- /dev/null +++ b/demos/controlgroup/splitbutton.html @@ -0,0 +1,48 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Controlgroup - Split Button</title> + <link rel="stylesheet" href="../../themes/base/all.css"> + <link rel="stylesheet" href="../demos.css"> + <style> + .ui-button-icon-only.demo-splitbutton-select { + width: 1em; + } + </style> + <script src="../../external/requirejs/require.js"></script> + <script src="../bootstrap.js" data-modules="button checkboxradio selectmenu"> + $( "select" ).selectmenu({ + classes: { + "ui-selectmenu-button": "ui-button-icon-only demo-splitbutton-select" + }, + change: function(){ + $( ".output" ).append( "<li>" + this.value + "</li>" ); + } + }); + $( ".controlgroup" ).controlgroup(); + $( "button" ).click(function() { + $( ".output" ).append( "<li>Running Last Action...</li>" ); + }); + </script> +</head> +<body> +<div class="widget"> + <h1>Split button</h1> + <div class="controlgroup"> + <button>Run last option</button> + <select> + <option>Open...</option> + <option>Save</option> + <option>Delete</option> + </select> + </div> + <br/> + <h3>Output:</h3> + <ul class="output"></ul> +</div> +<div class="demo-description"> + <p>A controlgroup creating a split button, by combining a button and a selectmenu. We adjust the classes option on the selectmenu to show only the icon</p> +</div> +</body> +</html> diff --git a/demos/controlgroup/toolbar.html b/demos/controlgroup/toolbar.html new file mode 100644 index 000000000..14f9842c8 --- /dev/null +++ b/demos/controlgroup/toolbar.html @@ -0,0 +1,277 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Controlgroup - Toolbar</title> + <link rel="stylesheet" href="../../themes/base/all.css"> + <link rel="stylesheet" href="../demos.css"> + <style> + #zoom-button { + width: 55px; + } + #fontname-button, + #fontsize-button { + width: 45px; + } + #forecolor-button { + width: 50px; + } + #hilitecolor-button { + width: 70px; + } + #bold { + font-weight: bold; + } + #italic { + font-style: italic; + } + #underline { + text-decoration: underline; + } + .toolbar { + font-size: .75em; + } + #page { + width: 440px; + left: 50%; + position: relative; + margin-left: -226px; + height: 450px; + border: 1px solid #888; + box-shadow: 7px 7px 3px #ccc; + font-size: 11px; + font-family: "Lucida Grande"; + zoom: 100%; + padding: 5px; + white-space: pre-line; + overflow: scroll; + } + .wrap { + width: 588px; + } + </style> + <script src="../../external/requirejs/require.js"></script> + <script src="../bootstrap.js" data-modules="button checkboxradio selectmenu"> + var page = $( "#page" ); + var basicControls = [ "#print", "#bold", "#italic", "#undo", "#redo" ]; + var valueControls = [ "#fontsize", "#forecolor", "#hilitecolor", "#backcolor", "fontname" ]; + + $( "#print" ).button({ + "icon": "ui-icon-print", + "showLabel": false + }); + $( "#redo" ).button({ + "icon": "ui-icon-arrowreturnthick-1-e", + "showLabel": false + }); + $( "#undo" ).button({ + "icon": "ui-icon-arrowreturnthick-1-w", + "showLabel": false + }); + + $( ".toolbar" ).controlgroup(); + $( "#zoom" ).on( "selectmenuchange", function() { + page.css({ "zoom": $( this ).val() }); + }) + $( basicControls.concat( valueControls ).join( ", " ) ).on( "click change selectmenuchange", + function() { + document.execCommand( + this.id, + false, + $( this ).val() + ); + } ); + $( "form" ).on( "submit", function( event ) { + event.preventDefault(); + }); + </script> +</head> +<body> +<div class="wrap"> + <div class="toolbar"> + <button id="print">Print</button> + <button id="undo">Undo</button> + <button id="redo">Redo</button> + <select id="zoom"> + <option selected disabled>Zoom</option> + <option>50%</option> + <option>75%</option> + <option>90%</option> + <option>100%</option> + <option>125%</option> + <option>150%</option> + <option>200%</option> + </select> + <select id="fontname"> + <option selected disabled>Font</option> + <option>Arial</option> + <option>Comic Sans MS</option> + <option>Courier New</option> + <option>Georgia</option> + <option>Impact</option> + <option>Lucida Grande</option> + <option>Times New Roman</option> + <option>Verdana</option> + </select> + <select id="fontsize"> + <option selected disabled>Size</option> + <option value="1">8px</option> + <option value="2">9px</option> + <option value="3">10px</option> + <option value="4">11px</option> + <option value="5">12px</option> + <option value="6">14px</option> + <option value="7">18px</option> + <option value="8">24px</option> + <option value="9">30px</option> + <option value="10">36px</option> + </select> + <select id="hilitecolor" title="Background color"> + <option selected disabled>Highlight</option> + <option value="white">None</option> + <option value="red">Red</option> + <option value="yellow">Yellow</option> + <option value="green">Green</option> + <option value="blue">Blue</option> + <option value="grey">Grey</option> + <option value="purple">Purple</option> + <option value="orange">Orange</option> + </select> + <select id="forecolor" title="Color"> + <option selected disabled>Color</option> + <option value="black">Black</option> + <option value="white">White</option> + <option value="red">Red</option> + <option value="yellow">Yellow</option> + <option value="green">Green</option> + <option value="blue">Blue</option> + <option value="#ccc">Grey</option> + <option value="purple">Purple</option> + <option value="orange">Orange</option> + </select> + <button id="bold">B</button> + <button id="italic">I</button> + <button id="underline">U</button> + + </div> + <pre id="page" contenteditable='true'> + The Rime of the Ancient Mariner (text of 1834) + BY SAMUEL TAYLOR COLERIDGE + Argument + + How a Ship having passed the Line was driven by storms to the cold Country towards the South Pole; + and how from thence she made her course to the tropical Latitude of the Great Pacific Ocean; and + of the strange things that befell; and in what manner the Ancyent Marinere came back to his own + Country. + + PART I + It is an ancient Mariner, + And he stoppeth one of three. + 'By thy long grey beard and glittering eye, + Now wherefore stopp'st thou me? + + The Bridegroom's doors are opened wide, + And I am next of kin; + The guests are met, the feast is set: + May'st hear the merry din.' + + He holds him with his skinny hand, + 'There was a ship,' quoth he. + 'Hold off! unhand me, grey-beard loon!' + Eftsoons his hand dropt he. + + He holds him with his glittering eye— + The Wedding-Guest stood still, + And listens like a three years' child: + The Mariner hath his will. + + The Wedding-Guest sat on a stone: + He cannot choose but hear; + And thus spake on that ancient man, + The bright-eyed Mariner. + + 'The ship was cheered, the harbour cleared, + Merrily did we drop + Below the kirk, below the hill, + Below the lighthouse top. + + The Sun came up upon the left, + Out of the sea came he! + And he shone bright, and on the right + Went down into the sea. + + Higher and higher every day, + Till over the mast at noon—' + The Wedding-Guest here beat his breast, + For he heard the loud bassoon. + + The bride hath paced into the hall, + Red as a rose is she; + Nodding their heads before her goes + The merry minstrelsy. + + The Wedding-Guest he beat his breast, + Yet he cannot choose but hear; + And thus spake on that ancient man, + The bright-eyed Mariner. + + And now the STORM-BLAST came, and he + Was tyrannous and strong: + He struck with his o'ertaking wings, + And chased us south along. + + With sloping masts and dipping prow, + As who pursued with yell and blow + Still treads the shadow of his foe, + And forward bends his head, + The ship drove fast, loud roared the blast, + And southward aye we fled. + + And now there came both mist and snow, + And it grew wondrous cold: + And ice, mast-high, came floating by, + As green as emerald. + + And through the drifts the snowy clifts + Did send a dismal sheen: + Nor shapes of men nor beasts we ken— + The ice was all between. + + The ice was here, the ice was there, + The ice was all around: + It cracked and growled, and roared and howled, + Like noises in a swound! + + At length did cross an Albatross, + Thorough the fog it came; + As if it had been a Christian soul, + We hailed it in God's name. + + It ate the food it ne'er had eat, + And round and round it flew. + The ice did split with a thunder-fit; + The helmsman steered us through! + + And a good south wind sprung up behind; + The Albatross did follow, + And every day, for food or play, + Came to the mariner's hollo! + + In mist or cloud, on mast or shroud, + It perched for vespers nine; + Whiles all the night, through fog-smoke white, + Glimmered the white Moon-shine.' + + 'God save thee, ancient Mariner! + From the fiends, that plague thee thus!— + Why look'st thou so?'—With my cross-bow + I shot the ALBATROSS. + </pre> +</div> +<div class="demo-description"> + <p>A sample editor toolbar</p> + <p>Highlight text and edit it using the buttons and dropdowns in the toolbar.</p> + <p class="warning">Remember: This is only a demo and shouldn't be used for anything in production. Use a proper editor like <a href="http://prosemirror.net/">ProseMirror</a> instead. +</div> +</body> +</html> diff --git a/demos/draggable/constrain-movement.html b/demos/draggable/constrain-movement.html index c6c7c6430..5b5c9cd9e 100644 --- a/demos/draggable/constrain-movement.html +++ b/demos/draggable/constrain-movement.html @@ -20,7 +20,7 @@ $( "#draggable2" ).draggable({ axis: "x" }); $( "#draggable3" ).draggable({ containment: "#containment-wrapper", scroll: false }); - $( "#draggable5" ).draggable({ containment: "parent" }); + $( "#draggable4" ).draggable({ containment: "parent" }); </script> </head> <body> @@ -42,7 +42,7 @@ </div> <div class="draggable ui-widget-content"> - <p id="draggable5" class="ui-widget-header">I'm contained within my parent</p> + <p id="draggable4" class="ui-widget-header">I'm contained within my parent</p> </div> </div> diff --git a/demos/index.html b/demos/index.html index c4a0fdf95..b9d2f4e79 100644 --- a/demos/index.html +++ b/demos/index.html @@ -12,6 +12,8 @@ <li><a href="autocomplete/">autocomplete</a></li> <li><a href="button/">button</a></li> <li><a href="calendar/">calendar</a></li> + <li><a href="checkboxradio/">checkboxradio</a></li> + <li><a href="controlgroup/">controlgroup</a></li> <li><a href="datepicker/">datepicker</a></li> <li><a href="dialog/">dialog</a></li> <li><a href="draggable/">draggable</a></li> diff --git a/demos/tooltip/video-player.html b/demos/tooltip/video-player.html index cbcce3db0..e1ebac24f 100644 --- a/demos/tooltip/video-player.html +++ b/demos/tooltip/video-player.html @@ -35,7 +35,7 @@ } </style> <script src="../../external/requirejs/require.js"></script> - <script src="../bootstrap.js" data-modules="button menu effect effect-blind"> + <script src="../bootstrap.js" data-modules="button controlgroup menu effect effect-blind"> function notify( input ) { var msg = "Selected " + $.trim( input.data( "tooltip-title" ) || input.text() ); $( "<div>" ) @@ -70,8 +70,10 @@ notify( button ); }); }); - $( ".set" ).buttonset({ - items: "button" + $( ".set" ).controlgroup({ + items: { + "button" : "button" + } }); $( "button.menu" ) diff --git a/demos/widget/default.html b/demos/widget/default.html index 59bc58d12..0f62bb968 100644 --- a/demos/widget/default.html +++ b/demos/widget/default.html @@ -166,6 +166,7 @@ <div class="demo-description"> <p>This demo shows a simple custom widget built using the widget factory (jquery.ui.widget.js).</p> <p>The three boxes are initialized in different ways. Clicking them changes their background color. View source to see how it works, its heavily commented</p> +<p>To learn more about the widget factory, <a href="http://learn.jquery.com/jquery-ui/widget-factory/">visit learn.jquery.com</a>.</p> </div> </body> </html> |