123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128 |
- <!DOCTYPE html>
- <html>
-
- <head>
- <title>goog.ui.Textarea</title>
- <script src="../base.js"></script>
- <script>
- goog.require('goog.dom');
- goog.require('goog.events');
- goog.require('goog.events.EventType');
- goog.require('goog.ui.Control');
- goog.require('goog.ui.ControlRenderer');
- goog.require('goog.ui.Textarea');
- goog.require('goog.ui.TextareaRenderer');
- goog.require('goog.userAgent');
- </script>
- <style>
- textarea {
- width: 400px;
- height: 100px;
- padding: 2px;
- }
- fieldset {
- padding: 10px;
- margin: 0 0 1.5em;
- }
- label {
- font-size: 90%;
- }
- #t4 {
- padding-bottom: 3em;
- }
- #t3 {
- filter:progid:DXImageTransform.Microsoft.DropShadow(color='#e7e7e7',
- offX='2',offY='2');
- box-shadow: 2px 2px 0 #e7e7e7;
- -moz-box-shadow: 2px 2px 0 #e7e7e7;
- -webkit-box-shadow: 2px 2px 0 #e7e7e7;
- }
- </style>
- </head>
- <body>
- <h1>goog.ui.Textarea</h1>
- <fieldset>
- <legend>
- The first <strong>Textarea</strong> was created programmatically,
- the second by decorating a <strong><textarea></strong>
- element:
- </legend>
- <div id="t1"></div>
- <label>
- Enable textarea:<input type="checkbox" id="t1_enable" checked="checked">
- </label>
- <br>
- <br>
- <textarea id="t2" disabled>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean sollicitudin ultrices urna. Proin vehicula mauris ac est. Ut scelerisque, risus ut facilisis dictum, est massa lacinia lorem, in fermentum purus ligula quis nunc. Duis porttitor euismod risus. Nam hendrerit lacus vehicula augue. Duis ante. Aliquam tempor adipiscing sem. Duis eget pede. Vivamus facilisis luctus purus. Sed lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis tristique, turpis ac nonummy sagittis, leo erat fermentum leo, in pulvinar sapien dui at dolor. </textarea>
- <br>
- <label>Enable textarea:<input type="checkbox" id="t2_enable"></label>
- <br>
- </fieldset>
- <fieldset>
- <legend>
- This is a textarea with a minHeight set to 200px.
- </legend>
- <textarea id="t3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean sollicitudin ultrices urna. Proin vehicula mauris ac est. Ut scelerisque, risus ut facilisis dictum, est massa lacinia lorem, in fermentum purus ligula quis nunc.</textarea>
- <br>
- <label>minHeight set:<input type="checkbox" id="t3_toggle"
- checked></label>
- <br>
- </fieldset>
- <fieldset>
- <legend>
- This is a textarea with a padding-bottom of 3em.
- </legend>
- <textarea id="t4">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean sollicitudin ultrices urna. Proin vehicula mauris ac est. Ut scelerisque, risus ut facilisis dictum, est massa lacinia lorem, in fermentum purus ligula quis nunc.</textarea>
- </fieldset>
-
- <fieldset id="log-c" class="goog-debug-panel">
- <legend>Event Log</legend>
- <div id="log"></div>
- </fieldset>
- <script>
-
- var t1 = new goog.ui.Textarea('Hi there, I am a programmatic textarea.');
- t1.render(goog.dom.getElement('t1'));
- goog.events.listen(goog.dom.getElement('t1_enable'),
- goog.events.EventType.CLICK,
- function(e) {
- t1.setEnabled(e.target.checked);
- });
-
- var t2 = new goog.ui.Textarea();
- t2.decorate(goog.dom.getElement('t2'));
- goog.events.listen(goog.dom.getElement('t2_enable'),
- goog.events.EventType.CLICK,
- function(e) {
- t2.setEnabled(e.target.checked);
- });
-
- var t3 = new goog.ui.Textarea();
- var minHeight = 200;
- t3.setMinHeight(minHeight);
- t3.decorate(goog.dom.getElement('t3'));
- goog.events.listen(goog.dom.getElement('t3_toggle'),
- goog.events.EventType.CLICK,
- function(e) {
- t3.setMinHeight(t3.getMinHeight() ? null : minHeight);
- });
-
- var t4 = new goog.ui.Textarea();
- t4.decorate(goog.dom.getElement('t4'));
- </script>
- </body>
- </html>
|