Skip to content

Commit

Permalink
Update demo
Browse files Browse the repository at this point in the history
  • Loading branch information
@lightningtgc
lightningtgc committed Mar 3, 2015
1 parent ba755ce commit 9d4866b
Show file tree
Hide file tree
Showing 4 changed files with 86 additions and 39 deletions.
55 changes: 38 additions & 17 deletions demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,20 +5,21 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="format-detection" content="telephone=no">
<title>Material Design swipe to refresh</title>
<link rel="stylesheet" href="../material-refresh.css" />
<link rel="stylesheet" href="../material-refresh.min.css" />
<link rel="stylesheet" href="styles/css/demo.css" />
</head>
<body>
<header id="navMain" class="nav-bar">
<div class="nav-wrapper">
<span class="title">Material Refresh</span>
<span id="doRotate" class="rotate-btn"></span>
<span id="doRotate">
<span class="rotate-btn"></span>
</span>
</div>
</header>

<span id="forkongithub"><a target="_blank" href="https://github.com/lightningtgc/material-refresh">Fork me on GitHub</a></span>

<div class='contents'>
<div id="contentMain" class='contents'>
<span id="forkongithub"><a target="_blank" href="https://github.com/lightningtgc/material-refresh">Fork me on GitHub</a></span>
<div class='demo-block intro'>
<h2>Intro <iframe src="http://ghbtns.com/github-btn.html?user=lightningtgc&repo=material-refresh&type=watch&count=true"
allowtransparency="true" frameborder="0" scrolling="0" width="100" height="20"></iframe></h2>
Expand All @@ -39,15 +40,13 @@ <h3>Type1: Above surface (default)</h3>
</p>
<h4> You can try it in mobile browser or webview by scanning the following QR code: </h4>

<img src="styles/images/qr-above.png" alt="QR" style="display: block;margin:0 auto;width: 300px;
height: 300px;"/>
<img src="styles/images/qr-above.png" alt="QR" class="qr-img"/>
<p>
<a href="http://lightningtgc.github.io/material-refresh/type1.html">URL: http://lightningtgc.github.io/material-refresh/type1.html</a>
</p>
</div>
<div class="demo-block">
<h3>Type2: Below surface</h3>
<img src="styles/images/below.gif" alt="Below surface" class="half-img"/>
<img src="styles/images/below-color.gif" alt="Below surface" class="half-img"/>

<p>Source code:</p>
Expand All @@ -64,8 +63,7 @@ <h4> You can try it in chrome device mode or other mobile emulator. </h4>

<h4> Similarly, try it in mobile browser or webview by scanning the following QR code: </h4>

<img src="styles/images/qr-below.png" alt="QR" style="display: block;margin:0 auto;width: 300px;
height: 300px;"/>
<img src="styles/images/qr-below.png" alt="QR" class="qr-img"/>
<p>
<a href="http://lightningtgc.github.io/material-refresh/index.html">URL: http://lightningtgc.github.io/material-refresh/index.html</a>
</p>
Expand Down Expand Up @@ -99,26 +97,49 @@ <h2>More details</h2>
</div>

