mfajri
/
dojo_app
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
sample skeleton application with dojo toolkit & arcgis js api v 4.30
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
2 Commits
1 Branch
0 Tags
92 MiB
 
 
 
 
 
 
Tree: 249c04a309
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '249c04a309'
${ noResults }
dojo_app/js/library/dojox/mobile/tests/test_GridLayout-demo.html

220 lines
8.6 KiB
Raw Blame History

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<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>GridLayout</title>
<script type="text/javascript" src="../deviceTheme.js" data-dojo-config="mblThemeFiles: ['base','Button','EdgeToEdgeCategory','GridLayout','dojox/mobile/themes/common/domButtons.css']"></script>
<script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: true"></script>
<script type="text/javascript">
require([
"dojo/_base/connect",
"dojo/dom",
"dojo/ready",
"dijit/registry",
"dojox/mobile/TransitionEvent",
"dojox/mobile/iconUtils",
"dojox/mobile/parser",
"dojox/mobile",
"dojox/mobile/compat",
"dojox/mobile/ScrollableView",
"dojox/mobile/GridLayout",
"dojox/mobile/Pane",
"dojox/mobile/Button",
"dojox/mobile/EdgeToEdgeCategory",
"dojox/mobile/TextBox"
], function(connect, dom, ready, registry, TransitionEvent, iconUtils){
ready(function(){
iconUtils.createDomButton(dom.byId("Minus"));
iconUtils.createDomButton(dom.byId("Plus"));
});
goToSubMenu = function(id){
var widget = registry.byId("pane1");
var opts = {moveTo: "view2", transition: "slide", transitionDir: 1};
var ev = new TransitionEvent(widget.domNode, opts);
ev.dispatch()
};
goToOrder = function(id){
var widget = registry.byId("pane2-1");
var opts = {moveTo: "view3", transition: "slide", transitionDir: 1};
var ev = new TransitionEvent(widget.domNode, opts);
ev.dispatch()
};
plus = function(){
var widget = registry.byId("num");
valueInt = parseInt(widget.textbox.value);
valueInt = isNaN(valueInt) ? 0 : valueInt + 1;
widget.textbox.value = valueInt.toString()
};
minus = function(){
var widget = registry.byId("num");
valueInt = parseInt(widget.textbox.value);
valueInt = isNaN(valueInt) || valueInt <=0 ? 0 : valueInt - 1;
widget.textbox.value = valueInt.toString()
};
cancel = function(){
var widget = registry.byId("cancel");
var opts = {moveTo: "view2", transition: "slide", transitionDir: -1};
var ev = new TransitionEvent(widget.domNode, opts);
ev.dispatch()
};
ok = function(){
var widget = registry.byId("ok");
var opts = {moveTo: "view1", transition: "fade", transitionDir: -1};
var ev = new TransitionEvent(widget.domNode, opts);
ev.dispatch()
}
});
</script>
<style>
.myPane {
width: 100%;
height: 50px;
}
.line {
margin: 0;
position:relative;
border: 1px groove white;
width: 100%;
height: 100%;
}
.myIcon {
margin-top:28px;
margin-left:2px;
border-radius: 10px;
width:50px;
height:42px;
float:left;
}
.price {
float:right;
border-radius: 4px;
margin-top:0px;
margin-right:3px;
border: 2px groove #959da0;
padding: 0px 7px 0px 5px;
background-image: -webkit-gradient(linear, left top, left bottom, from(#959da0), to(#515761));
color: white;
font-size: 18px;
}
.OrderItem {
margin-top:15px;
margin-left:3px;
font-size: 18px;
}
.SubCategory {
margin-top:38px;
margin-left:55px;
font-size: 24px;
}
.Discription {
margin-top:17px;
margin-left:13px;
font-size: 18px;
}
.mybutton {
margin-top:30px;
margin-left:15%;
margin-right:15%;
width:70%;
}
.title {
color:white;
font-style:italic;
text-shadow:0px -1px 10px blue,1px 0px 10px blue,0px 1px 10px blue,-1px 0px 10px blue;
font-size:50px;
}
</style>
</head>
<body style="visibility:hidden;">
<div id="view1" data-dojo-type="dojox.mobile.ScrollableView">
<div data-dojo-type="dojox.mobile.GridLayout" data-dojo-props='cols:1' style="height:600px;">
<div data-dojo-type="dojox.mobile.Pane" style="width:100%;position:relative">
<img alt="" src='images/Mountain.jpg' style="width:100%;height:100%"/>
<div style="position:absolute;top:40%;left:10%;" class="title">Airport lounge <br>cafe</div>
</div>
<div data-dojo-type="dojox.mobile.GridLayout" data-dojo-props='cols:2' style="height: 300px;">
<div id="pane1" data-dojo-type="dojox.mobile.Pane" class="myPane" onclick="goToSubMenu(1)">
<div class="line"><img alt="" src='images/menu1.jpg' class="myIcon"/><div class="SubCategory">Caff</div></div>
</div>
<div id="pane2" data-dojo-type="dojox.mobile.Pane" class="myPane" onclick="goToSubMenu(2)">
<div class="line"><img alt="" src='images/menu2.jpg' class="myIcon"/><div class="SubCategory">Bakery</div></div>
</div>
<div id="pane3" data-dojo-type="dojox.mobile.Pane" class="myPane" onclick="goToSubMenu(3)">
<div class="line"><img alt="" src='images/menu3.jpg' class="myIcon"/><div class="SubCategory">Tea</div></div>
</div>
<div id="pane4" data-dojo-type="dojox.mobile.Pane" class="myPane" onclick="goToSubMenu(4)">
<div class="line"><img alt="" src='images/menu4.jpg' class="myIcon"/><div class="SubCategory">Cake</div></div>
</div>
<div id="pane5" data-dojo-type="dojox.mobile.Pane" class="myPane" onclick="goToSubMenu(5)">
<div class="line"><img alt="" src='images/menu5.jpg' class="myIcon"/><div class="SubCategory">Beverage</div></div>
</div>
<div id="pane6" data-dojo-type="dojox.mobile.Pane" class="myPane" onclick="goToSubMenu(6)">
<div class="line"><img alt="" src='images/menu6.jpg' class="myIcon"/><div class="SubCategory">Icecream</div></div>
</div>
</div>
</div>
</div>
<div id="view2" data-dojo-type="dojox.mobile.ScrollableView">
<div data-dojo-type="dojox.mobile.Heading" data-dojo-props='back:"Back", moveTo:"view1"'></div>
<div data-dojo-type="dojox.mobile.GridLayout" data-dojo-props='cols:2' style="height: 300px;">
<div id="pane2-1" data-dojo-type="dojox.mobile.Pane" class="myPane" onclick="goToOrder(1)">
<div class="line"><div class="Discription">Coffee<div class="price">4.00</div></div></div>
</div>
<div id="pane2-2" data-dojo-type="dojox.mobile.Pane" class="myPane" onclick="goToOrder(2)">
<div class="line"><div class="Discription">Cappuccino<div class="price">5.00</div></div></div>
</div>
<div id="pane2-3" data-dojo-type="dojox.mobile.Pane" class="myPane" onclick="goToOrder(3)">
<div class="line"><div class="Discription">Cafe' au lait<div class="price">5.00</div></div></div>
</div>
<div id="pane2-4" data-dojo-type="dojox.mobile.Pane" class="myPane" onclick="goToOrder(4)">
<div class="line"><div class="Discription">Espresso<div class="price">4.00</div></div></div>
</div>
<div id="pane2-5" data-dojo-type="dojox.mobile.Pane" class="myPane" onclick="goToOrder(5)">
<div class="line"><div class="Discription">Ice Coffee<div class="price">4.00</div></div></div>
</div>
<div id="pane2-6" data-dojo-type="dojox.mobile.Pane" class="myPane" onclick="goToOrder(6)">
<div class="line"><div class="Discription">Ice Cafe' au lait<div class="price">5.00</div></div></div>
</div>
</div>
</div>
<div id="view3" data-dojo-type="dojox.mobile.ScrollableView">
<div data-dojo-type="dojox.mobile.GridLayout" data-dojo-props='cols:2'>
<div data-dojo-type="dojox.mobile.Pane">
<div data-dojo-type="dojox.mobile.EdgeToEdgeCategory">Order</div>
<div id="pane7" style="width:100%;height:50px;position:relative"">
<div class="line"><div class="OrderItem"><span id="OrderItem">Espresso<span><div id="OrderPrice" class="price">5.00</div></div></div>
</div>
</div>
<div data-dojo-type="dojox.mobile.Pane">
<div data-dojo-type="dojox.mobile.EdgeToEdgeCategory">Count</div>
<table style="position:relative;width:100%">
<tr>
<td><input id="num" data-dojo-type="dojox.mobile.TextBox" data-dojo-props='value:1, placeHolder:"Count", size:3' style="width:80%;height:40px;text-align:right;font-size: 18px;"></td>
<td><div id ="Plus" class="mblDomButtonBluePlus" onclick="plus()" style="margin:0 auto 0 auto;"></div></td>
<td><div id ="Minus" class="mblDomButtonBlueMinus" onclick="minus()" style="margin:0 auto 0 auto;"></div></td>
</tr>
</table>
</div>
<div data-dojo-type="dojox.mobile.Pane">
<button id ="cancel" data-dojo-type="dojox.mobile.Button" class="mblRedButton" onclick="cancel()" style="margin-top:10px;margin-left:5%;margin-right:5%;width:90%;height:40px;">Cancel</button>
</div>
<div data-dojo-type="dojox.mobile.Pane">
<button id="ok" data-dojo-type="dojox.mobile.Button" class="mblBlueButton" onclick="ok()" style="margin-top:10px;margin-left:5%;margin-right:5%;width:90%;height:40px;">OK</button>
</div>
</div>
</div>
</body>
</html>