//Programatic tabContainer in dojo
<!DOCTYPE html>
<html >
<head>
//including required css files
<link rel="stylesheet" href="<%=request.getContextPath() + "/dojo1.4.3/dijit/themes/tundra/tundra.css"%>" />//including tundra css
<link rel="stylesheet" href="<%=request.getContextPath() + "/dojo1.4.3/dijit/themes/tundra/layout/TabContainer.css"%>" />//including tabcontainer css
<link rel="stylesheet" href="<%=request.getContextPath() + "/dojo1.4.3/dijit/themes/tundra/layout/ContentPane.css"%>" />//including contentPane css
<script language="JavaScript" src="<%=request.getContextPath() +"/dojo1.4.3/dojo/dojo.js"%>" djconfig="parseOnLoad:true"></script> //declaring parse on load true
<script>
//importing required js files
dojo.require("dojo.parser");
dojo.require("dijit.layout.TabContainer");
dojo.require("dijit.layout.ContentPane");
dojo.ready(function(){
var tc = new dijit.layout.TabContainer({//creating main tabContainer
style: "height: 100%; width: 100%;"
}, "progTab");
var cp1 = new dijit.layout.ContentPane({//creating first tab inside the container
title: "Home",
content: "Welcome to dojo "
});
tc.addChild(cp1);//appending content pane to tabContainer
var cp2 = new dijit.layout.ContentPane({//creating second tab inside the container
title: "Contactus",
content: "chennai"
});
tc.addChild(cp2);//appending content pane to tabContainer
tc.startup();//Starting tabContainer
});
</script>
</head>
<body class="tundra">
<div style="width: 350px; height: 290px">
<div id="progTab"></div>//finally all content will be placed here
</div>
</body>
</html>
output:-
<!DOCTYPE html>
<html >
<head>
//including required css files
<link rel="stylesheet" href="<%=request.getContextPath() + "/dojo1.4.3/dijit/themes/tundra/tundra.css"%>" />//including tundra css
<link rel="stylesheet" href="<%=request.getContextPath() + "/dojo1.4.3/dijit/themes/tundra/layout/TabContainer.css"%>" />//including tabcontainer css
<link rel="stylesheet" href="<%=request.getContextPath() + "/dojo1.4.3/dijit/themes/tundra/layout/ContentPane.css"%>" />//including contentPane css
<script language="JavaScript" src="<%=request.getContextPath() +"/dojo1.4.3/dojo/dojo.js"%>" djconfig="parseOnLoad:true"></script> //declaring parse on load true
<script>
//importing required js files
dojo.require("dojo.parser");
dojo.require("dijit.layout.TabContainer");
dojo.require("dijit.layout.ContentPane");
dojo.ready(function(){
var tc = new dijit.layout.TabContainer({//creating main tabContainer
style: "height: 100%; width: 100%;"
}, "progTab");
var cp1 = new dijit.layout.ContentPane({//creating first tab inside the container
title: "Home",
content: "Welcome to dojo "
});
tc.addChild(cp1);//appending content pane to tabContainer
var cp2 = new dijit.layout.ContentPane({//creating second tab inside the container
title: "Contactus",
content: "chennai"
});
tc.addChild(cp2);//appending content pane to tabContainer
tc.startup();//Starting tabContainer
});
</script>
</head>
<body class="tundra">
<div style="width: 350px; height: 290px">
<div id="progTab"></div>//finally all content will be placed here
</div>
</body>
</html>
output:-
No comments:
Post a Comment