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.
105 lines
4.2 KiB
105 lines
4.2 KiB
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta http-equiv="Content-type" content="text/html; charset=utf-8"> |
|
<title>TabContainer doLayout=false Demo</title> |
|
|
|
<script src="../boilerplate.js"></script> |
|
|
|
<script type="text/javascript"> |
|
function testClose(pane,tab){ |
|
return confirm("Please confirm that you want tab "+tab.title+" closed"); |
|
} |
|
|
|
require([ |
|
"dojo/parser", |
|
"dijit/registry", |
|
"dijit/layout/ContentPane", |
|
"dijit/layout/TabContainer", |
|
"dijit/Tooltip", |
|
"dojo/domReady!" |
|
], function(parser, registry, ContentPane){ |
|
|
|
var tab = 6; |
|
|
|
addTab = function(){ |
|
cp = new ContentPane({id: 'newTab' + tab, title: 'Tab' + tab, closable: true}); |
|
cp.domNode.innerHTML = "Contents of Tab " + tab++; |
|
registry.byId("plainTabContainer").addChild(cp); |
|
}; |
|
|
|
parser.parse(); |
|
}); |
|
</script> |
|
</head> |
|
<body class="claro" role="main"> |
|
|
|
<script type="dojo/require"> |
|
registry: "dijit/registry" |
|
</script> |
|
|
|
<h1 class="testTitle">Dijit layout.TabContainer doLayout=false tests</h1> |
|
|
|
<p> |
|
This tests tabs in doLayout=false mode, in which case the tab container's height == |
|
the height of the currently selected tab. |
|
</p> |
|
<p> |
|
With doLayout=false mode tabs only (the default) tabPosition=top is supported. |
|
</p> |
|
|
|
<button id="addTabButton" onclick="addTab();">add tab</button> |
|
<button id="destroyTabContainer" onclick="registry.byId('plainTabContainer').destroyRecursive();">destroy tab container</button> |
|
|
|
<div id="plainTabContainer" data-dojo-type="dijit/layout/TabContainer" data-dojo-props='doLayout:false, style:"width: 700px;"'> |
|
|
|
<div id="tab1" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='href:"tab1.html", title:"Tab 1"'></div> |
|
|
|
<div id="tab2" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='href:"tab2.html", refreshOnShow:true, title:"Tab 2", selected:true'></div> |
|
|
|
<div id="tab3" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='title:"Tab 3"'> |
|
<h1 id="h3">I am tab 3</h1> |
|
<p id="p3">And I was already part of the page! That's cool, no?</p> |
|
<span id="foo">tooltip on this span</span> |
|
<div data-dojo-type="dijit/Tooltip" data-dojo-props='connectId:["foo"]'>I'm a tooltip!</div> |
|
<button id="b3" data-dojo-type="dijit/form/Button">I'm a button </button> |
|
<br> |
|
<button id="b4" data-dojo-type="dijit/form/Button">So am I!</button> |
|
<p id="p4"> |
|
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean |
|
semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin |
|
porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi. |
|
Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis. |
|
Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitae |
|
risus. |
|
</p> |
|
<p id="p5">Aliquam vitae enim. Duis scelerisque metus auctor est venenatis |
|
imperdiet. Fusce dignissim porta augue. Nulla vestibulum. Integer lorem |
|
nunc, ullamcorper a, commodo ac, malesuada sed, dolor. Aenean id mi in |
|
massa bibendum suscipit. Integer eros. Nullam suscipit mauris. In |
|
pellentesque. Mauris ipsum est, pharetra semper, pharetra in, viverra |
|
quis, tellus. Etiam purus. Quisque egestas, tortor ac cursus lacinia, |
|
felis leo adipiscing nisi, et rhoncus elit dolor eget eros. Fusce ut |
|
quam. Suspendisse eleifend leo vitae ligula. Nulla facilisi. Nulla |
|
rutrum, erat vitae lacinia dictum, pede purus imperdiet lacus, ut |
|
semper velit ante id metus. Praesent massa dolor, porttitor sed, |
|
pulvinar in, consequat ut, leo. Nullam nec est. Aenean id risus blandit |
|
tortor pharetra congue. Suspendisse pulvinar. |
|
</p> |
|
</div> |
|
|
|
<div id="tab4" data-dojo-type="dijit/layout/TabContainer" data-dojo-props='title:"Tab 4", doLayout:false, nested:true'> |
|
<div id="tab4a" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='href:"tab1.html"' title="SubTab 1"></div> |
|
<div id="tab4b" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='href:"tab2.html", selected:true' title="SubTab 2"></div> |
|
</div> |
|
|
|
<div id="tab5" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='href:"tab3_noLayout.html", doLayout:false' title="Tab 5"></div> |
|
</div> |
|
|
|
<p id="textAfterTabContainer1"> |
|
Some text here. This should appear directly below the TabContainer, |
|
and the position will change based on the current height of the TabContainer. |
|
</p> |
|
|
|
</body> |
|
</html>
|
|
|