forked from titanoid/appjs-framework
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathactivity_main.html
140 lines (117 loc) · 15.5 KB
/
activity_main.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<link href="http://dev.lolaholic.com/app/www/css/app.css" media="screen" rel="stylesheet" type="text/css" />
<script src="http://dev.lolaholic.com/app/www/lib/jquery.min.js"></script>
<script src="http://dev.lolaholic.com/app/www/lib/iscroll.js"></script>
<script src="http://dev.lolaholic.com/app/www/js/app.js"></script>
<script src="http://dev.lolaholic.com/app/www/js/app.scroller.js"></script>
<button class="btn-blue" id="btnScroll" style="position:absolute;z-index:100; right:130px; bottom:20px;" onclick="testScroll()">Test Scroll</button><br />
<button id="btnRefresh" style="position:absolute;z-index:100; right:20px; bottom:20px;" onclick="location.reload(true)"><span class="appicon appicon-refresh"></span> RELOAD</button>
<div class="app-view" id="about-view" data-url="about" data-scrollx="true" data-scrolly="true" data-scrollbounce="true">
<div style="z-index: 10; background-color:#fff; position:absolute; top: 1px; right: 1px; width: 150px; border:1px solid #000;" id="scroll_console">
console
</div>
<ul class="view-header">
<li class="button" onclick="app.navigate('#home')"><span class="appicon appicon-chevron-left"></span> Home</li>
</ul>
<div class="view-body" id="scrollBody">
<div class="view-body-inner">
1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam risus mauris, commodo at rutrum a, eleifend condimentum erat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque ultrices aliquam lectus a sagittis. Suspendisse aliquam velit sit amet suscipit gravida. Praesent hendrerit odio orci, eu ultricies nulla consequat et. Quisque sapien sapien, pulvinar ac tempor eu, auctor eu nunc. Cras id rutrum purus, a consectetur metus. Curabitur et gravida mi. Morbi blandit, ante egestas dictum adipiscing, velit felis tempus magna, eget accumsan nibh massa a metus.
<br/>
2. Vestibulum id mollis odio, ut elementum nisl. Donec orci magna, pharetra at auctor eu, rhoncus vel risus. Cras hendrerit leo vitae felis tempus lobortis. Proin posuere nisi sed massa facilisis, et elementum neque condimentum. Suspendisse at erat pellentesque, suscipit augue non, imperdiet sem. Aenean eu elit vel nulla ultricies auctor at in velit. Vestibulum fringilla dui vitae tellus molestie mattis in non purus. Phasellus cursus vestibulum turpis ac consectetur.
<br/>
3. Pellentesque eu mi vestibulum, mollis elit vel, consequat erat. Morbi sed erat dui. Mauris libero velit, pretium non semper faucibus, euismod at risus. Nunc tincidunt nulla et lorem placerat, et vulputate velit euismod. Donec dictum quam ac massa tempus volutpat. Nulla tincidunt sagittis varius. Mauris ac ligula mauris. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus rutrum condimentum metus, nec tincidunt quam luctus sodales. Vestibulum sodales felis eget velit molestie pretium. Proin ac iaculis mi, a tincidunt lorem. Vestibulum pharetra auctor erat, eu facilisis ipsum tincidunt sed. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec fringilla erat. Praesent aliquet eros sed rutrum ornare.
<br/>
4. Curabitur placerat lectus sed eros condimentum hendrerit. Etiam ac felis congue, bibendum enim sed, hendrerit magna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent laoreet dolor justo. Maecenas vel mi et tellus commodo fringilla. Donec tincidunt dolor a mauris fringilla, vel sollicitudin eros sagittis. Donec dapibus pellentesque ante, nec pellentesque mi sodales sed. Mauris tristique, urna eget hendrerit eleifend, elit ligula tempus leo, sed dapibus risus orci id libero.
<br/>
5. Fusce vitae mollis metus. Pellentesque sed tincidunt tortor, in varius diam. Suspendisse porta est a lacus dignissim gravida. Maecenas porta nec nisi pellentesque luctus. Donec non dolor lectus. Donec eget lacinia sem, convallis sagittis metus. Nulla ac mauris ac nibh cursus vulputate in et nibh. Praesent in nulla ipsum. Cras arcu ligula, porta id ipsum quis, tincidunt consequat ipsum. Vestibulum diam leo, tristique vel mollis ut, viverra in nulla. Praesent luctus dui et vehicula congue. Morbi eu eros id metus egestas lacinia pellentesque vel justo.
<a href="#asdasdasd">TEST URL1</a>
6. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam risus mauris, commodo at rutrum a, eleifend condimentum erat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque ultrices aliquam lectus a sagittis. Suspendisse aliquam velit sit amet suscipit gravida. Praesent hendrerit odio orci, eu ultricies nulla consequat et. Quisque sapien sapien, pulvinar ac tempor eu, auctor eu nunc. Cras id rutrum purus, a consectetur metus. Curabitur et gravida mi. Morbi blandit, ante egestas dictum adipiscing, velit felis tempus magna, eget accumsan nibh massa a metus.
<br/>
7. Vestibulum id mollis odio, ut elementum nisl. Donec orci magna, pharetra at auctor eu, rhoncus vel risus. Cras hendrerit leo vitae felis tempus lobortis. Proin posuere nisi sed massa facilisis, et elementum neque condimentum. Suspendisse at erat pellentesque, suscipit augue non, imperdiet sem. Aenean eu elit vel nulla ultricies auctor at in velit. Vestibulum fringilla dui vitae tellus molestie mattis in non purus. Phasellus cursus vestibulum turpis ac consectetur.
<br/>
8. Pellentesque eu mi vestibulum, mollis elit vel, consequat erat. Morbi sed erat dui. Mauris libero velit, pretium non semper faucibus, euismod at risus. Nunc tincidunt nulla et lorem placerat, et vulputate velit euismod. Donec dictum quam ac massa tempus volutpat. Nulla tincidunt sagittis varius. Mauris ac ligula mauris. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus rutrum condimentum metus, nec tincidunt quam luctus sodales. Vestibulum sodales felis eget velit molestie pretium. Proin ac iaculis mi, a tincidunt lorem. Vestibulum pharetra auctor erat, eu facilisis ipsum tincidunt sed. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec fringilla erat. Praesent aliquet eros sed rutrum ornare.
<br/>
9. Curabitur placerat lectus sed eros condimentum hendrerit. Etiam ac felis congue, bibendum enim sed, hendrerit magna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent laoreet dolor justo. Maecenas vel mi et tellus commodo fringilla. Donec tincidunt dolor a mauris fringilla, vel sollicitudin eros sagittis. Donec dapibus pellentesque ante, nec pellentesque mi sodales sed. Mauris tristique, urna eget hendrerit eleifend, elit ligula tempus leo, sed dapibus risus orci id libero.
<br/>
10. Fusce vitae mollis metus. Pellentesque sed tincidunt tortor, in varius diam. Suspendisse porta est a lacus dignissim gravida. Maecenas porta nec nisi pellentesque luctus. Donec non dolor lectus. Donec eget lacinia sem, convallis sagittis metus. Nulla ac mauris ac nibh cursus vulputate in et nibh. Praesent in nulla ipsum. Cras arcu ligula, porta id ipsum quis, tincidunt consequat ipsum. Vestibulum diam leo, tristique vel mollis ut, viverra in nulla. Praesent luctus dui et vehicula congue. Morbi eu eros id metus egestas lacinia pellentesque vel justo.
<a href="#asdasdasd">TEST URL2</a>
11. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam risus mauris, commodo at rutrum a, eleifend condimentum erat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque ultrices aliquam lectus a sagittis. Suspendisse aliquam velit sit amet suscipit gravida. Praesent hendrerit odio orci, eu ultricies nulla consequat et. Quisque sapien sapien, pulvinar ac tempor eu, auctor eu nunc. Cras id rutrum purus, a consectetur metus. Curabitur et gravida mi. Morbi blandit, ante egestas dictum adipiscing, velit felis tempus magna, eget accumsan nibh massa a metus.
<br/>
12. Vestibulum id mollis odio, ut elementum nisl. Donec orci magna, pharetra at auctor eu, rhoncus vel risus. Cras hendrerit leo vitae felis tempus lobortis. Proin posuere nisi sed massa facilisis, et elementum neque condimentum. Suspendisse at erat pellentesque, suscipit augue non, imperdiet sem. Aenean eu elit vel nulla ultricies auctor at in velit. Vestibulum fringilla dui vitae tellus molestie mattis in non purus. Phasellus cursus vestibulum turpis ac consectetur.
<br/>
13. Pellentesque eu mi vestibulum, mollis elit vel, consequat erat. Morbi sed erat dui. Mauris libero velit, pretium non semper faucibus, euismod at risus. Nunc tincidunt nulla et lorem placerat, et vulputate velit euismod. Donec dictum quam ac massa tempus volutpat. Nulla tincidunt sagittis varius. Mauris ac ligula mauris. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus rutrum condimentum metus, nec tincidunt quam luctus sodales. Vestibulum sodales felis eget velit molestie pretium. Proin ac iaculis mi, a tincidunt lorem. Vestibulum pharetra auctor erat, eu facilisis ipsum tincidunt sed. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec fringilla erat. Praesent aliquet eros sed rutrum ornare.
<br/>
14. Curabitur placerat lectus sed eros condimentum hendrerit. Etiam ac felis congue, bibendum enim sed, hendrerit magna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent laoreet dolor justo. Maecenas vel mi et tellus commodo fringilla. Donec tincidunt dolor a mauris fringilla, vel sollicitudin eros sagittis. Donec dapibus pellentesque ante, nec pellentesque mi sodales sed. Mauris tristique, urna eget hendrerit eleifend, elit ligula tempus leo, sed dapibus risus orci id libero.
<br/>
15. Fusce vitae mollis metus. Pellentesque sed tincidunt tortor, in varius diam. Suspendisse porta est a lacus dignissim gravida. Maecenas porta nec nisi pellentesque luctus. Donec non dolor lectus. Donec eget lacinia sem, convallis sagittis metus. Nulla ac mauris ac nibh cursus vulputate in et nibh. Praesent in nulla ipsum. Cras arcu ligula, porta id ipsum quis, tincidunt consequat ipsum. Vestibulum diam leo, tristique vel mollis ut, viverra in nulla. Praesent luctus dui et vehicula congue. Morbi eu eros id metus egestas lacinia pellentesque vel justo.
<a href="#asdasdasd">TEST URL3</a>
16. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam risus mauris, commodo at rutrum a, eleifend condimentum erat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque ultrices aliquam lectus a sagittis. Suspendisse aliquam velit sit amet suscipit gravida. Praesent hendrerit odio orci, eu ultricies nulla consequat et. Quisque sapien sapien, pulvinar ac tempor eu, auctor eu nunc. Cras id rutrum purus, a consectetur metus. Curabitur et gravida mi. Morbi blandit, ante egestas dictum adipiscing, velit felis tempus magna, eget accumsan nibh massa a metus.
<br/>aaaaaaaa
17. Vestibulum id mollis odio, ut elementum nisl. Donec orci magna, pharetra at auctor eu, rhoncus vel risus. Cras hendrerit leo vitae felis tempus lobortis. Proin posuere nisi sed massa facilisis, et elementum neque condimentum. Suspendisse at erat pellentesque, suscipit augue non, imperdiet sem. Aenean eu elit vel nulla ultricies auctor at in velit. Vestibulum fringilla dui vitae tellus molestie mattis in non purus. Phasellus cursus vestibulum turpis ac consectetur.
<br/>bbbbbbbbbbb
18. Pellentesque eu mi vestibulum, mollis elit vel, consequat erat. Morbi sed erat dui. Mauris libero velit, pretium non semper faucibus, euismod at risus. Nunc tincidunt nulla et lorem placerat, et vulputate velit euismod. Donec dictum quam ac massa tempus volutpat. Nulla tincidunt sagittis varius. Mauris ac ligula mauris. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus rutrum condimentum metus, nec tincidunt quam luctus sodales. Vestibulum sodales felis eget velit molestie pretium. Proin ac iaculis mi, a tincidunt lorem. Vestibulum pharetra auctor erat, eu facilisis ipsum tincidunt sed. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec fringilla erat. Praesent aliquet eros sed rutrum ornare.
<br/>ccccccc
19. Curabitur placerat lectus sed eros condimentum hendrerit. Etiam ac felis congue, bibendum enim sed, hendrerit magna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent laoreet dolor justo. Maecenas vel mi et tellus commodo fringilla. Donec tincidunt dolor a mauris fringilla, vel sollicitudin eros sagittis. Donec dapibus pellentesque ante, nec pellentesque mi sodales sed. Mauris tristique, urna eget hendrerit eleifend, elit ligula tempus leo, sed dapibus risus orci id libero.
<br/>dddddddddd
20. Fusce vitae mollis metus. Pellentesque sed tincidunt tortor, in varius diam. Suspendisse porta est a lacus dignissim gravida. Maecenas porta nec nisi pellentesque luctus. Donec non dolor lectus. Donec eget lacinia sem, convallis sagittis metus. Nulla ac mauris ac nibh cursus vulputate in et nibh. Praesent in nulla ipsum. Cras arcu ligula, porta id ipsum quis, tincidunt consequat ipsum. Vestibulum diam leo, tristique vel mollis ut, viverra in nulla. Praesent luctus dui et vehicula congue. Morbi eu eros id metus egestas lacinia pellentesque vel justo.
<a href="#asdasdasd">TEST URL4</a>
</div>
</div>
</div>
<div class="app-view" id="main-view" data-url="home" data-swipeleftsp="true" data-swiperightsp="true">
<ul class="view-header">
<li class="button" onclick="app.sidepanels.left.toggle()"><span class="appicon appicon-align-justify"></span> Title</li>
</ul>
<div class="view-body">
<h1>Buttons</h1>
<button onclick="app.navigate('#about')">Default Button</button>
<button class="btn-blue" onclick="app.navigate('#about')">Blue Button</button>
<h1>Side Panels</h1>
<button class="btn-blue" onclick="app.sidepanels.left.toggle()">Toggle Left</button>
<button class="btn-blue" onclick="app.sidepanels.right.toggle()">Toggle Right</button>
<h1>animate</h1>
<button class="btn-blue" id="btnAnimate" onclick="testAnimate()">Animate</button>
<button class="btn-blue" id="btnAnimate" onclick="testJQAnimate()">JQ Animate</button>
</div>
</div>
<div class="app-sidepanel app-sidepanel-left" id="main-sidepanel" data-position="left">
left sidepanel
</div>
<div class="app-sidepanel app-sidepanel-right" id="right-sidepanel" style="width:100px !important;" data-position="right">
right sidepanel
</div>
<script>
var app = new App();
app.init();
document.getElementById('btnRefresh').enableTap();
function testAnimate() {
var properties = {
webkitTransform : { start: 0, end: 300, easing: 'easeInOutQuad', pattern: 'translateX(%val%px)' }
// left : { start: 0, end: 300 }
}
var callbacks = {
onFinish : function() {
// console.log('finish');
},
onProgress: function(progress) {
// console.log('Current progress: '+progress);
}
}
var el = document.getElementById('main-view');
el.animate(properties, 1000);
}
function testJQAnimate() {
$('#main-view').animate({left: 300 }, 1000);
}
function testScroll() {
app.currentView.scroller._move(0, -200, {speed:200, easing:'circular'});
// return;
// var el = document.getElementById('scrollwrapper');
// var properties = {
// webkitTransform : { start: 0, end: -1500, pattern:'translateY(%val%px)', easing: 'easeOutCirc' }
// }
// el.animate(properties, 800);
// el.style.webkitTransition = '500ms cubic-bezier(0.1, 0.57, 0.1, 1)';
// el.style.webkitTransform = 'translate(0px, -700px) translateZ(0px)';
}
</script>