/usr/share/doc/libjs-jquery-ui-docs/examples/controlgroup/toolbar.html

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Controlgroup - Toolbar</title>
	<link rel="stylesheet" href="/usr/share/javascript/jquery-ui/themes/base/jquery-ui.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="/usr/lib/nodejs/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>
libjs-jquery-ui-docs 1.12.1+dfsg-4 / usr / share / doc / libjs-jquery-ui-docs / examples / controlgroup / toolbar.html
