You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
92 lines
4.3 KiB
92 lines
4.3 KiB
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta http-equiv="Content-type" content="text/html; charset=utf-8"> |
|
<title>Testing SimpleTextArea | The Dojo Toolkit</title> |
|
|
|
<style type="text/css"> |
|
@import "../../themes/claro/document.css"; |
|
@import "../css/dijitTests.css"; |
|
</style> |
|
|
|
<!-- required: the default dijit theme: --> |
|
<link id="themeStyles" rel="stylesheet" href="../../../dijit/themes/claro/claro.css"/> |
|
|
|
<!-- required: dojo.js --> |
|
<script type="text/javascript" src="../../../dojo/dojo.js" |
|
data-dojo-config="isDebug: true, parseOnLoad: true"></script> |
|
|
|
<!-- only needed for alternate theme testing: --> |
|
<script type="text/javascript" src="../_testCommon.js"></script> |
|
|
|
<script type="text/javascript"> |
|
dojo.require("dijit.dijit"); // optimize: load dijit layer |
|
dojo.require("dijit.form.SimpleTextarea"); |
|
|
|
// needed for tests |
|
dojo.require("dijit.layout.BorderContainer"); |
|
</script> |
|
</head> |
|
|
|
<body class="claro" style="padding:20px" role="main"> |
|
|
|
<h1 class="testTitle">SimpleTextarea</h1> |
|
|
|
<p> |
|
This is a simple text area that doesn't automatically size itself according to it's content. |
|
It can be used inside layout containers. |
|
</p> |
|
|
|
<h2><label for="ta1">Plain textarea (rows=5, cols=50), selectOnClick=true</label></h2> |
|
<textarea id="ta1" data-dojo-type="dijit/form/SimpleTextarea" data-dojo-props='name:"ta1", rows:"5", cols:"50", |
|
onFocus:function(){ console.log("user focus handler") }, |
|
onBlur:function(){ console.log("user blur handler") }, |
|
onChange:function(val){ dojo.byId("oc1").value = "" + val; }, |
|
selectOnClick:true |
|
'> |
|
shichashaw, textarea text baw. |
|
</textarea> |
|
<label for="oc1">onChange:</label><textarea id="oc1" rows="6" cols="50" disabled >not fired yet!</textarea> |
|
<span style='white-space:nowrap;'> |
|
<button id="resetButton" onclick="dijit.byId('ta1').reset();">reset</button> |
|
<button id="setNullButton" onclick="dijit.byId('ta1').set('value', null);">set value to null</button> |
|
<button id="getValueButton" onclick="dojo.byId('gv1').value=''+dijit.byId('ta1').get('value');">get value</button> |
|
<textarea id="gv1" rows="6" cols="50" disabled aria-label="hi">no value yet!</textarea> |
|
</span> |
|
|
|
|
|
<h2><label for="ta2">Plain textarea with style="height: 300px; width: 300px" rows="" cols=""</label></h2> |
|
<textarea id="ta2" data-dojo-type="dijit/form/SimpleTextarea" data-dojo-props='name:"ta2", |
|
style:{height:"300px", width:"300px"}, rows:"", cols:""'>I have a style setting rather than rows/cols setting</textarea> |
|
|
|
<h2>In a BorderContainer</h2> |
|
|
|
<div id="container" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props='style:{width:"500px", height:"400px", border:"inset gray 3px"}'> |
|
<textarea id="top" data-dojo-type="dijit/form/SimpleTextarea" aria-label="top" data-dojo-props='name:"top", region:"top", splitter:true, style:{height:"100px"}'> |
|
This is just some text in the top region. |
|
</textarea> |
|
<textarea id="left" data-dojo-type="dijit/form/SimpleTextarea" aria-label="left" data-dojo-props='name:"left", region:"left", splitter:true, style:{width:"200px"}'> |
|
This is just some text in the left region. |
|
</textarea> |
|
<textarea id="center" data-dojo-type="dijit/form/SimpleTextarea" aria-label="center" data-dojo-props='name:"center", region:"center"'> |
|
This is just some text in the center region. |
|
</textarea> |
|
<textarea id="right" data-dojo-type="dijit/form/SimpleTextarea" aria-label="right" data-dojo-props='name:"right", region:"right", splitter:true, style:{width:"200px"}'> |
|
This is just some text in the right region. |
|
</textarea> |
|
<textarea id="bottom" data-dojo-type="dijit/form/SimpleTextarea" aria-label="bottom" data-dojo-props='name:"bottom", region:"bottom", splitter:true, style:{height:"100px"}'> |
|
This is just some text in the bottom region. |
|
</textarea> |
|
</div> |
|
|
|
<script> |
|
function setAttr(attr, value){ |
|
dijit.registry.byClass('dijit.form.SimpleTextarea').forEach(function(widget){ widget.set(attr, value);}); |
|
} |
|
</script> |
|
<input type="button" onclick="setAttr('readOnly', false);" value="Remove readOnly"/> |
|
<input type="button" onclick="setAttr('readOnly', true);" value="Set readOnly"/> |
|
<input type="button" onclick="setAttr('disabled', true);" value="Disable"/> |
|
<input type="button" onclick="setAttr('disabled', false);" value="Enable"/> |
|
</body> |
|
</html>
|
|
|