dojox
Version:
Dojo eXtensions, a rollup of many useful sub-projects and varying states of maturity – from very stable and robust, to alpha and experimental. See individual projects contain README files for details.
83 lines (80 loc) • 3.32 kB
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>Test touch events with transition</title>
<!--
This test aims to check the behavior of a Touch event during a
transition.
Test case #1
From the "Home" view:
Whatever the area of the list item "View1" that you touch, you should
transition to the view "View1" without the keypad focused on the input
field.
Test case #2
From the "Home" view:
Whatever the area of the list item "View2" that you touch, you should
transition to the view "View2" without altering the value under the
item "ListItem B".
-->
<script type="text/javascript" src="../deviceTheme.js"></script>
<script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="async: true"></script>
<script type="text/javascript">
require([
"dojox/mobile/parser",
"dojo/on",
"dojo/dom",
"dojo/touch",
"dojox/mobile",
"dojox/mobile/compat",
"dojo/domReady!"
], function(parser, on, dom, touch) {
parser.parse();
var myElement = dom.byId("div1");
on(myElement, "click", function(evt) {
dom.byId("div1").innerHTML = "last touch timestamp: "
+ (new Date()).getTime();
});
});
</script>
</head>
<body style="visibility: hidden;">
<div id="home" data-dojo-type="dojox/mobile/View">
<h1 id="homeH1" data-dojo-type="dojox/mobile/Heading">Home</h1>
<ul id="homeUL" data-dojo-type="dojox/mobile/EdgeToEdgeList">
<li id="homeLI1" data-dojo-type="dojox/mobile/ListItem" data-dojo-props="moveTo: '#view1'">View 1</li>
<li id="homeLI2" data-dojo-type="dojox/mobile/ListItem" data-dojo-props="moveTo: '#view2'">View 2</li>
</ul>
<div>
This test aims to check the behavior of a Touch event during a
transition.<hr />
<b>Test case #1</b><br />
From the "Home" view, whatever the area of the list item "View1"
that you touch, you should transition to the view "View1" without
the keypad focused on the input field.<hr />
<b>Test case #2</b><br />
From the "Home" view, whatever the area of the list item "View2"
that you touch, you should transition to the view "View2" without
altering the value under the item "ListItem B".
</div>
</div>
<div id="view1" data-dojo-type="dojox/mobile/View">
<h1 id="view1H1" data-dojo-type="dojox/mobile/Heading" data-dojo-props="moveTo: '#home', back: 'Home'">View1</h1>
<input id="view1INPUT" type="text" placeholder="input field..." />
<ul id="view1UL" data-dojo-type="dojox/mobile/EdgeToEdgeList">
<li id="view1LIA" data-dojo-type="dojox/mobile/ListItem">ListItem A</li>
</ul>
</div>
<div id="view2" data-dojo-type="dojox/mobile/View">
<h1 id="view2H1" data-dojo-type="dojox/mobile/Heading" data-dojo-props="moveTo: '#home', back: 'Home'">View2</h1>
<ul id="view2UL" data-dojo-type="dojox/mobile/EdgeToEdgeList">
<li id="view2LIB" data-dojo-type="dojox/mobile/ListItem">ListItem B</li>
</ul>
<div id="div1" style="font-size: 24pt; background-color: rgb(128, 128, 255)">
<span>Touch me!</span>
</div>
</div>
</body>
</html>