JavaScript Tutorial/Dojo toolkit/InlineEditBox
Содержание
Create inline text editor(dijit.InlineEditBox)
<html>
<head>
<link rel="StyleSheet" type="text/css"
href="js/dojo/dijit/themes/tundra/tundra.css">
<script type="text/javascript">
var djConfig = {
baseScriptUri : "js/dojo/",
parseOnLoad : true
};
</script>
<script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
<script>
dojo.require("dojo.parser");
dojo.require("dijit.InlineEditBox");
dojo.addOnLoad(show);
function show() {
var descEditor = new dijit.InlineEditBox({
id : "description", autoSave : false, buttonSave : "Save",
buttonCancel : "Cancel", width : "100%"},
dojo.byId("my")
);
}
</script>
</head>
<body class="tundra">
<div id="my" style="border:1px solid #000000;"></div>
</body>
</html>
HTML tags inline editing
<html>
<head>
<link rel="StyleSheet" type="text/css" href="js/dojo/dijit/themes/tundra/tundra.css">
<script type="text/javascript">
var djConfig = {
baseScriptUri : "js/dojo/",
parseOnLoad : true
};
</script>
<script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
<script>
dojo.require("dojo.parser");
dojo.require("dijit.form.Textarea");
dojo.require("dijit.InlineEditBox");
</script>
</head>
<body class="tundra">
<span dojoType="dijit.InlineEditBox" autoSave="false" editor="dijit.form.TextBox">Click to edit</span>:
<div dojoType="dijit.InlineEditBox" autoSave="false" editor="dijit.form.Textarea" renderAsHtml="true">
line 1<br>
line 2<br>
<HR>
line 3<br>
line 4<br>
</div>
</body>
</html>
Inline text box
<html>
<head>
<link rel="StyleSheet" type="text/css"
href="js/dojo/dijit/themes/tundra/tundra.css">
<script type="text/javascript">
var djConfig = {
baseScriptUri : "js/dojo/",
parseOnLoad : true
};
</script>
<script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
<script>
dojo.require("dojo.parser");
dojo.require("dijit.InlineEditBox");
</script>
</head>
<body class="tundra">
<div style="border:1px solid #000000;"
dojoType="dijit.InlineEditBox" title="test">
Edit me
</div>
</body>
</html>
Two inline editors
<html>
<head>
<link rel="StyleSheet" type="text/css" href="js/dojo/dijit/themes/tundra/tundra.css">
<script type="text/javascript">
var djConfig = {
baseScriptUri : "js/dojo/",
parseOnLoad : true
};
</script>
<script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
<script>
dojo.require("dojo.parser");
dojo.require("dijit.form.Textarea");
dojo.require("dijit.InlineEditBox");
</script>
</head>
<body class="tundra">
<span dojoType="dijit.InlineEditBox" autoSave="false" editor="dijit.form.TextBox">Click to edit</span>:
<span dojoType="dijit.InlineEditBox" autosave="false" editor="dijit.form.TextBox">Click to edit</span>
</body>
</html>