<script type="text/javascript" src="libs/zepto.min.js"></script>
<script type="text/javascript" src="../material-refresh.js"></script>
<script type="text/javascript" src="../material-refresh.min.js"></script>
<script type="text/javascript">
;(function(){
// Init Type2
// Init Type2
mRefresh({
nav: '#navMain'
});
nav: '#navMain',
scrollEl: '#contentMain'
})
// Button on the top of page
$('#doRotate').on('click',function(){
$('#doRotate').on('tap click',function(){
mRefresh.refresh();
return false;
});

// Content demo button
$('#buttonAction').on('click', function(){
$('#buttonAction').on('tap click', function(){
mRefresh.refresh({
onBegin: function(){
alert('It begin to rotate! You can do something like pull ajax data!');
}
});
});
return false;
});



// prevent browser scroll
$('#navMain').on('touchstart', function(e){
e.preventDefault();
});
// Handle the start of interactions
$('#contentMain').on('touchmove', function(e){
var el = document.getElementById("contentMain");
var startTopScroll = el.scrollTop;

if (startTopScroll <= 0) {
el.scrollTop = 1;
}
if(startTopScroll + el.offsetHeight >= el.scrollHeight) {
el.scrollTop = el.scrollHeight - el.offsetHeight - 1;
}
});

})();
</script>
</body>
Expand Down
37 changes: 29 additions & 8 deletions demo/styles/css/demo.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@ a.no-border {
margin-left: 2rem;
}
.rotate-btn {
display: inline-block;
cursor:pointer;
width: 25px;
height: 25px;
Expand Down Expand Up @@ -77,31 +78,44 @@ a.no-border {
}
#doRotate {
position: relative;
float:right;
top:10px;
right:2rem;
float: right;
width: 6rem;
height: 100%;
text-align: center;
cursor:pointer;
}
.rotate-btn-wrapper {
background-color: #02BBD3;
color: white;
text-align:center;
height: 40px;
width: 90px;
width: 150px;
line-height:40px;
border-radius: 10px;
cursor:pointer;
font-size: 1.6rem;
}
.demo-rotate-btn {
position:relative;
top: 7px;
left: 35px;
}
.contents {
position: relative;
top: 60px;
top: 50px;
left: 0;
margin: 0 auto;
max-width: 800px;
max-width: 800px;

}
@media screen and (max-width:700px){
.contents {
position: absolute;
top: 60px;
left: 0;
right: 0;
bottom: 0;
/* -webkit-overflow-scrolling: touch; */
overflow-y: scroll;
}
}
.demo-block {
margin: 0 2rem;
Expand Down Expand Up @@ -137,6 +151,13 @@ a.no-border {
.demo-block .half-img {
max-width: 340px;
}
.demo-block .qr-img {
display: block;
margin:0 auto;
width: 300px;
height: 300px;
max-width:100%;
}
@media screen and (min-width:600px){
.demo-block .half-img {
width: 49%;
Expand Down
28 changes: 16 additions & 12 deletions demo/type1.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,15 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="format-detection" content="telephone=no">
<title>Material Design swipe to refresh</title>
<link rel="stylesheet" href="../material-refresh.css" />
<link rel="stylesheet" href="../material-refresh.min.css" />
<link rel="stylesheet" href="styles/css/demo.css" />
<style type="text/css">
.contents {
.contents-main {
position: relative;
top:0;
left: 0;
margin: 0 auto;
max-width: 800px;
}
#forkongithub {
display:none;
Expand All @@ -19,7 +23,7 @@
<body>
<div id="forkongithub"><a target="_blank" href="https://github.com/lightningtgc/material-refresh">Fork me on GitHub</a></div>

<div class='contents'>
<div class='contents-main'>
<div class='demo-block intro'>
<h2> Type1 Demo<iframe src="http://ghbtns.com/github-btn.html?user=lightningtgc&repo=material-refresh&type=watch&count=true"
allowtransparency="true" frameborder="0" scrolling="0" width="100" height="20"></iframe></h2>
Expand Down Expand Up @@ -49,8 +53,7 @@ <h3>Type1: Above surface (default)</h3>
<h4> You can try it in chrome device mode or other mobile emulator. </h4>
<h4> Similarly, try it in mobile browser or webview by scanning the following QR code: </h4>

<img src="styles/images/qr-above.png" alt="QR" style="display: block;margin:0 auto;width: 300px;
height: 300px;"/>
<img src="styles/images/qr-above.png" alt="QR" class="qr-img"/>

<p>
<a href="http://lightningtgc.github.io/material-refresh/type1.html">URL: http://lightningtgc.github.io/material-refresh/type1.html</a>
Expand All @@ -59,7 +62,6 @@ <h4> Similarly, try it in mobile browser or webview by scanning the following QR
</div>
<div class="demo-block">
<h3>Type2: Below surface</h3>
<img src="styles/images/below.gif" alt="Below surface" class="half-img"/>
<img src="styles/images/below-color.gif" alt="Below surface" class="half-img"/>

<p>Source code:</p>
Expand All @@ -73,8 +75,7 @@ <h3>Type2: Below surface</h3>

<h4> Try it in mobile browser or webview by scanning the following QR code: </h4>

<img src="styles/images/qr-below.png" alt="QR" style="display: block;margin:0 auto;width: 300px;
height: 300px;"/>
<img src="styles/images/qr-below.png" alt="QR" class="qr-img"/>
<p>
<a href="http://lightningtgc.github.io/material-refresh/index.html">URL: http://lightningtgc.github.io/material-refresh/index.html</a>
</p>
Expand Down Expand Up @@ -107,23 +108,26 @@ <h2>More details</h2>
</div>

<script type="text/javascript" src="libs/zepto.min.js"></script>
<script type="text/javascript" src="../material-refresh.js"></script>
<script type="text/javascript" src="material-refresh.min.js"></script>
<script type="text/javascript">
;(function(){
// Init Type1
mRefresh();

// Button on the top of page
$('#doTheRotate').on('click',function(){
mRefresh.refresh();
$('#doTheRotate').on('tap click',function(){
mRefresh.refresh();
return false;
});

// Content demo button
$('#buttonAction').on('click', function(){
$('#buttonAction').on('tap click', function(){
mRefresh.refresh({
onBegin: function(){
alert('It begin to rotate! You can do something like pull ajax data!');
}
});
return false;
});
})();
</script>
Expand Down
5 changes: 3 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
{
"name": "material-refresh",
"description": "Material design pull to refresh, mobile only",
"description": "Material Design pull to refresh, by using CSS3 and
JavaScript",
"version": "0.1.0",
"homepage": "https://github.com/lightningtgc/material-refresh",
"author": "tang guichuan <tangguichuan@gmail.com>",
"author": "gctang <lightningtgc@gmail.com>",
"repository": {
"type": "git",
"url": "git://github.com/lightningtgc/material-refresh.git"
Expand Down

0 comments on commit 9d4866b

Please sign in to comment.