Hi Robert,
Sorry I didn't respond sooner. For some reason I was unable to reply or comment on GeoNet until this week.
I added some html to Splash/Widget.html (see below), but I'm not sure about the javascript.
Splash/Widget.html:
====================================================================
<div>
<div class="overlay" data-dojo-attach-point="overlayNode"></div>
<div class="envelope" data-dojo-attach-point="envelopeNode">
<div class="splash-container" data-dojo-attach-point="splashContainerNode">
<div class="custom-content">
<div data-dojo-attach-point="customContentNode" id="tc1-prog"></div>
</div>
<div class="footer" data-dojo-attach-point="footerNode">
<div data-dojo-attach-point="confirmCheck"></div>
<div class="jimu-btn jimu-float-trailing" data-dojo-attach-point="okNode" data-dojo-attach-event="onclick:onOkClick">${nls.ok}</div>
</div>
</div>
</div>
</div>
====================================================================
I modified the Splash/config.json and configs/Splash/config_Splash.json files so I have splashContent, splashContent2, splashContent3, splashContent4 and splashContent5, one for each of the five tabs.
Here is what I have for the Splash/Widget.js, specifically the class inclusions and postCreate function (modifications bolded):
====================================================================
define([
'dojo/_base/declare',
'jimu/BaseWidget',
'dijit/_WidgetsInTemplateMixin',
'dijit/layout/TabContainer',
'dijit/layout/ContentPane',
'dojo/_base/lang',
'dojo/_base/html',
'dojo/on',
'dojo/query',
'dojo/io-query',
'dojo/cookie',
'jimu/dijit/CheckBox',
'jimu/tokenUtils',
'jimu/utils',
'dojo/domReady!'
],
function (declare, BaseWidget, _WidgetsInTemplateMixin, TabContainer, ContentPane, lang, html, on, query, ioquery, cookie, CheckBox, TokenUtils, utils) {
var clazz = declare([BaseWidget, _WidgetsInTemplateMixin], {
baseClass: 'jimu-widget-splash',
_hasContent: null,
_hasContent2: null,
_hasContent3: null,
_hasContent4: null,
_hasContent5: null,
_requireConfirm: null,
_isClosed: false,
postCreate: function () {
this.inherited(arguments);
this._hasContent = this.config.splash && this.config.splash.splashContent;
this._hasContent2 = this.config.splash && this.config.splash.splashContent2;
this._hasContent3 = this.config.splash && this.config.splash.splashContent3;
this._hasContent4 = this.config.splash && this.config.splash.splashContent4;
this._hasContent5 = this.config.splash && this.config.splash.splashContent5;
this._requireConfirm = this.config.splash && this.config.splash.requireConfirm;
this._showOption = this.config.splash && this.config.splash.showOption;
this._confirmEverytime = this.config.splash && this.config.splash.confirmEverytime;
tc = new TabContainer({
style: "height: 600px; width:600px;"
}, "tc1-prog");
var cp1 = new ContentPane({
title: "Disclaimer",
content: this._hasContent
});
tc.addChild(cp1);
var cp2 = new ContentPane({
title: "Contact",
content: this._hasContent2
});
tc.addChild(cp2);
var cp3 = new ContentPane({
title: "Welcome",
content: this._hasContent3
});
tc.addChild(cp3);
var cp4 = new ContentPane({
title: "About",
content: this._hasContent4
});
tc.addChild(cp4);
var cp5 = new ContentPane({
title: "Help",
content: this._hasContent5
});
tc.addChild(cp5);
tc.startup();
this.customContentNode.innerHTML = tc;
if (!this._requireConfirm && !this._showOption) {
html.setStyle(this.confirmCheck, 'display', 'none');
html.addClass(this.okNode, 'enable-btn');
} else {
var hint = "";
if (this._requireConfirm) {
hint = this.config.splash.confirmText;
html.addClass(this.okNode, 'disable-btn');
} else {
hint = this.nls.notShowAgain;
html.addClass(this.okNode, 'enable-btn');
}
this.confirmCheck = new CheckBox({
label: utils.stripHTML(hint),
checked: false
}, this.confirmCheck);
this.own(on(this.confirmCheck.domNode, 'click', lang.hitch(this, this.onCheckBoxClick)));
html.setAttr(this.confirmCheck.domNode, 'title', utils.stripHTML(hint));
this.confirmCheck.startup();
}
if (this.config && this.config.splash && this.config.splash.backgroundColor) {
html.setStyle(
this.splashContainerNode,
'backgroundColor',
this.config.splash.backgroundColor
);
}
this.urlParams = this.getUrlParams();
},
====================================================================
I wasn't sure what to do with the _resizeContentImg function that you mentioned.
I contacted ESRI Support Services about modifying the Splash widget to include tabs and was directed to the following thread: https://community.esri.com/thread/122299.
I've been going through the tutorials on dojotoolkit.org and have looked at various ESRI resources, but I haven't found a textbook like guide to learning dojo. Do you have any recommendations?
Thanks in advance for any assistance you can provide.
William