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
100 lines (84 loc) • 4.84 kB
HTML
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Inline Edit Box Test</title>
<style type="text/css">
@import "../../../../dijit/themes/claro/document.css";
@import "../../../../dijit/tests/css/dijitTests.css";
</style>
<!-- required: a 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="parseOnLoad: true, isDebug: true, has: { 'dojo-bidi': true }"></script>
<script type="text/javascript">
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dijit.InlineEditBox");
dojo.require("dijit.form.Textarea");
dojo.require("dijit.form.TextBox");
dojo.require("dijit.form.DateTextBox");
dojo.require("dijit.form.CurrencyTextBox");
dojo.require("dojo.currency");
dojo.require("dijit.form.ComboBox");
dojo.require("dijit.form.FilteringSelect");
dojo.require("dijit.form.NumberSpinner");
dojo.require("dijit.Editor");
dojo.require("dijit._editor.plugins.AlwaysShowToolbar");
dojo.require("dojo.parser"); // scan page for widgets and instantiate them
function myHandler(newValue){
this._onChangeValue = newValue; // used by robot test file
console.debug("onChange for id = " + this.id + ", value: " + newValue);
}
</script>
</head>
<body class="claro">
<h1 class="testTitle">Dijit InlineEditBox Bidi Test</h1>
<span data-dojo-id="productStore" data-dojo-type="dojo/data/ItemFileReadStore" >
<script type="dojo/method">
this._jsonData = {
identifier: 'name',
label: 'name',
items: [
{ name: "refrigerator..." },
{ name: "\u05d0\u05e0\u05d9\u0020\u05d0\u05d5\u05de\u05e8\u05ea\u003a\u0020" },
{ name: "stove \u05d0\u05e0\u05d9\u0020\u05d0\u05d5\u05de\u05e8\u05ea\u003a\u0020 ..." },
{ name: "\u05d0\u05e0\u05d9\u0020\u05d0\u05d5\u05de\u05e8\u05ea\u003a\u0020 heater ..." }
]
};
</script>
</span>
<h2>InlineEditBox with TextBox</h2>
<h3>TextDit LTR: </h3>
<span id="P0" data-dojo-type="dijit/InlineEditBox" data-dojo-props='textDir:"ltr", value:"", onChange:myHandler, autoSave:true, title:"test"'>
</span>
<h3>TextDir RTL: </h3>
<span id="P1" data-dojo-type="dijit/InlineEditBox" data-dojo-props='textDir:"rtl", value:"ערך חדש!!", onChange:myHandler, autoSave:true, title:"test"'>
</span>
<h3>TextDir AUTO: </h3>
<span id="P2" data-dojo-type="dijit/InlineEditBox" data-dojo-props='textDir:"auto", value:"Hello!", onChange:myHandler, autoSave:true, title:"test"'>
</span>
<input id="button" type="button" onclick="dijit.byId('P2').set('value', 'ערך חדש!')" value = "change value"/>
<h2>InlineEditBox with Textarea</h2>
<h3>TextDir LTR</h3>
<span id="P3" data-dojo-type="dijit/InlineEditBox" data-dojo-props='autoSave:true, textDir:"ltr", editor:"dijit.form.Textarea", value: "Text Area test ערך !!!", title:"additional details"'></span>
<h3>TextDir RTL</h3>
<span id="P4" data-dojo-type="dijit/InlineEditBox" data-dojo-props='autoSave:true, textDir:"rtl", editor:"dijit.form.Textarea", value: "Text Area test ערך !!!", title:"additional details"'></span>
<h3>TextDir AUTO</h3>
<span id="P5" data-dojo-type="dijit/InlineEditBox" data-dojo-props='autoSave:true, textDir:"auto", editor:"dijit.form.Textarea", value: "Text Area test ערך חדש!!!", title:"additional details"'></span>
<input id="Button1" type="button" onclick="dijit.byId('P5').set('value', 'ערך חדש!')" value = "change value"/>
<h2>InlineEditBox with Combobox</h2>
<h3>TextDir LTR</h3>
<span id="combo1" data-dojo-type="dijit/InlineEditBox" data-dojo-props='textDir:"ltr", editor:"dijit.form.ComboBox",
editorParams:{searchAttr: "name", store: productStore, autocomplete: false, hasDownArrow: false},
width:"200px", autoSave:false, title:"item name"'>refrigerators...</span>
<h3>TextDir RTL</h3>
<span id="combo2" data-dojo-type="dijit/InlineEditBox" data-dojo-props='textDir:"rtl", editor:"dijit.form.ComboBox",
editorParams:{searchAttr: "name", store: productStore, autocomplete: false, hasDownArrow: false},
width:"200px", autoSave:false, title:"item name"'>refrigerators...</span>
<h3>TextDir AUTO</h3>
<span id="combo3" data-dojo-type="dijit/InlineEditBox" data-dojo-props='textDir:"auto", editor:"dijit.form.ComboBox",
editorParams:{searchAttr: "name", store: productStore, autocomplete: false, hasDownArrow: false},
width:"200px", autoSave:false, title:"item name"'>refrigerators...</span>
</body>
</html>