javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-07 15:07:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

Scroll stuff

Browse Source
This commit is contained in:
Max Lynch
2013-10-25 11:32:34 -05:00
parent e0cf20abfd
commit 0f29a6e3ef
5 changed files with 166 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
test/scroll_forms.html Normal file
View File

@ -0,0 +1,93 @@
<html>
<head>
<meta charset="utf-8">
<title>Scroll Forms</title>
<!-- Sets initial viewport load and disables zooming -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link href="../dist/css/ionic.css" rel="stylesheet">
<style>
#filler {
border-top: 10px solid red;
border-bottom: 10px solid red;
}
.list-item {
padding: 10px;
}
#wrapper {
position: relative;
overflow: hidden;
height: 100%;
}
</style>
</head>
<body>
<section class="view-full">
<div class="bar bar-header bar-secondary">
<a href="#" class="button button-danger button-clear">Edit</a>
<h1 class="title">Scroll Me</h1>
<a href="#" class="button button-danger button-clear">Delete</a>
</div>
<div id="wrapper" style="margin-top: 44px">
<div id="scroller" class="scroll">
<div class="list">
<label class="item item-input">
<span class="input-label">Username</span>
<input type="text">
</label>
<label class="item item-input">
<span class="input-label">Username</span>
<input type="text">
</label>
<label class="item item-input">
<span class="input-label">Username</span>
<input type="text">
</label>
<label class="item item-input">
<span class="input-label">Username</span>
<input type="text">
</label>
<label class="item item-input">
<span class="input-label">Username</span>
<input type="text">
</label>
<label class="item item-input">
<span class="input-label">Username</span>
<input type="text">
</label>
<label class="item item-input">
<span class="input-label">Username</span>
<input type="text">
</label>
<label class="item item-input">
<span class="input-label">Password</span>
<input type="password">
</label>
</div>
</div>
</div>
</section>
<script src="../dist/js/ionic.js"></script>
<script>
var s = document.getElementById('scroller');
var w = s.scrollWidth;
for(var i = 0; i < w; i++) {
if((i % 500) === 0) {
var l = document.createElement('span');
l.innerText = i + 'px'
l.style.position = 'absolute';
l.style.left = 0 + 'px';
l.style.top = i + 'px';
//s.appendChild(l);
}
}
var scroll = new ionic.views.Scroll({
el: s,
});
</script>
</body>
</html>

13
test/scroll_horiz.html
View File

@ -14,6 +14,11 @@
.list-item {
padding: 10px;
}
#wrapper {
position: relative;
height: 400px;
overflow: hidden;
}
</style>
</head>
<body>
@ -23,8 +28,10 @@
<h1 class="title">Scroll Me</h1>
<a href="#" class="button button-danger button-clear">Delete</a>
</div>
<div id="scroller" class="scroll" style="margin-top:44px">
<div id="filler" style="width: 4400px; height: 300px; background: url('tree_bark.png') repeat;"></div>
<div id="wrapper" style="margin-top: 44px">
<div id="scroller" class="scroll">
<div id="filler" style="width: 4400px; height: 1000px; background: url('tree_bark.png') repeat;"></div>
</div>
</div>
</section>
<script src="../dist/js/ionic.js"></script>
@ -47,7 +54,7 @@
var scroll = new ionic.views.ScrollView({
el: s,
isHorizontalEnabled: true,
isVerticalEnabled: false
isVerticalEnabled: true
});
</script>
</body>

59
test/scroller.html Normal file
View File

@ -0,0 +1,59 @@
<html>
<head>
<meta charset="utf-8">
<title>Scroll Horiz</title>
<!-- Sets initial viewport load and disables zooming -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link href="../dist/css/ionic.css" rel="stylesheet">
<style>
#filler {
border-top: 10px solid red;
border-bottom: 10px solid red;
}
.list-item {
padding: 10px;
}
#wrapper {
position: relative;
height: 400px;
overflow: hidden;
}
</style>
</head>
<body>
<section class="view-full">
<div class="bar bar-header bar-secondary">
<a href="#" class="button button-danger button-clear">Edit</a>
<h1 class="title">Scroll Me</h1>
<a href="#" class="button button-danger button-clear">Delete</a>
</div>
<div id="wrapper" style="margin-top: 44px">
<div id="scroller" class="scroll">
<div id="filler" style="width: 4400px; height: 1000px; background: url('tree_bark.png') repeat;"></div>
</div>
</div>
</section>
<script src="../dist/js/ionic.js"></script>
<script>
var s = document.getElementById('scroller');
var w = s.scrollWidth;
for(var i = 0; i < w; i++) {
if((i % 500) === 0) {
var l = document.createElement('span');
l.innerText = i + 'px'
l.style.position = 'absolute';
l.style.left = i + 'px';
l.style.top = '20px';
s.appendChild(l);
}
}
var scroll = new ionic.views.Scroll({
el: s,
});
</script>
</body>
</html>