Hello,
Does anybody have any experience using the declarative method to create a dijit button that opens a tabbed container onclick?
-Brandon
https://community.esri.com/groups/web-app-builder-custom-widgets?sr=search&searchId=22738830-37c1-44ac-a9c0-9ac895e649cd&searchIndex=3
https://community.esri.com/community/gis/web-gis/storymaps?sr=search&searchId=ac5c1ff9-6bca-4e5b-8efc-62e87a87f7ff&searchIndex=0
Brandon,
Here is a sample:
<SPAN class="operator token"><</SPAN><SPAN class="operator token">!</SPAN>DOCTYPE html<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>html<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>head<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>meta http<SPAN class="operator token">-</SPAN>equiv<SPAN class="operator token">=</SPAN><SPAN class="string token">"Content-Type"</SPAN> content<SPAN class="operator token">=</SPAN><SPAN class="string token">"text/html; charset=utf-8"</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>meta name<SPAN class="operator token">=</SPAN><SPAN class="string token">"viewport"</SPAN> content<SPAN class="operator token">=</SPAN><SPAN class="string token">"initial-scale=1, maximum-scale=1,user-scalable=no"</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>title<SPAN class="operator token">></SPAN>Edit Tools<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>title<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>link rel<SPAN class="operator token">=</SPAN><SPAN class="string token">"stylesheet"</SPAN> href<SPAN class="operator token">=</SPAN><SPAN class="string token"><SPAN>"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=https%3A%2F%2Fjs.arcgis.com%2F3.22%2Fdijit%2Fthemes%2Fclaro%2Fclaro.css" target="_blank">https://js.arcgis.com/3.22/dijit/themes/claro/claro.css</A><SPAN>"</SPAN></SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>link rel<SPAN class="operator token">=</SPAN><SPAN class="string token">"stylesheet"</SPAN> href<SPAN class="operator token">=</SPAN><SPAN class="string token"><SPAN>"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=https%3A%2F%2Fjs.arcgis.com%2F3.22%2Fesri%2Fcss%2Fesri.css" target="_blank">https://js.arcgis.com/3.22/esri/css/esri.css</A><SPAN>"</SPAN></SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>style<SPAN class="operator token">></SPAN> html<SPAN class="punctuation token">,</SPAN> body<SPAN class="punctuation token">,</SPAN> #mainWindow <SPAN class="punctuation token">{</SPAN> font<SPAN class="operator token">-</SPAN>family<SPAN class="punctuation token">:</SPAN> sans<SPAN class="operator token">-</SPAN>serif<SPAN class="punctuation token">;</SPAN> height<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">100</SPAN><SPAN class="operator token">%</SPAN><SPAN class="punctuation token">;</SPAN> width<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">100</SPAN><SPAN class="operator token">%</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> html<SPAN class="punctuation token">,</SPAN> body <SPAN class="punctuation token">{</SPAN> margin<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">;</SPAN> padding<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> #mainWindow <SPAN class="punctuation token">{</SPAN> visibility<SPAN class="punctuation token">:</SPAN> hidden<SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> #holder <SPAN class="punctuation token">{</SPAN> width<SPAN class="punctuation token">:</SPAN> 300px<SPAN class="punctuation token">;</SPAN> height<SPAN class="punctuation token">:</SPAN> auto<SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>style<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>script src<SPAN class="operator token">=</SPAN><SPAN class="string token"><SPAN>"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=https%3A%2F%2Fjs.arcgis.com%2F3.22%2F" target="_blank">https://js.arcgis.com/3.22/</A><SPAN>"</SPAN></SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>script<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>script<SPAN class="operator token">></SPAN> <SPAN class="keyword token">var</SPAN> map<SPAN class="punctuation token">,</SPAN> tp<SPAN class="punctuation token">;</SPAN> <SPAN class="token function">require</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN> <SPAN class="string token">"esri/map"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"dojo/parser"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"dojo/dom"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"dojo/dom-style"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"dijit/registry"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"dijit/TitlePane"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"dijit/layout/TabContainer"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"dojo/on"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"dijit/layout/ContentPane"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"dijit/layout/BorderContainer"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"dojo/domReady!"</SPAN> <SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN> Map<SPAN class="punctuation token">,</SPAN> parser<SPAN class="punctuation token">,</SPAN> dom<SPAN class="punctuation token">,</SPAN> domStyle<SPAN class="punctuation token">,</SPAN> registry<SPAN class="punctuation token">,</SPAN> TitlePane<SPAN class="punctuation token">,</SPAN> TabContainer<SPAN class="punctuation token">,</SPAN> on<SPAN class="punctuation token">,</SPAN> ContentPane <SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> parser<SPAN class="punctuation token">.</SPAN><SPAN class="token function">parse</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> domStyle<SPAN class="punctuation token">.</SPAN><SPAN class="keyword token">set</SPAN><SPAN class="punctuation token">(</SPAN>registry<SPAN class="punctuation token">.</SPAN><SPAN class="token function">byId</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"mainWindow"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN>domNode<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"visibility"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"visible"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> map <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Map</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"map"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN> basemap<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"streets"</SPAN><SPAN class="punctuation token">,</SPAN> center<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">3.955</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">59.338</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> zoom<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">3</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN>dom<SPAN class="punctuation token">.</SPAN><SPAN class="token function">byId</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"openPaneBtn"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"click"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="keyword token">if</SPAN><SPAN class="punctuation token">(</SPAN>tp<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN> <SPAN class="keyword token">return</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> tp <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">TitlePane</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN> title<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Tools"</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> dom<SPAN class="punctuation token">.</SPAN><SPAN class="token function">byId</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"holder"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">appendChild</SPAN><SPAN class="punctuation token">(</SPAN>tp<SPAN class="punctuation token">.</SPAN>domNode<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">var</SPAN> tabs <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">TabContainer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN> region<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"center"</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">placeAt</SPAN><SPAN class="punctuation token">(</SPAN>tp<SPAN class="punctuation token">.</SPAN>containerNode<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> tabs<SPAN class="punctuation token">.</SPAN><SPAN class="token function">startup</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">var</SPAN> cp1 <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">ContentPane</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN> title<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Food"</SPAN><SPAN class="punctuation token">,</SPAN> content<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"We offer amazing food"</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> tabs<SPAN class="punctuation token">.</SPAN><SPAN class="token function">addChild</SPAN><SPAN class="punctuation token">(</SPAN>cp1<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">var</SPAN> cp2 <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">ContentPane</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN> title<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Drinks"</SPAN><SPAN class="punctuation token">,</SPAN> content<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"We are known for our drinks."</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> tabs<SPAN class="punctuation token">.</SPAN><SPAN class="token function">addChild</SPAN><SPAN class="punctuation token">(</SPAN>cp2<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> tp<SPAN class="punctuation token">.</SPAN><SPAN class="token function">startup</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> tp<SPAN class="punctuation token">.</SPAN>containerNode<SPAN class="punctuation token">.</SPAN>style<SPAN class="punctuation token">.</SPAN>height <SPAN class="operator token">=</SPAN> <SPAN class="string token">"200px"</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>script<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>head<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>body <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"claro"</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"mainWindow"</SPAN> data<SPAN class="operator token">-</SPAN>dojo<SPAN class="operator token">-</SPAN>type<SPAN class="operator token">=</SPAN><SPAN class="string token">"dijit/layout/BorderContainer"</SPAN> data<SPAN class="operator token">-</SPAN>dojo<SPAN class="operator token">-</SPAN>props<SPAN class="operator token">=</SPAN><SPAN class="string token">"design:'headline', gutters:'false'"</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"header"</SPAN> data<SPAN class="operator token">-</SPAN>dojo<SPAN class="operator token">-</SPAN>type<SPAN class="operator token">=</SPAN><SPAN class="string token">"dijit/layout/ContentPane"</SPAN> data<SPAN class="operator token">-</SPAN>dojo<SPAN class="operator token">-</SPAN>props<SPAN class="operator token">=</SPAN><SPAN class="string token">"region:'top'"</SPAN> style<SPAN class="operator token">=</SPAN><SPAN class="string token">"height:30px;text-align:left;font-weight:bold;font-size:14px;color:#400D12;"</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>button id<SPAN class="operator token">=</SPAN><SPAN class="string token">"openPaneBtn"</SPAN> type<SPAN class="operator token">=</SPAN><SPAN class="string token">"button"</SPAN> data<SPAN class="operator token">-</SPAN>dojo<SPAN class="operator token">-</SPAN>type<SPAN class="operator token">=</SPAN><SPAN class="string token">"dijit/form/Button"</SPAN><SPAN class="operator token">></SPAN>Tools<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>button<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"map"</SPAN> data<SPAN class="operator token">-</SPAN>dojo<SPAN class="operator token">-</SPAN>type<SPAN class="operator token">=</SPAN><SPAN class="string token">"dijit/layout/ContentPane"</SPAN> data<SPAN class="operator token">-</SPAN>dojo<SPAN class="operator token">-</SPAN>props<SPAN class="operator token">=</SPAN><SPAN class="string token">"region:'center'"</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"holder"</SPAN> style<SPAN class="operator token">=</SPAN><SPAN class="string token">"position:absolute; left:105px; top:205px; z-Index:999;"</SPAN> <SPAN class="operator token">/</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>body<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>html<SPAN class="operator token">></SPAN> <SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>
Hi Robert,
This example is exactly what I was searching for. Thanks for the help.
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(); });
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.
Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.
