Merge branch 'master' into datepicker

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/controlgroup
parent: 7ed45541096b58c56c4fc40b1a0ca9c10b2fe229 (diff)
parent: 6c738d961d9918f75a3043a49ab21ac79bca45ae (diff)
download: jquery-ui-c10ef0a170218ae64abaee54518b09068eadb51e.tar.gz
jquery-ui-c10ef0a170218ae64abaee54518b09068eadb51e.zip
4 files changed, 428 insertions, 0 deletions
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>
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/controlgroup
parent	7ed45541096b58c56c4fc40b1a0ca9c10b2fe229 (diff)
parent	6c738d961d9918f75a3043a49ab21ac79bca45ae (diff)
download	jquery-ui-c10ef0a170218ae64abaee54518b09068eadb51e.tar.gz jquery-ui-c10ef0a170218ae64abaee54518b09068eadb51e.zip