UNPKG

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

85 lines (69 loc) 3.08 kB
<!DOCTYPE html> <html > <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <title>TextBox with _BidiSupport</title> <style type="text/css"> @import "../../../../dijit/themes/tundra/tundra.css"; @import "../../../../dojo/resources/dojo.css"; </style> <!-- 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("dijit.form.TextBox"); dojo.require("dojo.parser"); </script> </head> <body class="tundra"> <label for="ltrTextBox" > <b> I'm a LTR TexBox</b> </label><br> <input data-dojo-type="dijit/form/TextBox" id="ltrTextBox" data-dojo-props='name:"ltrTextBox", value:"", textDir:"ltr"'/> <br> <label for="rtlTextBox" > <b>I'm a RTL TexBox </b> </label><br> <input data-dojo-type="dijit/form/TextBox" id="rtlTextBox" data-dojo-props='name:"rtlTextBox", value:"",textDir:"rtl"'/> <br> <label for="contextualTextBox" > <b> And I'm a suprising contextual TexBox!!! </b> </label><br> <input data-dojo-type="dijit/form/TextBox" id="contextualTextBox" data-dojo-props='name:"contextualTextBox", value:"",textDir:"auto"'/> <br> <br> <label for="programmatic1">dijit.form.Textarea programmatically created with custom styling:</label><br> <input id="programmatic1"/> <label for="programmatic2">dijit.form.Textarea programmatically created with custom styling:</label><br> <input id="programmatic2"/> <label for="programmatic3">dijit.form.Textarea programmatically created with custom styling:</label><br> <input id="programmatic3"/> <input id="changeValue" type="button" onclick="programmaticTextBox1.set('value', '&#1506;&#1512;&#1498; &#1495;&#1491;&#1513;!');programmaticTextBox2.set('value', '&#1506;&#1512;&#1498; &#1495;&#1491;&#1513;!');programmaticTextBox3.set('value', '&#1506;&#1512;&#1498; &#1495;&#1491;&#1513;!');" value="change value"/> <script type="text/javascript"> dojo.ready(function(){ programmaticTextBox1 = new dijit.form.TextBox({ id: "programmatic1", name: "programmaticTextbox1", textDir: "ltr", value: "created programatically with custom border, padding, margin! textDir=auto!", style: {border:"5px solid gray", padding:"11px", margin:"7px"} }, "programmatic1"); programmaticTextBox2 = new dijit.form.TextBox({ id: "programmatic2", name: "programmaticTextbox2", textDir: "rtl", value: "created programatically with custom border, padding, margin! textDir=auto!", style: {border:"5px solid gray", padding:"11px", margin:"7px"} }, "programmatic2"); programmaticTextBox3 = new dijit.form.TextBox({ id: "programmatic3", name: "programmaticTextbox3", textDir: "auto", value: "created programatically with custom border, padding, margin! textDir=auto!", style: {border:"5px solid gray", padding:"11px", margin:"7px"} }, "programmatic3"); }); </script> </body> </html>