javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

Added xy scroll test

Browse Source
This commit is contained in:
Max Lynch
2014-04-29 17:11:38 -05:00
parent 4e2a6c0037
commit 72043d2eef
1 changed files with 71 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
test/html/scroll_xy.html Normal file
View File

@@ -0,0 +1,71 @@
<html ng-app="navTest">
<head>
<meta charset="utf-8">
<title>Scroll Click Tests</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link rel="stylesheet" href="../../../../dist/css/ionic.css">
<!--<link rel="stylesheet" href="../../../../dist/css/ionic.css">-->
<script src="../../../../dist/js/ionic.bundle.js"></script>
<style>
#click-notify {
position: absolute;
top: 0;
left: 0;
z-index: 9997;
display: none;
padding: 8px;
background: red;
color: white;
}
#mousemove-notify {
position: absolute;
top: 40px;
left: 0;
z-index: 9998;
display: none;
padding: 8px;
background: orange;
}
#touchmove-notify {
position: absolute;
top: 80px;
left: 0;
z-index: 9999;
display: none;
padding: 8px;
background: yellow;
}
#touchcancel-notify {
position: absolute;
top: 120px;
left: 0;
z-index: 9999;
display: none;
padding: 8px;
background: purple;
color: white;
}
a {
display: block;
background: blue;
margin: 40px 80px;
padding: 40px;
-webkit-tap-highlight-color: transparent;
text-decoration: none;
}
.activated {
background: yellow;
}
</style>
</head>
<body>
<ion-view title="Home" hide-nav-bar="true">
<ion-scroll zooming="true" direction="xy" style="width: 500px; height: 500px">
<div style="width: 5000px; height: 5000px; background: url('https://upload.wikimedia.org/wikipedia/commons/a/ad/Europe_geological_map-en.jpg') repeat"></div>
</ion-scroll>
</ion-view>
<script>
angular.module('navTest', ['ionic']);
</script>
</body>
</html>