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.
186 lines
6.7 KiB
186 lines
6.7 KiB
<!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>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>
|
|
|