Skip to content

Instantly share code, notes, and snippets.

@phiggins42

phiggins42/tabrotator.html

Created September 10, 2010 16:40
Show Gist options
  • Save phiggins42/573962 to your computer and use it in GitHub Desktop.
Save phiggins42/573962 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
tabrotator.html
<!DOCTYPE html>
<html>
<head>
<title>Dojo x-domain Skeleton</title>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dijit/themes/claro/claro.css">
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js"></script>
<script>
dojo.require("dijit.layout.TabContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.form.Button");
var positions = ["top", "left", "bottom", "right"];
var getRotated = function(ar){
var x = positions.shift();
positions.push(x);
return x;
}
dojo.ready(function(){
var tabs = new dijit.layout.TabContainer({
style:"height:100px; width:400px",
tabPosition: getRotated()
}).placeAt("bar");
new dijit.layout.ContentPane({ title:"Tab 1", content:"<p>oh hai</p>" }).placeAt(tabs);
new dijit.layout.ContentPane({ title:"Tab 2", content:"<p>oh hai</p>" }).placeAt(tabs);
tabs.startup();
new dijit.form.Button({
label:"Rotate Tabs",
onClick: function(){
var oldtabs = tabs; // save a ref
// make a new TabContainer with a rotated position
tabs = new dijit.layout.TabContainer({
style:"height:100px; width:400px",
tabPosition: getRotated()
}).placeAt("bar", "first"); // insertBefore at #bar
// and steal the tabs in the one we're about to kill off
dojo.forEach(oldtabs.getChildren(), function(child){
child.placeAt(tabs); // and place them in the newone
});
oldtabs.destroyRecursive(); // kill the old container
tabs.startup(); // start the new container layout
}
}).placeAt("control")
});
</script>
</head>
<body class="claro">
<div id="bar"></div>
<div id="control" style="margin-top:15px"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment