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

Updated panel example and fixed drag issue

Browse Source
This commit is contained in:
Max Lynch
2013-08-29 12:22:14 -05:00
parent cd5de96666
commit 52b931828b
19 changed files with 3838 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

241
example/panel_controller.html
View File

@ -6,7 +6,7 @@
<!-- Sets initial viewport load and disables zooming -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<!--<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">-->
<link rel="stylesheet" href="../../dist/framework.css">
<link rel="stylesheet" href="../../dist/ionic.css">
</head>
<body>
@ -20,8 +20,7 @@
</header>
<main class="content content-padded has-header">
<p><button class="button button-primary">Other Left Side Panel</button></p>
<p id="event-log"></p>
<h2>Cheese!</h2>
</main>
<footer class="bar bar-footer bar-dark">
@ -31,23 +30,221 @@
</section>
<section id="my-left-panel" class="ion-panel ion-panel-active-left">
This is my default left side panel!
<section id="my-left-panel" class="ion-panel ion-panel-left">
<ul class="list">
<li class="list-divider">Left Nav Things</li>
<a href="#" class="list-item">
Sasafras
<i class="icon-arrow-right"></i>
</a>
<a href="#" class="list-item">
Candy
<i class="icon-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
</a>
<a href="#" class="list-item">
Candy
<i class="icon-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
</a>
</ul>
</section>
<section id="my-right-panel" class="ion-panel ion-panel-active-right">
This is my right side panel!
</section>
<section id="my-other-left-panel" class="ion-panel">
This is my other left side panel!
<section id="my-right-panel" class="ion-panel ion-panel-right">
<ul class="list">
<li class="list-divider">Left Nav Things</li>
<a href="#" class="list-item">
Sasafras
<i class="icon-arrow-right"></i>
</a>
<a href="#" class="list-item">
Candy
<i class="icon-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
</a>
<a href="#" class="list-item">
Candy
<i class="icon-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
</a>
</ul>
</section>
<script src="../../js/framework/framework-events.js"></script>
<script src="../../js/framework/framework-gestures.js"></script>
<script src="../../js/framework/ion-panel.js"></script>
<script src="../../js/framework/handlers/panel-handler.js"></script>
<script src="../../js/ionic-events.js"></script>
<script src="../../js/ionic-gestures.js"></script>
<script>
var LeftRightPanelViewController = function(options) {
var _this = this;
@ -63,19 +260,19 @@
this._leftShowing = false;
// Bind release and drag listeners
window.FM.onGesture('release', function(e) {
window.ion.onGesture('release', function(e) {
_this._endDrag(e);
}, document.body);
window.FM.onGesture('drag', function(e) {
window.ion.onGesture('drag', function(e) {
_this._handleDrag(e);
}, document.body);
window.FM.onGesture('swiperight', function(e) {
window.ion.onGesture('swiperight', function(e) {
console.log('SWIPERIGHT');
//_this.openPercentage(-100);
}, document.body);
window.FM.onGesture('swipeleft', function(e) {
window.ion.onGesture('swipeleft', function(e) {
console.log('SWIPELEFT');
//_this.openPercentage(-100);
}, document.body);
@ -221,7 +418,7 @@
this._offsetX = this.getOpenAmount();
}
console.log('Dragging page', this._startX, this._lastX, this._offsetX, e);
//console.log('Dragging page', this._startX, this._lastX, this._offsetX, e);
var newX = this._offsetX + (this._lastX - this._startX);
this.openAmount(newX);
@ -243,10 +440,10 @@
center: page,
animateClass: 'ion-panel-animated'
});
window.FM.onGesture('tap', function(e) {
window.ion.onGesture('tap', function(e) {
controller.toggleLeft();
}, document.getElementById('left-button'));
window.FM.onGesture('tap', function(e) {
window.ion.onGesture('tap', function(e) {
controller.toggleRight();
}, document.getElementById('right-button'));