diff options
Diffstat (limited to 'demos/controlgroup')
| -rw-r--r-- | demos/controlgroup/default.html | 90 | ||||
| -rw-r--r-- | demos/controlgroup/index.html | 17 | ||||
| -rw-r--r-- | demos/controlgroup/splitbutton.html | 58 | ||||
| -rw-r--r-- | demos/controlgroup/toolbar.html | 256 |
4 files changed, 421 insertions, 0 deletions
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> |