Skip to content

Instantly share code, notes, and snippets.

@gabehamilton

gabehamilton/dojo-mobile-base-with-views

Created May 30, 2013 04:52
Show Gist options
  • Save gabehamilton/5675789 to your computer and use it in GitHub Desktop.
Save gabehamilton/5675789 to your computer and use it in GitHub Desktop.
Download ZIP
Starting template for dojo mobile apps with two example views. From http://dojotoolkit.org/documentation/tutorials/1.9/mobile/tweetview/getting_started/
Raw
dojo-mobile-base-with-views
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"
content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>Your Application Name</title>
<!-- Optionally hard code theme and remove deviceTheme below
<link href="//ajax.googleapis.com/ajax/libs/dojo/1.9.0/dojox/mobile/themes/iphone/iphone.css"
rel="stylesheet"></link>
-->
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.9.0/dojo/dojo.js"
data-dojo-config="async:true"></script>
<script>
// Load the widget parser and mobile base
require(["dojox/mobile/parser", "dojox/mobile/deviceTheme", "dojox/mobile"],
function(parser, deviceTheme) {
// Parse the page for widgets!
parser.parse();
});
</script>
</head>
<body>
<!-- the view or "page"; select it as the "home" screen -->
<div id="settings" data-dojo-type="dojox.mobile.View" data-dojo-props="selected: true">
<!-- a sample heading -->
<h1 data-dojo-type="dojox.mobile.Heading">Settings</h1>
<!-- a rounded rectangle list container -->
<ul data-dojo-type="dojox.mobile.RoundRectList">
<!-- list item with an icon containing a switch -->
<li data-dojo-type="dojox.mobile.ListItem" data-dojo-props="icon:'../../app/images/i-icon-1.png'">
Airplane Mode
<!-- the switch -->
<div class="mblItemSwitch" data-dojo-type="dojox.mobile.Switch"></div>
</li>
<li data-dojo-type="dojox.mobile.ListItem"
data-dojo-props="icon:'../../app/images/i-icon-2.png', rightText:'mac', moveTo: 'general'">
Wi-Fi
</li>
<li data-dojo-type="dojox.mobile.ListItem"
data-dojo-props="icon:'../../app/images/i-icon-3.png', rightText:'AcmePhone'">
Carrier
</li>
</ul>
</div>
<div id="general" data-dojo-type="dojox.mobile.View">
<h1 data-dojo-type="dojox.mobile.Heading" data-dojo-props="back:'Settings', moveTo:'settings'">
General
</h1>
<ul data-dojo-type="dojox.mobile.RoundRectList">
<li data-dojo-type="dojox.mobile.ListItem" data-dojo-props="moveTo:'about'">
About
</li>
<li data-dojo-type="dojox.mobile.ListItem" data-dojo-props="rightText: '2h 40m', moveTo: 'about'">
Usage
</li>
</ul>
</div>
<div id="about" data-dojo-type="dojox.mobile.View">
<h1 data-dojo-type="dojox.mobile.Heading" data-dojo-props="back:'General', moveTo:'general'">
About
</h1>
<h2 data-dojo-type="dojox.mobile.RoundRectCategory">Generic Mobile Device</h2>
<ul data-dojo-type="dojox.mobile.RoundRectList">
<li data-dojo-type="dojox.mobile.ListItem" data-dojo-props="rightText:'AcmePhone'">
Network
</li>
<li data-dojo-type="dojox.mobile.ListItem" data-dojo-props="rightText:'AcmePhone'">
Line
</li>
<li data-dojo-type="dojox.mobile.ListItem" data-dojo-props="rightText:'1024'">
Songs
</li>
<li data-dojo-type="dojox.mobile.ListItem" data-dojo-props="rightText:'10'">
Videos
</li>
<li data-dojo-type="dojox.mobile.ListItem" data-dojo-props="rightText:'96'">
Photos
</li>
<li data-dojo-type="dojox.mobile.ListItem" data-dojo-props="rightText:'2'">
Applications
</li>
<li data-dojo-type="dojox.mobile.ListItem" data-dojo-props="rightText:'29.3 BG'">
Capacity
</li>
<li data-dojo-type="dojox.mobile.ListItem" data-dojo-props="rightText:'28.0 BG'">
Available
</li>
<li data-dojo-type="dojox.mobile.ListItem" data-dojo-props="rightText:'3.0 (7A341)'">
Version
</li>
</ul>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment