aboutsummaryrefslogtreecommitdiffstats
path: root/demos
diff options
context:
space:
mode:
authorAlexander Schmitz <arschmitz@gmail.com>2014-08-28 15:16:51 -0400
committerAlexander Schmitz <arschmitz@gmail.com>2015-10-07 10:57:59 -0400
commit25d0c857188c19347c869f803530289762199f92 (patch)
tree768afcbc456f878fb35e96546f468f9ffaa46b80 /demos
parent02033262ee0fb1d9f33c361b3c2ddfa168604854 (diff)
downloadjquery-ui-25d0c857188c19347c869f803530289762199f92.tar.gz
jquery-ui-25d0c857188c19347c869f803530289762199f92.zip
Checkboxradio: Initial commit of new widget
Diffstat (limited to 'demos')
-rw-r--r--demos/checkboxradio/default.html70
-rw-r--r--demos/checkboxradio/images/jquery-mobile.pngbin0 -> 6296 bytes
-rw-r--r--demos/checkboxradio/images/jquery-ui.pngbin0 -> 7044 bytes
-rw-r--r--demos/checkboxradio/images/jquery.pngbin0 -> 7206 bytes
-rw-r--r--demos/checkboxradio/images/qunit.pngbin0 -> 6740 bytes
-rw-r--r--demos/checkboxradio/images/sizzle.pngbin0 -> 8875 bytes
-rw-r--r--demos/checkboxradio/index.html18
-rw-r--r--demos/checkboxradio/no-icons.html70
-rw-r--r--demos/checkboxradio/product-selector.html127
-rw-r--r--demos/checkboxradio/radiogroup.html39
-rw-r--r--demos/controlgroup/default.html90
-rw-r--r--demos/controlgroup/index.html17
-rw-r--r--demos/controlgroup/splitbutton.html58
-rw-r--r--demos/controlgroup/toolbar.html256
-rw-r--r--demos/index.html1
15 files changed, 746 insertions, 0 deletions
diff --git a/demos/checkboxradio/default.html b/demos/checkboxradio/default.html
new file mode 100644
index 000000000..c8f4c5566
--- /dev/null
+++ b/demos/checkboxradio/default.html
@@ -0,0 +1,70 @@
+<!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">
+ <script src="../../external/jquery/jquery.js"></script>
+ <script src="../../ui/core.js"></script>
+ <script src="../../ui/widget.js"></script>
+ <script src="../../ui/checkboxradio.js"></script>
+ <link rel="stylesheet" href="../demos.css">
+ <script>
+ $(function() {
+ $( "input" ).checkboxradio({
+ label: "foo"
+ });
+ });
+ </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
new file mode 100644
index 000000000..fe2c36376
--- /dev/null
+++ b/demos/checkboxradio/images/jquery-mobile.png
Binary files differ
diff --git a/demos/checkboxradio/images/jquery-ui.png b/demos/checkboxradio/images/jquery-ui.png
new file mode 100644
index 000000000..651e2e115
--- /dev/null
+++ b/demos/checkboxradio/images/jquery-ui.png
Binary files differ
diff --git a/demos/checkboxradio/images/jquery.png b/demos/checkboxradio/images/jquery.png
new file mode 100644
index 000000000..ff3fdc21d
--- /dev/null
+++ b/demos/checkboxradio/images/jquery.png
Binary files differ
diff --git a/demos/checkboxradio/images/qunit.png b/demos/checkboxradio/images/qunit.png
new file mode 100644
index 000000000..048bcfddb
--- /dev/null
+++ b/demos/checkboxradio/images/qunit.png
Binary files differ
diff --git a/demos/checkboxradio/images/sizzle.png b/demos/checkboxradio/images/sizzle.png
new file mode 100644
index 000000000..6145cd8ec
--- /dev/null
+++ b/demos/checkboxradio/images/sizzle.png
Binary files differ
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..64b511246
--- /dev/null
+++ b/demos/checkboxradio/no-icons.html
@@ -0,0 +1,70 @@
+<!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">
+ <script src="../../external/jquery/jquery.js"></script>
+ <script src="../../ui/core.js"></script>
+ <script src="../../ui/widget.js"></script>
+ <script src="../../ui/checkboxradio.js"></script>
+ <link rel="stylesheet" href="../demos.css">
+ <script>
+ $(function() {
+ $( "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> \ No newline at end of file
diff --git a/demos/checkboxradio/product-selector.html b/demos/checkboxradio/product-selector.html
new file mode 100644
index 000000000..f8da07118
--- /dev/null
+++ b/demos/checkboxradio/product-selector.html
@@ -0,0 +1,127 @@
+<!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">
+ <script src="../../external/jquery/jquery.js"></script>
+ <script src="../../ui/core.js"></script>
+ <script src="../../ui/widget.js"></script>
+ <script src="../../ui/checkboxradio.js"></script>
+ <script src="../../ui/controlgroup.js"></script>
+ <link rel="stylesheet" href="../demos.css">
+ <script>
+ $(function() {
+ $( "input" ).checkboxradio();
+ $( "[name='shape']").on( "change", function(){
+ $( ".shape" ).removeClass( "circle pill square rectangle" )
+ .addClass( $( this ).val() );
+ });
+ $( ".toggle" ).on( "change", function(){
+ if ( $( this ).is( ".brand-toggle" ) ) {
+ var checked = $( this ).is( ":checked" ),
+ value = $( "[name='brand']" ).filter( ":checked" ).attr( "data-" + this.id )
+ $( ".shape" ).css( this.id, checked ? value : "" );
+ } else {
+ $( ".shape" ).toggleClass( this.id, $( this ).is( ":checked") );
+ }
+ });
+ $( "[name='brand']").on( "change", function(){
+ $( "input" ).filter( ":checked" ).not( this ).trigger( "change" );
+ });
+ $( "input" ).filter( ":checked" ).trigger( "change" );
+ $( ".shape-bar, .brand" ).controlgroup();
+ $( ".toggles" ).controlgroup({
+ direction: "vertical"
+ });
+ });
+ </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 data-background-color="#0769AD" data-color="#7ACEF4" data-background-image="url(images/jquery.png)" type="radio" name="brand" id="brand-jquery">
+ <label for="brand-jquery-ui">jQuery UI</label>
+ <input data-background-color="#B24926" data-color="#FAA523" data-background-image="url(images/jquery-ui.png)" type="radio" name="brand" id="brand-jquery-ui" checked>
+ <label for="brand-jquery-mobile">jQuery Mobile</label>
+ <input data-background-color="#108040" data-color="#3EB249" data-background-image="url(images/jquery-mobile.png)" type="radio" name="brand" id="brand-jquery-mobile">
+ <label for="brand-sizzle">Sizzle</label>
+ <input data-background-color="#9A1B1E" data-color="#FAA523" data-background-image="url(images/sizzle.png)" type="radio" name="brand" id="brand-sizzle">
+ <label for="brand-qunit">QUnit</label>
+ <input data-background-color="#390F39" data-color="#9C3493" data-background-image="url(images/qunit.png)" type="radio" name="brand" id="brand-qunit">
+ </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..b307db82d
--- /dev/null
+++ b/demos/checkboxradio/radiogroup.html
@@ -0,0 +1,39 @@
+<!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">
+ <script src="../../external/jquery/jquery.js"></script>
+ <script src="../../ui/core.js"></script>
+ <script src="../../ui/widget.js"></script>
+ <script src="../../ui/checkboxradio.js"></script>
+ <script src="../../ui/controlgroup.js"></script>
+ <link rel="stylesheet" href="../demos.css">
+ <script>
+ $(function() {
+ $( "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..9e4bcdd80
--- /dev/null
+++ b/demos/controlgroup/default.html
@@ -0,0 +1,90 @@
+<!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">
+ <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/checkboxradio.js"></script>
+ <script src="../../ui/menu.js"></script>
+ <script src="../../ui/position.js"></script>
+ <script src="../../ui/selectmenu.js"></script>
+ <script src="../../ui/controlgroup.js"></script>
+ <link rel="stylesheet" href="../demos.css">
+ <script>
+ $(function() {
+ $( ".controlgroup" ).eq( 0 ).controlgroup()
+ .end().eq( 1 ).controlgroup({
+ "direction": "vertical"
+ });
+ });
+ </script>
+ <style>
+ .ui-controlgroup-vertical {
+ width: 300px;
+ }
+ .ui-controlgroup-vertical select {
+ width: 100%;
+ }
+ .ui-controlgroup.ui-controlgroup-vertical > button.ui-button {
+ text-align: center;
+ }
+ </style>
+</head>
+<body>
+<div class="demo-description">
+<p>A Controlgroup featuring various form controls</p>
+</div>
+<div class="widget">
+ <h1>Controlgroup</h1>
+ <fieldset>
+ <legend>Rental Car</legend>
+ <div class="controlgroup">
+ <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">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">
+ <button>Book Now!</button>
+ </div>
+ </fieldset>
+ <br/>
+ <fieldset>
+ <legend>Rental Car</legend>
+ <div class="controlgroup-horizontal">
+ <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">
+ <button>Book Now!</button>
+ </div>
+ </fieldset>
+>>>>>>> 423b976... Checkboxradio: Fixed demos and tests
+</div>
+
+</body>
+</html>
diff --git a/demos/controlgroup/index.html b/demos/controlgroup/index.html
new file mode 100644
index 000000000..58e2f7eda
--- /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 Checkboxradio 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..5d4c7b3ce
--- /dev/null
+++ b/demos/controlgroup/splitbutton.html
@@ -0,0 +1,58 @@
+<!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">
+ <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/checkboxradio.js"></script>
+ <script src="../../ui/menu.js"></script>
+ <script src="../../ui/position.js"></script>
+ <script src="../../ui/selectmenu.js"></script>
+ <script src="../../ui/controlgroup.js"></script>
+ <link rel="stylesheet" href="../demos.css">
+ <script>
+ $(function() {
+ $( "select" ).selectmenu({
+ classes: {
+ "ui-selectmenu-button": "ui-button-icon-only"
+ }
+ }).selectmenu( "widget" ).removeClass( "ui-icon-end" );
+ $( ".controlgroup" ).controlgroup();
+ $( "select" ).on( "selectmenuchange", function(){
+ alert( this.value );
+ });
+ $( "button" ).click(function() {
+ alert( "Running the last action" );
+ });
+ });
+ </script>
+ <style>
+ select {
+ width: 2em;
+ }
+ </style>
+</head>
+<body>
+<div class="demo-description">
+<p>A Controlgroup creating a split button</p>
+</div>
+<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>
+</div>
+<div class="demo-description">
+ <p>A Controlgroup creating a split button</p>
+</div>
+</body>
+</html>
diff --git a/demos/controlgroup/toolbar.html b/demos/controlgroup/toolbar.html
new file mode 100644
index 000000000..f90fb3040
--- /dev/null
+++ b/demos/controlgroup/toolbar.html
@@ -0,0 +1,256 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>jQuery UI Controlgroup - 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>
+ <script src="../../ui/checkboxradio.js"></script>
+ <script src="../../ui/menu.js"></script>
+ <script src="../../ui/position.js"></script>
+ <script src="../../ui/selectmenu.js"></script>
+ <script src="../../ui/controlgroup.js"></script>
+ <link rel="stylesheet" href="../demos.css">
+ <script>
+ $(function() {
+ var iframe = $( "<iframe id='display' contenteditable='true'>" ),
+ contents = iframe.appendTo( "body" );
+
+ // Firefox and IE require us to wait for next tick before interacting with the iframe
+ setTimeout(function(){
+
+ contents = contents.contents()
+ contents[ 0 ].designMode = "On";
+ contents[ 0 ].contenteditable = true;
+ contents.find( "body" ).append( $( "#input" ).clone().attr( "id", "output" ) );
+
+ $( "#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
+ });
+ $( "#print, #bold, #italic, #underline, #undo, #redo" ).on( "click", function() {
+ contents[ 0 ].execCommand( this.id );
+ });
+ $( "#fontsize, #forecolor, #hilitecolor, #backcolor, #fontname" ).on( "change selectmenuchange", function() {
+ contents[ 0 ].execCommand( this.id ,false, $( this ).val() );
+ });
+ $( ".toolbar" ).controlgroup();
+ $( "#zoom" ).on( "selectmenuchange", function() {
+ contents.find( "#output" ).css({ "zoom": $( this ).val() });
+ })
+ $( "form" ).on( "submit", function( event ) {
+ return false;
+ });
+ });
+ });
+ </script>
+ <style>
+ #zoom, #fontsize {
+ min-width:75px;
+ }
+ #input {
+ display: none;
+ }
+ #input, #display {
+ width: 98%;
+ height: 300px;
+ border: 2px inset #ccc;
+ font-size: 11px;
+ font-family: "Lucida Grande";
+ zoom: 100%;
+ padding: 5px;
+ }
+ </style>
+</head>
+<body>
+<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>
+</div>
+ <div class="toolbar">
+ <button id="print">Print</button>
+ <button id="undo">Undo</button>
+ <button id="redo">Redo</button>
+ <select id="zoom">
+ <option>50%</option>
+ <option>75%</option>
+ <option>90%</option>
+ <option selected>100%</option>
+ <option>125%</option>
+ <option>150%</option>
+ <option>200%</option>
+ </select>
+ <select id="fontname">
+ <option>Arial</option>
+ <option>Comic Sans MS</option>
+ <option>Courier New</option>
+ <option>Georgia</option>
+ <option>Impact</option>
+ <option selected>Lucida Grande</option>
+ <option>Times New Roman</option>
+ <option>Verdana</option>
+ </select>
+ <select id="fontsize">
+ <option value="1">8px</option>
+ <option value="2">9px</option>
+ <option value="3" selected>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">
+ <option value="white">Highlight: None</option>
+ <option value="red">Highlight: Red</option>
+ <option value="yellow">Highlight: Yellow</option>
+ <option value="green">Highlight: Green</option>
+ <option value="blue">Highlight: Blue</option>
+ <option value="grey">Highlight: Grey</option>
+ <option value="purple">Highlight: Purple</option>
+ <option value="orange">Highlight: Orange</option>
+ </select>
+ <select id="forecolor">
+ <option value="white">Font: None</option>
+ <option value="red">Font: Red</option>
+ <option value="yellow">Font: Yellow</option>
+ <option value="green">Font: Green</option>
+ <option value="blue">Font: Blue</option>
+ <option value="#ccc">Font: Grey</option>
+ <option value="purple">Font: Purple</option>
+ <option value="orange">Font: Orange</option>
+ </select>
+ <button id="bold">B</button>
+ <button id="italic">I</button>
+ <button id="underline">U</button>
+
+ </div>
+ <br/><br/>
+<pre id="input">
+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>
+</body>
+</html>
diff --git a/demos/index.html b/demos/index.html
index f37874a44..4b4d04e06 100644
--- a/demos/index.html
+++ b/demos/index.html
@@ -11,6 +11,7 @@
<li><a href="accordion/">accordion</a></li>
<li><a href="autocomplete/">autocomplete</a></li>
<li><a href="button/">button</a></li>
+ <li><a href="checkboxradio/">checkboxradio</a></li>
<li><a href="datepicker/">datepicker</a></li>
<li><a href="dialog/">dialog</a></li>
<li><a href="draggable/">draggable</a></li>
generated by cgit v1.2.3 (git 2.39.1) at 2024-12-22 23:02:16 +0000