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

158 lines (143 loc) 7.81 kB
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <title>DOH markup containers simple inheritance</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="isDebug: true, has: { 'dojo-bidi': true }"> </script> <script type="text/javascript"> dojo.require("dijit.form.TextBox"); dojo.require("dijit.form.ComboBox"); dojo.require("dijit.layout.AccordionContainer"); dojo.require("dijit.layout.ContentPane"); dojo.require("dijit.layout.BorderContainer"); dojo.require("dijit.layout.TabContainer"); dojo.require("dijit.form.FilteringSelect"); dojo.require("dijit.form.Textarea"); dojo.require("doh.runner"); dojo.ready(function(){ doh.register("parse", function(){ dojo.parser.parse(); }); doh.register("dijit.tests._BidiSupport.inheritance.Inher-MarkupContainers", [ function test_ltrFilterSelectInheritAccordion(){ dijit.byId("filter1").set("value","1"); doh.is("ltr", dijit.byId("filter1").focusNode.dir, "option 1 of filter1"); }, function test_rtlFilterSelectInheritAccordion(){ dijit.byId("filter1").set("value","2"); doh.is("rtl", dijit.byId("filter1").focusNode.dir, "option 2 of filter1"); }, function test_ltrTextareaInheritPane1(){ dijit.byId("ltrTextBox1").set("value","Hello!!"); doh.is("ltr", dijit.byId("ltrTextBox1").focusNode.dir,"ltrTextBox1 : Hello!!"); }, function test_ltrTextareaInheritPane2(){ dijit.byId("ltrTextBox1").set("value","\u05e9\u05dc\u05d5\u05dd\u0021\u0021"); doh.is("ltr", dijit.byId("ltrTextBox1").focusNode.dir,"ltrTextBox1: \u05e9\u05dc\u05d5\u05dd\u0021\u0021"); }, function test_autoComboBoxInheritTableLtr(){ dijit.byId("autoTextBox1").set("value","Hello!!"); doh.is("ltr", dijit.byId("autoTextBox1").focusNode.dir,"autoTextBox1: Hello!!"); }, function test_autoComboBoxInheritTableRtl(){ dijit.byId("autoTextBox1").set("value","\u05e9\u05dc\u05d5\u05dd\u0021\u0021"); doh.is("rtl", dijit.byId("autoTextBox1").focusNode.dir,"autoTextBox1: \u05e9\u05dc\u05d5\u05dd\u0021\u0021"); }, function test_rtlTextareaInheritPane1(){ dijit.byId("rtlTextBox1").set("value","\u05e9\u05dc\u05d5\u05dd\u0021\u0021"); doh.is("rtl", dijit.byId("rtlTextBox1").focusNode.dir,"rtlTextBox1: \u05e9\u05dc\u05d5\u05dd\u0021\u0021"); }, function test_rtlTextareaInheritPane2(){ dijit.byId("rtlTextBox1").set("value","\u05e9\u05dc\u05d5\u05dd\u0021\u0021"); doh.is("rtl", dijit.byId("rtlTextBox1").focusNode.dir,"rtlTextBox1: \u05e9\u05dc\u05d5\u05dd\u0021\u0021"); }, function test_autoSimpleTextareaInheritPane1(){ doh.is("ltr", dijit.byId("ltrSimpleTexarea").focusNode.dir, "ltrSimpleTexarea: ltrSimpleTexarea"); }, function test_autoSimpleTextareaInheritPane2(){ doh.is("rtl", dijit.byId("autoSimpleTexarea").focusNode.dir, "autoSimpleTexarea: autoSimpleTexarea"); }, function test_RtrSimpleTexBoxInheritTabContainer(){ doh.is("rtl", dijit.byId("rtlSimpleTexarea").focusNode.dir, "rtlSimpleTexarea"); dijit.byId("rtlSimpleTexarea").set("value","Hello!!"); doh.is("rtl", dijit.byId("rtlSimpleTexarea").focusNode.dir,"rtlSimpleTexarea: Hello!!"); }, function test_autoSimpleTexBoxInheritTabContainersPaneRtl(){ doh.is("rtl", dijit.byId("ltrTexarea").focusNode.dir, "ltrTexarea"); }, function test_autoSimpleTexBoxInheritTabContainersPaneRtl(){ doh.is("ltr", dijit.byId("trTexarea").focusNode.dir, "trTexarea"); } ]); doh.run(); }); </script> </head> <body class="tundra" data-dojo-textdir="rtl" > <div id="markupAccordion" data-dojo-type="dijit/layout/AccordionContainer" data-dojo-props='style:"width:400px; height:300px;", textDir :"auto"' data-dojo-textdir="auto"> <div data-dojo-type="dijit/layout/BorderContainer" id="borderContainerPane" data-dojo-props=' textDir:"rtl",title:"BorderContainer Pane"' data-dojo-textdir="rtl"> <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='region:"left", style:"width:100px", splitter:true, textDir:"ltr"'> <input id="ltrTextBox1" data-dojo-type="dijit/form/TextBox" data-dojo-props='name:"ltrTextBox1", type:"text", value:""'/> </div> <div data-dojo-type="dijit/layout/ContentPane"data-dojo-props='region:"center"' data-dojo-textdir="auto" > <input id="autoTextBox1" data-dojo-type="dijit/form/TextBox" data-dojo-props='type:"text", name:"autoTextBox1", value:""'/> </div> <input id="rtlTextBox1" data-dojo-type="dijit/form/TextBox" data-dojo-props='type:"text", name:"rtlTextBox1", value:""'/> </div> <div id="pane1" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='selected:"true", title:"A Simple Pane"'> <select data-dojo-type="dijit/form/FilteringSelect" id="filter1"> <option value="1" selected>foo.</option> <option value="2">&#1489;&#1512;.</option> <option value="3">baz.</option> </select> </div> <div data-dojo-type="dijit/layout/ContentPane" id="embeddedLayoutPane" data-dojo-props='title:"Tags & panes with TextBoxesAreas"'> <p> Here's a BorderContainer: textDir= contextual </p> <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props='style:"height:200px; width:300px", textDir :"auto"' data-dojo-textdir="auto"> <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='region:"left", style:"width:125px", splitter:"true"'> Left Pane: <textarea id="ltrSimpleTexarea" data-dojo-type="dijit/form/SimpleTextarea" data-dojo-props='name:"ltrSimpleTexarea", rows:"8", cols:"13" '> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt. </textarea> </div> <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='region:"center"'> Right Pane: <textarea id="autoSimpleTexarea" data-dojo-type="dijit/form/SimpleTextarea" data-dojo-props='name:"autoSimpleTexarea", rows:"8", cols:"13" '> &#1500;&#1493;&#1512;&#1501; &#1488;&#1497;&#1508;&#1505;&#1493;&#1501; &#1491;&#1493;&#1500;&#1493;&#1512; &#1505;&#1497;&#1496; &#1488;&#1502;&#1496;, &#1511;&#1493;&#1504;&#1505;&#1511;&#1496;&#1493;&#1512;&#1512; &#1488;&#1491;&#1497;&#1508;&#1497;&#1505;&#1497;&#1504;&#1490; &#1488;&#1500;&#1497;&#1514; &#1502;&#1493;&#1505;&#1503; &#1502;&#1504;&#1514;. </textarea> </div> </div> <p> And a TabContainer: </p> <div data-dojo-type="dijit/layout/TabContainer" data-dojo-props='style:"height:200px; width:300px", textDir:"rtl"' data-dojo-textdir="rtl"> <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='title:"Tab 1 textDir=rtl" ' > <textarea id="rtlSimpleTexarea" data-dojo-type="dijit/form/SimpleTextarea" data-dojo-props='name:"rtlSimpleTexarea", rows:"4", cols:"15" '>&#1500;&#1493;&#1512;&#1501; &#1488;&#1497;&#1508;&#1505;&#1493;&#1501;. </textarea> </div> <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='title:"Tab 2 textDir=inherited"' data-dojo-textdir="auto"> <textarea id="ltrTexarea" data-dojo-type="dijit/form/Textarea" data-dojo-props='name:"ltrTexarea", rows:"4", cols:"14" '>&#1502;&#1489;&#1495;&#1503;. </textarea> <textarea id="trTexarea" data-dojo-type="dijit/form/Textarea" data-dojo-props='name:"trTexarea", rows:"4", cols:"14" '>Test. </textarea> </div> </div> <p> Text after the widgets. </p> </div> </div> </body> </html>