JavaScript DHTML/Dojo toolkit/TabContainer
Содержание
Close tab event
<source lang="html4strict">
<html>
<head> <link rel="StyleSheet" type="text/css" href="js/dojo/dijit/themes/tundra/tundra.css"> <script type="text/javascript"> var djConfig = { baseScriptUri : "js/dojo/", parseOnLoad : true }; </script> <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script> <script> dojo.require("dijit.layout.TabContainer"); dojo.require("dijit.layout.ContentPane"); dojo.require("dojo.parser"); dojo.require("dojo.Button"); </script> </head> <body class="tundra" onload=f()>
One
Two
Three
<script type="dojo/method" event="onClose" args="evt"> alert("Closing", this.title); return true; //must return true for close to occur! </script>
four
</body> </html>
</source>
Create TabContainer
<source lang="html4strict">
<html>
<head> <link rel="StyleSheet" type="text/css" href="js/dojo/dijit/themes/tundra/tundra.css"> <script type="text/javascript"> var djConfig = { baseScriptUri : "js/dojo/", parseOnLoad : true }; </script> <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script> <script> dojo.require("dojo.parser"); dojo.require("dijit.layout.ContentPane"); dojo.require("dijit.layout.TabContainer"); dojo.addOnLoad(show); function show() { var myDijit = new dijit.layout.TabContainer({ style : "width:800px;height:600px;" }); dojo.byId("my").appendChild(myDijit.domNode); var myPane1 = new dijit.layout.ContentPane({title : "A", closable : true }); myPane1.setContent("A"); myDijit.addChild(myPane1); var myPane2 = new dijit.layout.ContentPane({title : "B" }); myPane2.setContent("B"); myDijit.addChild(myPane2); var myPane3 = new dijit.layout.ContentPane({ title : "C", selected : true, href : "http://www.wbex.ru" }); myDijit.addChild(myPane3); myDijit.startup(); } </script> </head> <body class="tundra">
</body>
</html>
</source>
Set Tab position
<source lang="html4strict">
<html>
<head> <link rel="StyleSheet" type="text/css" href="js/dojo/dijit/themes/tundra/tundra.css"> <script type="text/javascript"> var djConfig = { baseScriptUri : "js/dojo/", parseOnLoad : true }; </script> <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script> <script> dojo.require("dijit.layout.TabContainer"); dojo.require("dijit.layout.ContentPane"); dojo.require("dojo.parser"); dojo.require("dojo.Button"); function f(){ var container = new dijit.layout.TabContainer({ tabPosition: "left-h", style : "width:200px;height:200px;" }, "foo"); var leftChild = new dijit.layout.ContentPane({title : "tab1"}); leftChild.domNode.innerHTML="tab 1"; var rightChild = new dijit.layout.ContentPane({title : "tab2", closable: true}); rightChild.domNode.innerHTML="tab 2"; container.addChild(leftChild); container.addChild(rightChild); container.startup( ); } </script> </head> <body class="tundra" onload=f()>
</body> </html>
</source>
Set tab title
<source lang="html4strict">
<html>
<head> <link rel="StyleSheet" type="text/css" href="js/dojo/dijit/themes/tundra/tundra.css"> <script type="text/javascript"> var djConfig = { baseScriptUri : "js/dojo/", parseOnLoad : true }; </script> <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script> <script> dojo.require("dijit.layout.TabContainer"); dojo.require("dijit.layout.ContentPane"); dojo.require("dojo.parser"); dojo.require("dojo.Button"); </script> </head> <body class="tundra" onload=f()>
One
Two
Three
<script type="dojo/method" event="onClose" args="evt"> alert("Closing", this.title); return true; //must return true for close to occur! </script>
four
</body> </html>
</source>
Tabbed pane with title
<source lang="html4strict">
<html>
<head> <link rel="StyleSheet" type="text/css" href="js/dojo/dijit/themes/tundra/tundra.css"> <script type="text/javascript"> var djConfig = { baseScriptUri : "js/dojo/", parseOnLoad : true }; </script> <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script> <script> dojo.require("dojo.parser"); dojo.require("dijit.layout.ContentPane"); dojo.require("dijit.layout.TabContainer"); </script> </head> <body class="tundra">
A
B
C
</body>
</html>
</source>
Three tabs
<source lang="html4strict">
<html>
<head> <link rel="StyleSheet" type="text/css" href="js/dojo/dijit/themes/tundra/tundra.css"> <script type="text/javascript"> var djConfig = { baseScriptUri : "js/dojo/", parseOnLoad : true }; </script> <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script> <script> dojo.require("dojo.parser"); dojo.require("dijit.layout.ContentPane"); dojo.require("dijit.layout.TabContainer"); dojo.require("dijit.form.Button"); </script> </head> <body class="tundra">
First Tab
Second Tab
Third Tab
</body>
</html>
</source>