alloytouch
Version:
super tiny size touch and physical motion library for the web
204 lines (182 loc) • 5.47 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<title>AlloyTouch</title>
<style>
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html {
-ms-touch-action: none;
}
body, ul, li {
padding: 0;
margin: 0;
border: 0;
}
body {
font-size: 12px;
font-family: ubuntu, helvetica, arial;
background-color: #eeeeee;
}
#header {
position: absolute;
z-index: 2;
top: 0;
left: 0;
width: 100%;
height: 45px;
line-height: 45px;
background: #00ABEB;
padding: 0;
color: #eee;
font-size: 20px;
text-align: center;
font-weight: bold;
}
#footer {
position: fixed;
z-index: 2;
bottom: 0;
left: 0;
width: 100%;
height: 48px;
background: #e2e2e2;
padding: 0;
}
#refresh-tip{
width: 100%;
position: absolute;
text-align: center;
top:18px;
color: #00a9f2;
font-size: 18px;
}
#test{
margin: 45px auto 48px;
}
#test ul {
list-style: none;
padding: 0;
margin: 0;
width: 100%;
text-align: left;
}
#test li {
padding: 0 10px;
height: 40px;
line-height: 40px;
border-bottom: 1px solid #ccc;
border-top: 1px solid #fff;
background-color: #fafafa;
font-size: 14px;
}
</style>
</head>
<body>
<div id="header">AlloyTouch</div>
<div id="refresh-tip" >Pull to refresh</div>
<div id="test">
<ul>
<li>Hello, AlloyTouch!</li>
<li>AlloyFinger - Super Tiny Size Gestures Library</li>
<li>Transformjs - Made CSS3 Super Easy</li>
<li>AlloyFlow - </li>
<li>Nuclear - Some HTML + Scoped CSS + JS </li>
<li>AlloyGameEngine</li>
<li>Rosin</li>
<li>LivePool</li>
<li>AlloyStick</li>
<li>CodeStar</li>
<li>AlloyDesigner</li>
<li>JXAnimate</li>
<li>Spirit</li>
<li>AlloyImage</li>
<li>ModJS</li>
<li>Pretty row 16</li>
<li>stepify</li>
<li>AlloyTimer</li>
<li>Alloy Desktop</li>
<li>JX UI</li>
<li>CodeTank</li>
<li>iSpriter</li>
<li>Rythem</li>
<li>Go!Png </li>
<li>JX</li>
<li>TEditor</li>
<li> row 1</li>
<li> row 2</li>
<li> row 3</li>
<li>row 5</li>
<li> row 5</li>
<li> row 7</li>
<li> row 8</li>
<li> row 9</li>
<li> row 11</li>
<li> row 11</li>
<li> row 12</li>
<li> row 13</li>
<li> row 14</li>
<li> row 15</li>
<li> row 16</li>
<li> row 17</li>
<li> row 18</li>
<li> row 19</li>
<li> row 20</li>
<li> row 21</li>
<li> row 22</li>
<li> row 23</li>
<li> row 24</li>
<li> row 25</li>
</ul>
</div>
<div id="footer"></div>
<script src="../../transformjs/transform.js"></script>
<script src="alloy_touch.refresh.js"></script>
<script>
var rt = document.querySelector("#refresh-tip"),
list = document.querySelector("#test ul"),
index = 0;
new AlloyTouch.PullToRefresh("#test",{
refreshPoint:60,
refreshingPoint:40,
refresh:function () {
rt.innerHTML ="Refreshing...";
var self = this;
ajaxMock("xx.php",function () {
var i = 0,
len=3;
for(;i<len;i++){
var li = document.createElement("li");
li.innerHTML = "new row "+index++;
list.insertBefore(li,list.firstChild);
}
rt.innerHTML ="Pull to refresh";
self.end()
});
},
reachRefreshPoint:function () {
rt.innerHTML ="Release to refresh";
},
notReachRefreshPoint:function () {
rt.innerHTML ="Pull to refresh";
},
refreshTip:"#refresh-tip",
change:function(){
}
});
function ajaxMock(url,callback) {
setTimeout(function(){
callback();
},2000);
}
</script>
<a href="https://github.com/AlloyTeam/AlloyTouch" target="_blank" style="position: fixed; right: 0; top: 0; z-index: 3;width:140px;height:140px;">
<img src="//alloyteam.github.io/github.png" alt="">
</a>
</body>
</html>