dijit
Version:
Dijit provides a complete collection of user interface controls based on Dojo, giving you the power to create web applications that are highly optimized for usability, performance, internationalization, accessibility, but above all deliver an incredible u
93 lines (77 loc) • 4.35 kB
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>