//Example for tabContainer in dojo
<!DOCTYPE html>
<html >
<head>
//import required css
<link rel="stylesheet" href="<%=request.getContextPath() + "/dojo1.4.3/dijit/themes/tundra/tundra.css"%>" />
<link rel="stylesheet" href="<%=request.getContextPath() + "/dojo1.4.3/dijit/themes/tundra/layout/TabContainer.css"%>" />
<link rel="stylesheet" href="<%=request.getContextPath() + "/dojo1.4.3/dijit/themes/tundra/layout/ContentPane.css"%>" />
<script language="JavaScript" src="<%=request.getContextPath() +"/dojo1.4.3/dojo/dojo.js"%>" djconfig="parseOnLoad:true"></script> //enabling add on load
<script>
dojo.require("dojo.parser");
dojo.require("dijit.layout.TabContainer");
dojo.require("dijit.layout.ContentPane");
</script>
</head>
<body class="tundra">//apply the tundra css style
<div style="width: 350px; height: 300px">//you can change height and width
<div dojoType="dijit.layout.TabContainer" style="width: 100%; height: 100%;">//our main container
<div dojoType="dijit.layout.ContentPane" title="Home" selected="true">
Welcome to dojo tutorial //content inside the tabs
</div>
<div dojoType="dijit.layout.ContentPane" title="AboutUs">//individual tabs
software develpper//content inside the tabs
</div>
<div dojoType="dijit.layout.ContentPane" title="Contact us" closable="true">//tabs can be closed
chennai//content inside the tabs
</div>
</div>
</div>
</body>
</html>
output:-
<!DOCTYPE html>
<html >
<head>
//import required css
<link rel="stylesheet" href="<%=request.getContextPath() + "/dojo1.4.3/dijit/themes/tundra/tundra.css"%>" />
<link rel="stylesheet" href="<%=request.getContextPath() + "/dojo1.4.3/dijit/themes/tundra/layout/TabContainer.css"%>" />
<link rel="stylesheet" href="<%=request.getContextPath() + "/dojo1.4.3/dijit/themes/tundra/layout/ContentPane.css"%>" />
<script language="JavaScript" src="<%=request.getContextPath() +"/dojo1.4.3/dojo/dojo.js"%>" djconfig="parseOnLoad:true"></script> //enabling add on load
<script>
dojo.require("dojo.parser");
dojo.require("dijit.layout.TabContainer");
dojo.require("dijit.layout.ContentPane");
</script>
</head>
<body class="tundra">//apply the tundra css style
<div style="width: 350px; height: 300px">//you can change height and width
<div dojoType="dijit.layout.TabContainer" style="width: 100%; height: 100%;">//our main container
<div dojoType="dijit.layout.ContentPane" title="Home" selected="true">
Welcome to dojo tutorial //content inside the tabs
</div>
<div dojoType="dijit.layout.ContentPane" title="AboutUs">//individual tabs
software develpper//content inside the tabs
</div>
<div dojoType="dijit.layout.ContentPane" title="Contact us" closable="true">//tabs can be closed
chennai//content inside the tabs
</div>
</div>
</div>
</body>
</html>
output:-
No comments:
Post a Comment