<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Inline Edit Box Widget Demo</title>
<script type="text/javascript"> var djConfig = {isDebug: true}; </script>
<script type="text/javascript" src="../../dojo.js"></script>
<script type="text/javascript">
dojo.require("dojo.widget.InlineEditBox");
dojo.require("dojo.event.*");
dojo.hostenv.writeIncludes();
</script>
<script type="text/javascript">
function saveHandler(newValue, oldValue,name) {
dojo.debug("onSave was called -- New Value: " + newValue + " : Old Value: " + oldValue);
};
function cancelCall(){
dojo.debug('onCancel was called.');
};
function changeCall(newValue,oldValue){
dojo.debug('onChange was called'+"New Value: " + newValue + " : Old Value: " + oldValue);
};
dojo.addOnLoad(function(){
var editable = dojo.widget.byId("editable");
dojo.event.connect(editable, "onSave", "saveHandler");
dojo.event.connect(editable,'onChange','changeCall');
dojo.event.connect(editable,'onCancel','cancelCall');
});
</script>
<style type="text/css">
body { font-family : sans-serif; background:#fff; }
.inlineEdit { background-color: #CCC76A; }
</style>
</head>
<body>
<h1 id="editable" dojoType="inlineEditBox">Edit me - I trigger the callbacks onSave,onCancel,onChange</h1>
<p id="areaEditable" dojoType="inlineEditBox" mode="textarea">
I'm one big paragraph. Go ahead and edit me.
I dare you.
The quick brown fox jumped over the lazy dog.
Blah blah blah blah blah blah blah ...
</p>
<p>
These links will
<a href="#" onClick="dojo.widget.byId('areaEditable').disable()">disable</a>
/
<a href="#" onClick="dojo.widget.byId('areaEditable').enable()">enable</a>
the text area above.
</p>
<p id="backgroundArea" class="inlineEdit" dojoType="inlineEditBox" >
This text should have a colored background when not in editing mode.
</p>
<h2 dojoType="inlineEditBox" value="Parameter text value"></h2>
</body>
</html>