You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
255 lines
10 KiB
255 lines
10 KiB
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta http-equiv="Content-type" content="text/html; charset=utf-8"> |
|
<title>Dijit UI Tester</title> |
|
|
|
<script src="../boilerplate.js"></script> |
|
|
|
<style type="text/css"> |
|
html, body { |
|
height: 100%; |
|
width: 100%; |
|
padding: 0; |
|
margin: 0; |
|
border: 0; |
|
background: #fff; |
|
} |
|
#main { |
|
font-size: 0.9em; |
|
height: 100%; |
|
width: 100%; |
|
padding: 5px; |
|
margin: 0; |
|
} |
|
|
|
/* initial sizing */ |
|
#leftAccordion { |
|
width: 25%; |
|
} |
|
#bottomTabs { |
|
height: 40%; |
|
} |
|
</style> |
|
|
|
<script type="text/javascript"> |
|
require([ |
|
"dojo/parser", |
|
"dijit/layout/BorderContainer", |
|
"dijit/layout/AccordionContainer", |
|
"dijit/layout/TabContainer", |
|
"dijit/layout/ContentPane", |
|
"dijit/TitlePane", |
|
"dojo/domReady!" |
|
], function(parser){ |
|
parser.parse(); |
|
}); |
|
</script> |
|
</head> |
|
<body class="claro" role="main"> |
|
|
|
<!-- "main" BorderContainer just contains page title and another BorderContainer --> |
|
<div id="main" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props='gutters:true, style:"height:700px;"'> |
|
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='region:"top", splitter:false'>This test is to make sure nested layout elements work fine in regards to double borders etc. You need a screen with a very high resolution to not get cramped tabs and other weird visual effects </div> |
|
|
|
<!-- "mainSplit" BorderContainer has all the real content --> |
|
<div id="mainSplit" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props='liveSplitters:false, design:"sidebar", |
|
region:"center" '> |
|
|
|
<div id="leftAccordion" data-dojo-type="dijit/layout/AccordionContainer" |
|
data-dojo-props='minSize:20, style:"width: 300px;", region:"leading", splitter:true'> |
|
|
|
<div id="ac_pane1" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='title:"Popups and Alerts"'> |
|
</div> |
|
|
|
<div id="ac_pane2" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='title:"Dojo Tree from Store"'> |
|
</div> |
|
|
|
<div id="ac_pane3" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='title:"Calendar", selected:true'> |
|
</div> |
|
|
|
<div id="ac_pane4" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='title:"Color Picker"'> |
|
</div> |
|
|
|
</div><!-- end AccordionContainer --> |
|
|
|
<div id="centerSplit" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props='liveSplitters:false, region:"center"'> |
|
<!-- top tabs (marked as "center" to take up the main part of the BorderContainer) --> |
|
<div id="topTabs1" data-dojo-type="dijit/layout/TabContainer" data-dojo-props='region:"top", tabStrip:true, splitter:true, style:"height:200px;"'> |
|
|
|
<div id="basicFormTab" data-dojo-type="dijit/layout/ContentPane" |
|
data-dojo-props='title:"Basic Form Widgets", |
|
style:"padding:10px;display:none;"'> |
|
Hi friends of dijit |
|
</div> <!-- end of basic form widgets --> |
|
<div id="tabAccordion" data-dojo-type="dijit/layout/AccordionContainer" |
|
data-dojo-props='title:"Accordion in Tab", |
|
minSize:20, |
|
style:"width: 100%;"'> |
|
|
|
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='title:"Popups and Alerts"'> |
|
</div> |
|
|
|
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='title:"Dojo Tree from Store"'> |
|
</div> |
|
|
|
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='title:"Calendar", selected:true'> |
|
</div> |
|
|
|
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='title:"Color Picker"'> |
|
</div> |
|
|
|
</div><!-- end AccordionContainer --> |
|
|
|
<div id="textareaTab" data-dojo-type="dijit/layout/ContentPane" |
|
data-dojo-props=' |
|
title:"Accordion in Content Tab"'> |
|
|
|
<div id="tabAccordionContainer" data-dojo-type="dijit/layout/AccordionContainer" |
|
data-dojo-props='minSize:20, style:"width: 100%;" '> |
|
|
|
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='title:"Popups and Alerts"'> |
|
</div> |
|
|
|
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='title:"Tabs in Accordion"'> |
|
<!-- bottom right tabs --> |
|
<div id="mainSplit1" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props='liveSplitters:false, design:"sidebar", |
|
style:"padding: 0px;width: 300px; height: 100px"'> |
|
|
|
<div id="accTabs" data-dojo-type="dijit/layout/TabContainer" data-dojo-props='tabPosition:"top", region:"center"'> |
|
|
|
<!-- btab 1 --> |
|
<div id="bbtab1" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='selected:true, title:"Info", style:" padding:10px;"'> |
|
</div><!-- end:info btab1 --> |
|
|
|
<div id="bbtab2" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='title:"Alternate Themes", style:"padding:20px;"'> |
|
</div><!-- btab2 --> |
|
|
|
<div id="bbtab3" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='title:"Bottom 3", closable:true'> |
|
</div><!-- btab3 --> |
|
|
|
</div><!-- end Bottom TabContainer --> |
|
</div> |
|
</div> |
|
|
|
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='title:"Calendar", selected:true'> |
|
</div> |
|
|
|
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='title:"Color Picker"'> |
|
</div> |
|
|
|
</div><!-- end AccordionContainer --> |
|
|
|
</div><!-- end of Textarea/Editor tab --> |
|
|
|
|
|
<div id="titlePaneCP" data-dojo-type="dijit/layout/ContentPane" |
|
data-dojo-props='title:"Title Pane in Content Pane", |
|
doLayout:false, |
|
style:"display:none;"'> |
|
|
|
Here's some text, then a TitlePane: |
|
<div id="tp" data-dojo-type="dijit/TitlePane" data-dojo-props='title:"Color Picker"'> |
|
Hi friends of dijit |
|
</div> |
|
... and some more text. |
|
</div> |
|
|
|
<div id="tabContainerInTabCP" data-dojo-type="dijit/layout/TabContainer" data-dojo-props='title:"TabContainer in Tab", nested:true, closable:true'> |
|
<div id="basicFormTab1" data-dojo-type="dijit/layout/ContentPane" |
|
data-dojo-props='title:"Basic Form Widgets 1", |
|
style:"padding:10px; display:none;"'> |
|
Hi friends of dijit |
|
</div> |
|
<div id="basicFormTab2" data-dojo-type="dijit/layout/ContentPane" |
|
data-dojo-props='title:"Basic Form Widgets 2", |
|
style:"padding:10px; display:none;"'> |
|
Tab 2 content |
|
</div> |
|
</div> |
|
|
|
<div id="closableTab" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='title:"Closable ContentPane w/TabContainer", |
|
style:"display:none; padding:0px;", closable:true'> |
|
|
|
<div data-dojo-type="dijit/layout/TabContainer" data-dojo-props='title:"Tab in Tab", nested:true'> |
|
|
|
<div id="basicFormTab3" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='title:"Basic Form Widgets 3", style:"padding:10px;display:none;"'> |
|
Hi friends of dijit |
|
</div> |
|
<div id="basicFormTab4" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='title:"Basic Form Widgets 4", style:"padding:10px;display:none;"'> |
|
Hi friends of dijit |
|
</div> |
|
</div> |
|
</div> |
|
</div><!-- end of region="center" TabContainer --> |
|
<div id="embeddedBC" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props='liveSplitters:false, region:"center"'> |
|
<div id="bottomTabs1" data-dojo-type="dijit/layout/TabContainer" data-dojo-props='tabStrip:true, |
|
tabPosition:"left-h", region:"top", style:"height: 50%;", splitter:true'> |
|
|
|
<!-- btab 1 --> |
|
<div id="btabA" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='selected:true, title:"Info", style:"padding:10px;"'> |
|
|
|
</div><!-- end:info btabA --> |
|
|
|
<div id="btabB" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='title:"Alternate Themes", style:"padding:20px;"'> |
|
|
|
</div><!-- btabB --> |
|
|
|
<div id="btabC" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='title:"Bottom 3", closable:true'> |
|
|
|
</div><!-- btabC --> |
|
|
|
</div><!-- end Bottom TabContainer --> |
|
<div id="bottomTabs2" data-dojo-type="dijit/layout/TabContainer" data-dojo-props='tabStrip:true, |
|
tabPosition:"right-h", region:"center"'> |
|
|
|
<!-- btab 1 --> |
|
<div id="btabD" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='selected:true, title:"Info", style:"padding:10px;"'> |
|
|
|
</div><!-- end:info btabD --> |
|
|
|
<div id="btabE" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='title:"Alternate Themes", style:"padding:20px;"'> |
|
|
|
</div><!-- btabE --> |
|
|
|
<div id="btabF" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='title:"Bottom 3", closable:true'> |
|
|
|
</div><!-- btabF --> |
|
|
|
</div><!-- end Bottom TabContainer --> |
|
</div> |
|
<!-- bottom right tabs --> |
|
<div id="bottomTabs" data-dojo-type="dijit/layout/TabContainer" data-dojo-props='tabStrip:true, |
|
tabPosition:"bottom", region:"bottom", splitter:true'> |
|
|
|
<!-- btab 1 --> |
|
<div id="bottomSplit" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props='selected:true, liveSplitters:false, design:"sidebar", |
|
region:"center", title:"BorderContainer in Tabs", style:"padding: 5px; width: 100%"'> |
|
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='region:"top", splitter:true'>This test is to make sure nested layout elements work fine in regards to double borders etc. You need a screen with a very high resolution to not get cramped tabs and other weird visual effects </div> |
|
<div id="bottomTabs22" data-dojo-type="dijit/layout/TabContainer" data-dojo-props='tabPosition:"top", region:"center", splitter:true'> |
|
|
|
<!-- btab 1 --> |
|
<div id="btabAA" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='selected:true, title:"Info", style:"padding:10px;"'>Hi</div> |
|
</div> |
|
|
|
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='region:"bottom", splitter:true'>This test is to make sure nested layout elements work fine in regards to double borders etc. You need a screen with a very high resolution to not get cramped tabs and other weird visual effects </div> |
|
|
|
</div> |
|
|
|
<div id="btab2" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='title:"Alternate Themes", style:"padding:20px;"'> |
|
|
|
</div><!-- btab2 --> |
|
|
|
<div id="btab3" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='title:"Bottom 3", closable:true'> |
|
|
|
</div><!-- btab3 --> |
|
|
|
</div><!-- end Bottom TabContainer --> |
|
</div> |
|
</div> <!-- end of "mainSplit" BorderContainer --> |
|
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='region:"trailing", splitter:true, style:"width: 10%;"'>Hi </div> |
|
|
|
</div><!-- end of "main" BorderContainer --> |
|
|
|
</body> |
|
</html>
|
|
|