Hello,
Does anybody have any experience using the declarative method to create a dijit button that opens a tabbed container onclick?
-Brandon
Solved! Go to Solution.
Brandon,
Here is a sample:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Edit Tools</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.22/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.22/esri/css/esri.css">
<style>
html,
body,
#mainWindow {
font-family: sans-serif;
height: 100%;
width: 100%;
}
html,
body {
margin: 0;
padding: 0;
}
#mainWindow {
visibility: hidden;
}
#holder {
width: 300px;
height: auto;
}
</style>
<script src="https://js.arcgis.com/3.22/"></script>
<script>
var map, tp;
require([
"esri/map",
"dojo/parser",
"dojo/dom",
"dojo/dom-style",
"dijit/registry",
"dijit/TitlePane",
"dijit/layout/TabContainer",
"dojo/on",
"dijit/layout/ContentPane",
"dijit/layout/BorderContainer",
"dojo/domReady!"
], function(
Map,
parser, dom, domStyle, registry, TitlePane, TabContainer, on, ContentPane
) {
parser.parse();
domStyle.set(registry.byId("mainWindow").domNode, "visibility", "visible");
map = new Map("map", {
basemap: "streets",
center: [3.955, 59.338],
zoom: 3
});
on(dom.byId("openPaneBtn"), "click", function() {
if(tp){
return;
}
tp = new TitlePane({
title: "Tools"
});
dom.byId("holder").appendChild(tp.domNode);
var tabs = new TabContainer({
region: "center"
}).placeAt(tp.containerNode);
tabs.startup();
var cp1 = new ContentPane({
title: "Food",
content: "We offer amazing food"
});
tabs.addChild(cp1);
var cp2 = new ContentPane({
title: "Drinks",
content: "We are known for our drinks."
});
tabs.addChild(cp2);
tp.startup();
tp.containerNode.style.height = "200px"
});
});
</script>
</head>
<body class="claro">
<div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:'false'">
<div id="header" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'" style="height:30px;text-align:left;font-weight:bold;font-size:14px;color:#400D12;">
<button id="openPaneBtn" type="button" data-dojo-type="dijit/form/Button">Tools</button>
</div>
<div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
</div>
</div>
<div id="holder" style="position:absolute; left:105px; top:205px; z-Index:999;" />
</body>
</html>
I plan on inserting content into the tabbed containers later on. Two select functions. A draw select in one tab and a search select in the other.
This is what I have so far as html: <button data-dojo-type="dijit/form/Button" id="togglebutton" type="button" style="position:absolute; left:5px; bottom:7px; color:#fff; z-index:50;"><div style="width: 350px; height: 290px">
<div style="width: 350px; height: 290px">
<div id="tc1-prog"></div>
</button>
This is the script:
require(["dijit/layout/TabContainer", "dijit/layout/ContentPane", "dojo/domReady!"], function(TabContainer, ContentPane){
var tc = new TabContainer({
style: "height: 100%; width: 100%;"
}, "tc1-prog");
var cp1 = new ContentPane({
title: "Food",
content: "We offer amazing food"
});
tc.addChild(cp1);
var cp2 = new ContentPane({
title: "Drinks",
content: "We are known for our drinks."
});
tc.addChild(cp2);
tc.startup();
});
-Brandon
Brandon,
Here is a sample:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Edit Tools</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.22/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.22/esri/css/esri.css">
<style>
html,
body,
#mainWindow {
font-family: sans-serif;
height: 100%;
width: 100%;
}
html,
body {
margin: 0;
padding: 0;
}
#mainWindow {
visibility: hidden;
}
#holder {
width: 300px;
height: auto;
}
</style>
<script src="https://js.arcgis.com/3.22/"></script>
<script>
var map, tp;
require([
"esri/map",
"dojo/parser",
"dojo/dom",
"dojo/dom-style",
"dijit/registry",
"dijit/TitlePane",
"dijit/layout/TabContainer",
"dojo/on",
"dijit/layout/ContentPane",
"dijit/layout/BorderContainer",
"dojo/domReady!"
], function(
Map,
parser, dom, domStyle, registry, TitlePane, TabContainer, on, ContentPane
) {
parser.parse();
domStyle.set(registry.byId("mainWindow").domNode, "visibility", "visible");
map = new Map("map", {
basemap: "streets",
center: [3.955, 59.338],
zoom: 3
});
on(dom.byId("openPaneBtn"), "click", function() {
if(tp){
return;
}
tp = new TitlePane({
title: "Tools"
});
dom.byId("holder").appendChild(tp.domNode);
var tabs = new TabContainer({
region: "center"
}).placeAt(tp.containerNode);
tabs.startup();
var cp1 = new ContentPane({
title: "Food",
content: "We offer amazing food"
});
tabs.addChild(cp1);
var cp2 = new ContentPane({
title: "Drinks",
content: "We are known for our drinks."
});
tabs.addChild(cp2);
tp.startup();
tp.containerNode.style.height = "200px"
});
});
</script>
</head>
<body class="claro">
<div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:'false'">
<div id="header" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'" style="height:30px;text-align:left;font-weight:bold;font-size:14px;color:#400D12;">
<button id="openPaneBtn" type="button" data-dojo-type="dijit/form/Button">Tools</button>
</div>
<div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
</div>
</div>
<div id="holder" style="position:absolute; left:105px; top:205px; z-Index:999;" />
</body>
</html>
Hi Robert,
This example is exactly what I was searching for. Thanks for the help.
-Brandon