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

4
dist/js/ionic.js vendored
View File

@ -2908,7 +2908,8 @@ window.ionic = {
})(ionic); })(ionic);
; ;
/** /**
* Adapted from the great iScroll for Ionic. iScroll is licensed under MIT just like Ionic. * Adapted from the great iScroll 5 for Ionic. iScroll is licensed under MIT just like Ionic.
* iScroll v5.0.5 ~ (c) 2008-2013 Matteo Spinelli ~ http://cubiq.org/license
* *
* Think of ionic.views.Scroll like a Javascript version of UIScrollView or any * Think of ionic.views.Scroll like a Javascript version of UIScrollView or any
* scroll container in any UI library. You could just use -webkit-overflow-scrolling: touch, * scroll container in any UI library. You could just use -webkit-overflow-scrolling: touch,
@ -2916,7 +2917,6 @@ window.ionic = {
* like UIScrollView, and you don't get events after the finger stops touching the * like UIScrollView, and you don't get events after the finger stops touching the
* device (after a flick, for example) * device (after a flick, for example)
* *
* iScroll v5.0.5 ~ (c) 2008-2013 Matteo Spinelli ~ http://cubiq.org/license
*/ */
(function (window, document, Math, ionic) { (function (window, document, Math, ionic) {
'use strict'; 'use strict';

4
js/views/scrollerView.js
View File

@ -1,5 +1,6 @@
/** /**
* Adapted from the great iScroll for Ionic. iScroll is licensed under MIT just like Ionic. * Adapted from the great iScroll 5 for Ionic. iScroll is licensed under MIT just like Ionic.
* iScroll v5.0.5 ~ (c) 2008-2013 Matteo Spinelli ~ http://cubiq.org/license
* *
* Think of ionic.views.Scroll like a Javascript version of UIScrollView or any * Think of ionic.views.Scroll like a Javascript version of UIScrollView or any
* scroll container in any UI library. You could just use -webkit-overflow-scrolling: touch, * scroll container in any UI library. You could just use -webkit-overflow-scrolling: touch,
@ -7,7 +8,6 @@
* like UIScrollView, and you don't get events after the finger stops touching the * like UIScrollView, and you don't get events after the finger stops touching the
* device (after a flick, for example) * device (after a flick, for example)
* *
* iScroll v5.0.5 ~ (c) 2008-2013 Matteo Spinelli ~ http://cubiq.org/license
*/ */
(function (window, document, Math, ionic) { (function (window, document, Math, ionic) {
'use strict'; 'use strict';

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