I am in the process of moving one of the projects I am working on from Dojo 4.3 to Dojo 0.9. One of the things I need is to develop an extended version of the dijit.TabContainer. First, I need to be able to create the standard components programmatically.
I created a simple css file like this:
html, body, #main{
width: 100%; /* make the body expand to fill the visible window */
height: 100%;
overflow: hidden; /* erase window level scrollbars */
padding: 0 0 0 0;
margin: 0 0 0 0;
font-family: Verdana,sans-serif;
font-size: 11px;
}
#banner {
width: auto;
float: right;
margin: -1px -4px;
height: 20px;
position: absolute;
z-index: 100;
right: 10px;
top: 6px;
}
And here's the code to be inserted in the html head (pay attention in adjusting the dojo path according to your dojo installation):
<script type="text/javascript" src="../dojo09/dojo/dojo.js"
djConfig="parseOnLoad: true, isDebug: true"></script>
<script type="text/javascript" src="../dojo09/dijit/dijit.js"></script>
<style type="text/css">
@import "../dojo09/dijit/themes/soria/soria.css";
@import "../dojo09/dojo/dojo.css";
@import "css/extTabContainerTest.css";
</style>
The html body:
<body class="soria">
<div id="banner">
<button dojoType="dijit.form.Button" onclick="call_function">
Start Programmatic Test!
</button>
</div>
<div id="mainTabContainer" dojoType="dijit.layout.TabContainer"
style="float: left; margin-right: 30px; width: 100%;
height: 100%; overflow: hidden">
<div id="tabs"></div>
</div>
</body>
Finally the script to be added again in the html head:
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.form.Button");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.layout.TabContainer");
function call_function() {
var pane1 = new dijit.layout.ContentPane({ id: 'tab1', title: 'Test tab 1' }, dojo.byId('tabs'));
var pane2 = new dijit.layout.ContentPane({ id: 'tab2', title: 'Test tab 2', closable: true }, dojo.byId('tabs'));
var tabContainer = dijit.byId('mainTabContainer');
tabContainer.addChild(pane1);
tabContainer.addChild(pane2);
}
</script>
Now loading the page and pressing the button on the top right you'll see the two new tabs
No comments:
Post a Comment