dojox
Version:
Dojo eXtensions, a rollup of many useful sub-projects and varying states of maturity – from very stable and robust, to alpha and experimental. See individual projects contain README files for details.
190 lines (173 loc) • 7.04 kB
HTML
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="expires" content="-1" />
<title>test ListInput</title>
<style type="text/css" title="text/css">
@import "../../../dojo/resources/dojo.css";
@import "../../../dijit/themes/dijit.css";
@import "../../../dijit/tests/css/dijitTests.css";
@import "../../../dijit/themes/tundra/tundra.css";
@import "../../../dojox/form/resources/ListInput.css";
</style>
<script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="debugAtAllCost:true,isDebug: true,parseOnLoad:true"></script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.layout.TabContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.form.Button");
var current="list_0";
dojo.addOnLoad(function(){
dojo.connect(tabC,"selectChild",function(pageId) {
current=(typeof pageId=="object")?pageId.id:pageId;
current="list_" + current.split("_").pop();
});
});
//test beginning
dojo.require("dojox.form.ListInput");
dojo.require("dojox.validate.regexp");
getValues=function() {
console.warn(window[current].get("value"));
};
getValuesMatch=function() {
console.warn(window[current].get("MatchedValue"));
};
getValuesMisMatch=function() {
console.warn(window[current].get("MismatchedValue"));
};
disable=function(disable) {
window[current].set("disabled",disable);
};
reset=function() {
window[current].reset();
};
undo=function() {
window[current].undo();
};
addedVal=0;
addValue=function() {
window[current].add("new item " + (++addedVal));
};
addValues=function() {
var vals=[];
for (var i=0;i<3;i++) {
vals.push("new item " + (++addedVal));
}
window[current].add(vals);
};
</script>
</head>
<body class="tundra">
<h1>ListInput</h1>
<div>
<a href="dl.php?file=dojox/form/ListInput.js">Download ListInput.js</a><br />
<a href="dl.php?file=dojox/form/resources/ListInput.css">Download ListInput.css</a><br />
</div>
<blockquote>
Enter some element in the list. <br />
Separate them by comma or just press enter
</blockquote>
<h1>Actions</h1>
<a dojoType="dijit.form.Button" onclick="disable(true);">Disable</a>
<a dojoType="dijit.form.Button" onclick="disable(false);">Enable</a>
<a dojoType="dijit.form.Button" onclick="undo();">Undo</a>
<a dojoType="dijit.form.Button" onclick="reset();">Reset</a>
<a dojoType="dijit.form.Button" onclick="addValue();">Add an item</a>
<a dojoType="dijit.form.Button" onclick="addValues();">Add 3 items</a>
<a dojoType="dijit.form.Button" onclick="getValues();">See all values in firebug</a>
<a dojoType="dijit.form.Button" onclick="getValuesMatch();">See validated values in firebug</a>
<a dojoType="dijit.form.Button" onclick="getValuesMisMatch();">See unvalidated values in firebug</a>
<h1>Demos</h1>
<div data-dojo-id="tabC" dojoType="dijit.layout.TabContainer" tabStrip="true" style="width: 100%; height:300px;">
<div dojoType="dijit.layout.ContentPane" title="Demo 1">
<h1>With inputbox and editable items</h1>
<blockquote>
note : you can move between all editable area with left and right arrow.<br />
This feature can be desactivated
</blockquote>
<div value="initial item 1" data-dojo-id="list_0" name="list" dojoType="dojox.form.ListInput"></div>
</div>
<div dojoType="dijit.layout.ContentPane" title="Demo 2">
<h1>Without inputbox and with editable items</h1>
<blockquote>
note : you can move between all editable area with left and right arrow<br />
This feature can be desactivated
</blockquote>
<div value="initial item 1" data-dojo-id="list_1" readOnlyInput="true" dojoType="dojox.form.ListInput"></div>
</div>
<div dojoType="dijit.layout.ContentPane" title="Demo 3">
<h1>Without initial value</h1>
<div data-dojo-id="list_2" dojoType="dojox.form.ListInput"></div>
</div>
<div dojoType="dijit.layout.ContentPane" title="Demo 4">
<h1>With inputbox and without editable items</h1>
<div value="initial item 1" data-dojo-id="list_3" readOnlyItem="true" dojoType="dojox.form.ListInput"></div>
</div>
<div dojoType="dijit.layout.ContentPane" title="Demo 5">
<h1>Without inputbox and without editable items</h1>
<div value="initial item 1" data-dojo-id="list_4" readOnlyItem="true" readOnlyInput="true" dojoType="dojox.form.ListInput"></div>
</div>
<div dojoType="dijit.layout.ContentPane" title="Demo 6">
<h1>With validation</h1>
<blockquote>
note : enter only digits
</blockquote>
<div value="1234" data-dojo-id="list_5" regExp="[0-9]+" dojoType="dojox.form.ListInput"></div>
</div>
<div dojoType="dijit.layout.ContentPane" title="Demo 7">
<h1>With custom separator</h1>
<blockquote>
note : you can use semi-colon for separate item<br />
You also can use an array of separators
</blockquote>
<div value="initial item 1" data-dojo-id="list_6" delimiter=";" dojoType="dojox.form.ListInput"></div>
</div>
<div dojoType="dijit.layout.ContentPane" title="Demo 8">
<h1>With a submit form</h1>
<blockquote>
note : after submit, see url
</blockquote>
<form action="?" method="get">
<div value="initial item 1" name="demo8" data-dojo-id="list_7" dojoType="dojox.form.ListInput"></div>
<input type="submit" />
</form>
</div>
<div dojoType="dijit.layout.ContentPane" title="Demo 9">
<h1>With a submit form - submit only validated value</h1>
<blockquote>
note : after submit, see url<br />
enter only digits
</blockquote>
<form action="?" method="get">
<div name="demo9" data-dojo-id="list_8" value="invalid value,1234" regExp="[0-9]+" submitOnlyValidValue="true" dojoType="dojox.form.ListInput"></div>
<input type="submit" />
</form>
</div>
<div dojoType="dijit.layout.ContentPane" title="Demo 10">
<h1>With a max number of items</h1>
<blockquote>
note : you can only add 3 items
</blockquote>
<div value="initial item 1" data-dojo-id="list_9" maxItems="3" dojoType="dojox.form.ListInput"></div>
</div>
<div dojoType="dijit.layout.ContentPane" title="Demo 11">
<h1>Without close button</h1>
<blockquote>
note : you can specify if you want close button : <br />
- only on validated value<br />
- only on unvalidated value<br />
- never<br />
- always<br />
</blockquote>
<div data-dojo-id="list_10" showCloseButtonWhenValid="false" showCloseButtonWhenInvalid="false" dojoType="dojox.form.ListInput"></div>
</div>
<div dojoType="dijit.layout.ContentPane" title="Demo 12">
<h1>Without anim</h1>
<div value="initial item 1" data-dojo-id="list_11" useAnim="false" dojoType="dojox.form.ListInput"></div>
</div>
</div>
</body>
</html>