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.
187 lines (170 loc) • 6.87 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>Pull to refresh</title>
<style type="text/css">
#pullToRefreshPanel {
position: absolute;
top: 0px;
width: 100%;
z-index: 100;
font-weight: bold;
overflow: hidden;
background-color: #E4E7EE;
padding-left: 20px;
}
#pullToRefreshPanel > div {
position: inherit;
bottom: 12px;
padding-left: 22px;
width: 100%;
height: 100%;
color: #6E8098;
background-repeat: no-repeat;
background-position: bottom left;
}
#pullToRefreshPanel > div > div {
position: absolute;
bottom: 4px;
}
.pullDownToUpdate > div {
background-image: url('images/pull-arrow.png');
}
.pullDownToUpdate > div > div:before {
content: "Pull down to update";
}
.releaseToUpdate > div {
background-image: url('images/release-arrow.png');
}
.releaseToUpdate > div > div:before {
content: "Release to update";
}
</style>
<link rel="stylesheet" type="text/css" href="../themes/iphone/iphone.css"></link>
<script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: true"></script>
<script type="text/javascript">
require([
"dojo/ready",
"dojo/on",
"dojo/dom",
"dojo/dom-class",
"dijit/registry",
"dojox/mobile/parser",
"dojox/mobile",
"dojox/mobile/compat",
"dojox/mobile/ScrollableView",
"dojox/mobile/Heading",
"dojox/mobile/RoundRect",
"dojox/mobile/RoundRectList"
], function(ready, on, dom, domClass, registry){
ready(function(){
var pullToRefreshPanel = dom.byId("pullToRefreshPanel");
var topMessage = dom.byId("topMessage");
var scrollableView = registry.byId("sview");
var pullToRefreshPanelDisplayed = false;
var refreshOnTouchEnd = false;
var numberOfUpdates = 0;
var displayPullToRefreshPanel = function() {
pullToRefreshPanelDisplayed = true;
pullToRefreshPanel.style.display="block";
};
var hidePullToRefreshPanel = function() {
pullToRefreshPanelDisplayed = false;
pullToRefreshPanel.style.display="none";
};
scrollableView.on("beforescroll", function(evt){
if(evt.beforeTop){
// display the pullToRefreshPanel panel if it is not
if(!pullToRefreshPanelDisplayed){
displayPullToRefreshPanel();
}
// resize the pullToRefreshPanel according to the scroll destination
pullToRefreshPanel.style.height= evt.beforeTopHeight + "px";
pullToRefreshPanel.style.top= -evt.beforeTopHeight + "px";
}else{
// hide the pullToRefreshPanel panel if it is displayed
if(pullToRefreshPanelDisplayed){
hidePullToRefreshPanel();
}
}
if(evt.beforeTopHeight > 80){
domClass.remove(pullToRefreshPanel, "pullDownToUpdate");
domClass.add(pullToRefreshPanel, "releaseToUpdate");
refreshOnTouchEnd = true;
}else{
domClass.remove(pullToRefreshPanel, "releaseToUpdate");
domClass.add(pullToRefreshPanel, "pullDownToUpdate");
refreshOnTouchEnd = false;
}
});
scrollableView.on("touchend", function(evt){
// We're done scrolling:
// - hide the pullToRefreshPanel if it is displayed
// - perform refresh if specified
if(pullToRefreshPanelDisplayed){
hidePullToRefreshPanel();
}
if(refreshOnTouchEnd){
refreshOnTouchEnd = false;
topMessage.innerHTML = "Content updated " + ++numberOfUpdates + " time !";
}
});
});
});
</script>
</head>
<body style="visibility:hidden;">
<div id="sview" data-dojo-type="dojox.mobile.ScrollableView">
<h1 data-dojo-type="dojox.mobile.Heading" fixed="top">Pull to refresh</h1>
<div id="pullToRefreshPanel" style="display: none;">
<div><div></div></div>
</div>
<div id="topMessage" data-dojo-type="dojox.mobile.RoundRect">
This page implements a demo of the "pull to refresh" feature that can be seen in iOS applications like Facebook. Touch the screen and pull down to reveal the feature...
</div>
<ul data-dojo-type="dojox.mobile.RoundRectList">
<li data-dojo-type="dojox.mobile.ListItem">Item 001</li>
<li data-dojo-type="dojox.mobile.ListItem">Item 002</li>
<li data-dojo-type="dojox.mobile.ListItem">Item 003</li>
<li data-dojo-type="dojox.mobile.ListItem">Item 004</li>
<li data-dojo-type="dojox.mobile.ListItem">Item 005</li>
<li data-dojo-type="dojox.mobile.ListItem">Item 006</li>
<li data-dojo-type="dojox.mobile.ListItem">Item 007</li>
<li data-dojo-type="dojox.mobile.ListItem">Item 008</li>
<li data-dojo-type="dojox.mobile.ListItem">Item 009</li>
<li data-dojo-type="dojox.mobile.ListItem">Item 010</li>
<li data-dojo-type="dojox.mobile.ListItem">Item 011</li>
<li data-dojo-type="dojox.mobile.ListItem">Item 012</li>
<li data-dojo-type="dojox.mobile.ListItem">Item 013</li>
<li data-dojo-type="dojox.mobile.ListItem">Item 014</li>
<li data-dojo-type="dojox.mobile.ListItem">Item 015</li>
<li data-dojo-type="dojox.mobile.ListItem">Item 016</li>
<li data-dojo-type="dojox.mobile.ListItem">Item 017</li>
<li data-dojo-type="dojox.mobile.ListItem">Item 018</li>
<li data-dojo-type="dojox.mobile.ListItem">Item 019</li>
<li data-dojo-type="dojox.mobile.ListItem">Item 020</li>
<li data-dojo-type="dojox.mobile.ListItem">Item 021</li>
<li data-dojo-type="dojox.mobile.ListItem">Item 022</li>
<li data-dojo-type="dojox.mobile.ListItem">Item 023</li>
<li data-dojo-type="dojox.mobile.ListItem">Item 024</li>
<li data-dojo-type="dojox.mobile.ListItem">Item 025</li>
<li data-dojo-type="dojox.mobile.ListItem">Item 026</li>
<li data-dojo-type="dojox.mobile.ListItem">Item 027</li>
<li data-dojo-type="dojox.mobile.ListItem">Item 028</li>
<li data-dojo-type="dojox.mobile.ListItem">Item 029</li>
<li data-dojo-type="dojox.mobile.ListItem">Item 030</li>
<li data-dojo-type="dojox.mobile.ListItem">Item 031</li>
<li data-dojo-type="dojox.mobile.ListItem">Item 032</li>
<li data-dojo-type="dojox.mobile.ListItem">Item 033</li>
<li data-dojo-type="dojox.mobile.ListItem">Item 034</li>
<li data-dojo-type="dojox.mobile.ListItem">Item 035</li>
<li data-dojo-type="dojox.mobile.ListItem">Item 036</li>
<li data-dojo-type="dojox.mobile.ListItem">Item 037</li>
<li data-dojo-type="dojox.mobile.ListItem">Item 038</li>
</ul>
</div>
</body>
</html>