diff options
Diffstat (limited to 'demos/controlgroup/toolbar.html')
| -rw-r--r-- | demos/controlgroup/toolbar.html | 277 |
1 files changed, 277 insertions, 0 deletions
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> |