mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-07 23:16:52 +08:00
Removed hacking folder, distributed files
This commit is contained in:
Max Lynch
99
test/controllers/nav.html
Normal file
99
test/controllers/nav.html
Normal file
@ -0,0 +1,99 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Nav Bars</title>
|
||||
|
||||
<!-- Sets initial viewport load and disables zooming -->
|
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
<link href="/vendor/font-awesome/css/font-awesome.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../dist/ionic.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<section>
|
||||
|
||||
<header id="nav-bar" class="bar bar-header bar-dark">
|
||||
<h1 class="title"></h1>
|
||||
</header>
|
||||
|
||||
<main class="has-header content" id="content">
|
||||
</main>
|
||||
</section>
|
||||
|
||||
<script src="../../js/events.js"></script>
|
||||
<script src="../../js/gestures.js"></script>
|
||||
<script src="../../js/views/navBar.js"></script>
|
||||
<script src="../../js/controllers/navController.js"></script>
|
||||
<script>
|
||||
// Grab the sections
|
||||
var navBar = document.getElementById('nav-bar');
|
||||
var cd = document.getElementById('content');
|
||||
|
||||
var View = function(opts) {
|
||||
this.el = opts.el;
|
||||
};
|
||||
var content = new View({
|
||||
el: cd
|
||||
});
|
||||
|
||||
|
||||
var controller = function(opts) {
|
||||
this.el = opts.el;
|
||||
}
|
||||
controller.prototype = {
|
||||
visibilityChanged: function() {
|
||||
if(this.isVisible) {
|
||||
//this.el.style.display = 'block';
|
||||
if(this._lastNodeSpot) {
|
||||
this._lastNodeParent.insertBefore(this.el, this._lastNodeSpot);
|
||||
} else {
|
||||
content.el.appendChild(this.el);
|
||||
}
|
||||
} else {
|
||||
//this.el.style.display = 'none';
|
||||
var parentNode = this.el.parentNode;
|
||||
if(!parentNode) {
|
||||
return;
|
||||
}
|
||||
var next = this.el.nextSibling;
|
||||
this._lastNodeSpot = next;
|
||||
this._lastNodeParent = parentNode;
|
||||
parentNode.removeChild(this.el);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var createPage = function(title) {
|
||||
var d = document.createElement('div');
|
||||
d.innerHTML = '<h3>' + title + '</h3><a href=#" class="next button button-success">Next</a>';
|
||||
var c = new controller({
|
||||
el: d
|
||||
});
|
||||
c.title = title;
|
||||
return c;
|
||||
};
|
||||
|
||||
var page1 = createPage('Home');
|
||||
var page2 = createPage('About');
|
||||
var page3 = createPage('Cats');
|
||||
var page4 = createPage('Pizza');
|
||||
|
||||
var pages = [page1, page2, page3, page4];
|
||||
|
||||
var c = new ionic.controllers.NavController({
|
||||
navBar: new ionic.ui.NavBar({ el: navBar }),
|
||||
content: content
|
||||
});
|
||||
c.push(page1);
|
||||
|
||||
var currentPage = 1;
|
||||
document.addEventListener('click', function(event) {
|
||||
if(event.target.classList.contains('next')) {
|
||||
c.push(pages[currentPage++ % pages.length]);
|
||||
}
|
||||
return false;
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
90
test/controllers/navList.html
Normal file
90
test/controllers/navList.html
Normal file
@ -0,0 +1,90 @@
|
||||
<html ng-app="navTest">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Nav List</title>
|
||||
|
||||
<!-- Sets initial viewport load and disables zooming -->
|
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
<link href="/vendor/font-awesome/css/font-awesome.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../dist/ionic.css">
|
||||
<script src="/vendor/angular/1.2.0rc2/angular.js"></script>
|
||||
<script src="/vendor/angular/1.2.0rc2/angular-touch.js"></script>
|
||||
<script src="/vendor/angular/1.2.0rc2/angular-animate.js"></script>
|
||||
<style>
|
||||
.reveal-animation {
|
||||
/*
|
||||
-webkit-transform: translate3d(0%, 0, 0);
|
||||
transform: translate3d(0%, 0, 0);
|
||||
|
||||
-webkit-transition: -webkit-transform 1s ease-in-out;
|
||||
transition: transform 1s ease-in-out;
|
||||
*/
|
||||
}
|
||||
.reveal-animation.ng-enter {
|
||||
-webkit-transition: .2s ease-in-out all;
|
||||
-webkit-transform:translate3d(100%,0,0) ;
|
||||
}
|
||||
.reveal-animation.ng-enter-active {
|
||||
-webkit-transform:translate3d(0,0,0) ;
|
||||
}
|
||||
.reveal-animation.ng-leave {
|
||||
-webkit-transition: .2s ease-in-out all;
|
||||
-webkit-transform:translate3d(0%,0,0);
|
||||
}
|
||||
.reveal-animation.ng-leave-active {
|
||||
-webkit-transition: .2s ease-in-out all;
|
||||
-webkit-transform:translate3d(-100%,0,0);
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav-controller>
|
||||
<nav-bar></nav-bar>
|
||||
<content has-header="true" ng-controller="AppCtrl" class="reveal-animation">
|
||||
</content>
|
||||
</nav-controller>
|
||||
|
||||
<script src="NavController.js"></script>
|
||||
<script src="NavAngular.js"></script>
|
||||
<script>
|
||||
var pageNumber = 0;
|
||||
|
||||
var pushIt = function($scope, $compile, $element, cb) {
|
||||
var childScope = $scope.$new();
|
||||
childScope.isVisible = true;
|
||||
|
||||
pageNumber++;
|
||||
|
||||
var el = $compile('<div title="Home: ' + pageNumber + '" ng-controller="CatsCtrl" nav-content has-header="true" class="reveal-animation" ng-show="isVisible">' +
|
||||
'<h1>' + pageNumber + '</h1>' +
|
||||
'<a href="#" class="button button-success" ng-click="goNext()">Next</a>' +
|
||||
'</div>')(childScope, cb);
|
||||
}
|
||||
|
||||
angular.module('navTest', ['ionic.ui'])
|
||||
|
||||
.controller('AppCtrl', function($scope, $compile, $element) {
|
||||
|
||||
$scope.items = [
|
||||
{ text: 'Hello' }
|
||||
];
|
||||
pushIt($scope, $compile, $element, function(cloned, scope) {
|
||||
$element.append(cloned);
|
||||
})
|
||||
|
||||
})
|
||||
|
||||
.controller('CatsCtrl', function($scope, $compile, $element) {
|
||||
console.log('Cats', $element);
|
||||
$scope.goNext = function() {
|
||||
pushIt($scope, $compile, $element, function(cloned, scope) {
|
||||
$element.parent().append(cloned);
|
||||
})
|
||||
};
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
36
test/controllers/route.html
Normal file
36
test/controllers/route.html
Normal file
@ -0,0 +1,36 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Route Controller</title>
|
||||
|
||||
<!-- Sets initial viewport load and disables zooming -->
|
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
<link href="/vendor/font-awesome/css/font-awesome.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../dist/ionic.css">
|
||||
</head>
|
||||
<body>
|
||||
<section>
|
||||
<header class="bar bar-header bar-dark">
|
||||
<h1 class="title">Routes</h1>
|
||||
</header>
|
||||
|
||||
<main class="has-header content">
|
||||
<a href="cats/">Cats</a>
|
||||
</main>
|
||||
</section>
|
||||
|
||||
<script src="RouteController.js"></script>
|
||||
<script>
|
||||
var rc = new RouteViewController({
|
||||
root: 'hacking/'
|
||||
});
|
||||
rc.when('route.html', function() {
|
||||
console.log('Loaded');
|
||||
});
|
||||
rc.when('cats', function() {
|
||||
console.log('Loaded');
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
85
test/controllers/sideMenu.html
Normal file
85
test/controllers/sideMenu.html
Normal file
@ -0,0 +1,85 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Side Menu</title>
|
||||
|
||||
<!-- Sets initial viewport load and disables zooming -->
|
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
<link href="/vendor/font-awesome/css/font-awesome.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../dist/ionic.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<section id="content" class="full-section menu-animated">
|
||||
|
||||
<header class="bar bar-header bar-dark">
|
||||
<a href="#" class="button"><i class="icon-reorder"></i></a>
|
||||
<h1 class="title">Tab Bars</h1>
|
||||
</header>
|
||||
|
||||
<main class="has-header content padded">
|
||||
<h1>Swipe me, side to side</h1>
|
||||
</main>
|
||||
</section>
|
||||
<section id="my-left-panel" class="menu menu-left">
|
||||
<h1>LEFT</h1>
|
||||
</section>
|
||||
<section id="my-right-panel" class="menu menu-right">
|
||||
<h1>RIGHT</h1>
|
||||
</section>
|
||||
|
||||
<script src="../../js/events.js"></script>
|
||||
<script src="../../js/gestures.js"></script>
|
||||
<script src="../../js/views/sideMenu.js"></script>
|
||||
<script src="../../js/controllers/sideMenuController.js"></script>
|
||||
<script>
|
||||
var Controller = function(opts) {
|
||||
var _this = this;
|
||||
|
||||
this.el = opts.el;
|
||||
this.animateClass = opts.animateClass;
|
||||
|
||||
// Bind release and drag listeners
|
||||
window.ionic.onGesture('drag', function(e) {
|
||||
_this.onDrag && _this.onDrag(e);
|
||||
}, this.el);
|
||||
|
||||
window.ionic.onGesture('release', function(e) {
|
||||
_this.endDrag && _this.endDrag(e);
|
||||
}, this.el);
|
||||
};
|
||||
Controller.prototype = {
|
||||
onDrag: function(e) {},
|
||||
endDrag: function(e) {},
|
||||
getTranslateX: function() {
|
||||
var r = /translate3d\((-?.+)px/;
|
||||
var d = r.exec(this.el.style.webkitTransform);
|
||||
|
||||
if(d && d.length > 0) {
|
||||
return parseFloat(d[1]);
|
||||
}
|
||||
return 0;
|
||||
},
|
||||
setTranslateX: function(amount) {
|
||||
this.el.style.webkitTransform = 'translate3d(' + amount + 'px, 0, 0)';
|
||||
},
|
||||
enableAnimation: function() {
|
||||
this.el.classList.add(this.animateClass);
|
||||
},
|
||||
disableAnimation: function() {
|
||||
this.el.classList.remove(this.animateClass);
|
||||
}
|
||||
};
|
||||
|
||||
var l = new ionic.ui.SideMenu({ el: document.getElementById('my-left-panel'), width: 270 });
|
||||
var r = new ionic.ui.SideMenu({ el: document.getElementById('my-right-panel'), width: 270 });
|
||||
var c = new Controller({ el: document.getElementById('content'), animateClass: 'menu-animated' });
|
||||
|
||||
var ctrl = new ionic.controllers.SideMenuController({
|
||||
left: l,
|
||||
right: r,
|
||||
content: c
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
109
test/controllers/tabBar.html
Normal file
109
test/controllers/tabBar.html
Normal file
@ -0,0 +1,109 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Tab Bars</title>
|
||||
|
||||
<!-- Sets initial viewport load and disables zooming -->
|
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
<link href="/vendor/font-awesome/css/font-awesome.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../../dist/ionic.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<section>
|
||||
|
||||
<header class="bar bar-header bar-dark">
|
||||
<h1 class="title">Tab Bars</h1>
|
||||
</header>
|
||||
|
||||
<main class="has-header content">
|
||||
<div id="tab1">
|
||||
<h2>Tab 1</h2>
|
||||
<p>
|
||||
Friends
|
||||
</p>
|
||||
</div>
|
||||
<div id="tab2">
|
||||
<h2>Tab 2</h2>
|
||||
<p>
|
||||
Friends
|
||||
</p>
|
||||
</div>
|
||||
<div id="tab3">
|
||||
<h2>Tab 3</h2>
|
||||
<p>
|
||||
Friends
|
||||
</p>
|
||||
</div>
|
||||
<div id="tab4">
|
||||
<h2>Tab 4</h2>
|
||||
<p>
|
||||
Friends
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
<nav id="tab-bar" class="tabs tabs-success"></nav>
|
||||
</section>
|
||||
|
||||
<script src="../../dist/ionic.js"></script>
|
||||
<script>
|
||||
// Grab the sections
|
||||
var tab = document.getElementById('tab-bar');
|
||||
|
||||
var tab1 = document.getElementById('tab1');
|
||||
var tab2 = document.getElementById('tab2');
|
||||
var tab3 = document.getElementById('tab3');
|
||||
var tab4 = document.getElementById('tab4');
|
||||
|
||||
var controller = function(opts) {
|
||||
this.el = opts.el;
|
||||
}
|
||||
controller.prototype = {
|
||||
visibilityChanged: function() {
|
||||
if(this.isVisible) {
|
||||
//this.el.style.display = 'block';
|
||||
if(this._lastNodeSpot) {
|
||||
this._lastNodeParent.insertBefore(this.el, this._lastNodeSpot);
|
||||
}
|
||||
} else {
|
||||
//this.el.style.display = 'none';
|
||||
var parentNode = this.el.parentNode;
|
||||
if(!parentNode) {
|
||||
return;
|
||||
}
|
||||
var next = this.el.nextSibling;
|
||||
this._lastNodeSpot = next;
|
||||
this._lastNodeParent = parentNode;
|
||||
parentNode.removeChild(this.el);
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
var c1 = new controller({
|
||||
el: tab1
|
||||
});
|
||||
c1.title = 'Mice';
|
||||
c1.icon = 'icon-home';
|
||||
var c2 = new controller({
|
||||
el: tab2
|
||||
});
|
||||
c2.title = 'Dogs';
|
||||
c2.icon = 'icon-gear';
|
||||
var c3 = new controller({
|
||||
el: tab3
|
||||
});
|
||||
c3.title = 'Cats';
|
||||
c3.icon = 'icon-plus';
|
||||
var c4 = new controller({
|
||||
el: tab4
|
||||
});
|
||||
c4.title = 'Cats';
|
||||
c4.icon = 'icon-minus';
|
||||
|
||||
var c = new ionic.controllers.TabBarController({
|
||||
tabBar: new ionic.views.TabBar({ el: tab }),
|
||||
controllers: [ c1, c2, c3, c4 ]
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
112
test/controllers/tabs.html
Normal file
112
test/controllers/tabs.html
Normal file
@ -0,0 +1,112 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Tab Bars</title>
|
||||
|
||||
<!-- Sets initial viewport load and disables zooming -->
|
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
<link href="/vendor/font-awesome/css/font-awesome.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../dist/ionic.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<section>
|
||||
|
||||
<header class="bar bar-header bar-dark">
|
||||
<h1 class="title">Tab Bars</h1>
|
||||
</header>
|
||||
|
||||
<main class="has-header content">
|
||||
<div id="tab1">
|
||||
<h2>Tab 1</h2>
|
||||
<p>
|
||||
Friends
|
||||
</p>
|
||||
</div>
|
||||
<div id="tab2">
|
||||
<h2>Tab 2</h2>
|
||||
<p>
|
||||
Friends
|
||||
</p>
|
||||
</div>
|
||||
<div id="tab3">
|
||||
<h2>Tab 3</h2>
|
||||
<p>
|
||||
Friends
|
||||
</p>
|
||||
</div>
|
||||
<div id="tab4">
|
||||
<h2>Tab 4</h2>
|
||||
<p>
|
||||
Friends
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
<nav id="tab-bar" class="tabs tabs-success"></nav>
|
||||
</section>
|
||||
|
||||
<script src="../../js/events.js"></script>
|
||||
<script src="../../js/gestures.js"></script>
|
||||
<script src="../../js/views/tabBar.js"></script>
|
||||
<script src="../../js/controllers/tabBarController.js"></script>
|
||||
<script>
|
||||
// Grab the sections
|
||||
var tab = document.getElementById('tab-bar');
|
||||
|
||||
var tab1 = document.getElementById('tab1');
|
||||
var tab2 = document.getElementById('tab2');
|
||||
var tab3 = document.getElementById('tab3');
|
||||
var tab4 = document.getElementById('tab4');
|
||||
|
||||
var controller = function(opts) {
|
||||
this.el = opts.el;
|
||||
}
|
||||
controller.prototype = {
|
||||
visibilityChanged: function() {
|
||||
if(this.isVisible) {
|
||||
//this.el.style.display = 'block';
|
||||
if(this._lastNodeSpot) {
|
||||
this._lastNodeParent.insertBefore(this.el, this._lastNodeSpot);
|
||||
}
|
||||
} else {
|
||||
//this.el.style.display = 'none';
|
||||
var parentNode = this.el.parentNode;
|
||||
if(!parentNode) {
|
||||
return;
|
||||
}
|
||||
var next = this.el.nextSibling;
|
||||
this._lastNodeSpot = next;
|
||||
this._lastNodeParent = parentNode;
|
||||
parentNode.removeChild(this.el);
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
var c1 = new controller({
|
||||
el: tab1
|
||||
});
|
||||
c1.title = 'Mice';
|
||||
c1.icon = 'icon-home';
|
||||
var c2 = new controller({
|
||||
el: tab2
|
||||
});
|
||||
c2.title = 'Dogs';
|
||||
c2.icon = 'icon-gear';
|
||||
var c3 = new controller({
|
||||
el: tab3
|
||||
});
|
||||
c3.title = 'Cats';
|
||||
c3.icon = 'icon-plus';
|
||||
var c4 = new controller({
|
||||
el: tab4
|
||||
});
|
||||
c4.title = 'Cats';
|
||||
c4.icon = 'icon-minus';
|
||||
|
||||
var c = new ionic.controllers.TabBarController({
|
||||
tabBar: new ionic.ui.TabBar({ el: tab }),
|
||||
controllers: [ c1, c2, c3, c4 ]
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user