JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojox/mobile/themes/iphone/iphone.css">
<div id="mainView" data-dojo-type="dojox.mobile.View">
<h1 data-dojo-type="dojox.mobile.Heading" label="Header Text" fixed="top">
</h1>
<ul id="tabBar" dojoType="dojox.mobile.TabBar" barType="segmentedControl" fixed="top">
</ul>
<div id="placeholderView" dojoType="dojox.mobile.ScrollableView">
<ul dojoType="dojox.mobile.RoundRectList">
<li dojoType="dojox.mobile.ListItem">Loading...</li>
</ul>
</div>
<h2 data-dojo-type="dojox.mobile.Heading" fixed="bottom">
<div><span>Footer Text</span></div>
</h2>
</div>
JavaScript
require([
"dojo/ready",
"dojox/mobile/parser",
"dojox/mobile",
"dojox/mobile/compat",
"dojox/mobile/ScrollableView",
"dojox/mobile/SwapView",
"dojox/mobile/RoundRectList",
"dojox/mobile/Heading",
"dojox/mobile/ToolBarButton",
"dojox/mobile/TabBar",
"dojox/mobile/TabBarButton",
"dojox/mobile/Button",
"dojox/mobile/TextBox",
"dojox/mobile/TextArea",
"dojox/mobile/RadioButton",
"dijit/form/DataList",
"dijit/registry",
"dojox/mobile/ComboBox",
"dojo/back",
"dojo/date/locale"
], function(registry, parser, mobile, dojo, ready) {
setTimeout(changeViews, 3000);
});
function addView(name) {
var mainView = dijit.byId("mainView");
dijit.byId("tabBar").addChild(new dojox.mobile.TabBarButton(
{ label: name, moveTo: name, selected: name == "view1" }));
var newList = new dojox.mobile.RoundRectList();
newList.addChild(new dojox.mobile.ListItem({ label: name }));
var newView = new dojox.mobile.ScrollableView(
{ id: name, selected: name == "view1" });
newView.addChild(newList);
mainView.addChild(newView, mainView.getChildren().length - 1);
}
function changeViews() {
dijit.byId("placeholderView").destroy();
addView("view1");
addView("view2");
addView("view3");
}