mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-07 15:07:13 +08:00
Hacking on Angular extension for TabBar
This commit is contained in:
Max Lynch
117
hacking/TabAngular.js
Normal file
117
hacking/TabAngular.js
Normal file
@ -0,0 +1,117 @@
|
|||||||
|
angular.module('ionic.ui', [])
|
||||||
|
|
||||||
|
.directive('content', function() {
|
||||||
|
return {
|
||||||
|
restrict: 'E',
|
||||||
|
replace: true,
|
||||||
|
transclude: true,
|
||||||
|
scope: {
|
||||||
|
hasHeader: '@',
|
||||||
|
hasTabs: '@'
|
||||||
|
},
|
||||||
|
template: '<div class="content" ng-class="{\'has-header\': hasHeader, \'has-tabs\': hasTabs}" ng-transclude></div>'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
.controller('TabsCtrl', function($scope) {
|
||||||
|
// Controller stuff goes here
|
||||||
|
$scope.items = [];
|
||||||
|
|
||||||
|
this.addItem = function(item) {
|
||||||
|
console.log('Adding item', item);
|
||||||
|
$scope.items.push({
|
||||||
|
title: item.title
|
||||||
|
});
|
||||||
|
};
|
||||||
|
})
|
||||||
|
|
||||||
|
.directive('tabs', function() {
|
||||||
|
return {
|
||||||
|
restrict: 'E',
|
||||||
|
replace: true,
|
||||||
|
scope: {},
|
||||||
|
transclude: true,
|
||||||
|
controller: 'TabsCtrl',
|
||||||
|
//templateUrl: 'ext/angular/tmpl/ionicTabBar.tmpl.html',
|
||||||
|
template: '<div class="view"><div ng-transclude></div><tab-bar></tab-bar></div>',
|
||||||
|
compile: function(element, attr, transclude, tabsCtrl) {
|
||||||
|
return function($scope, $element, $attr) {
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// Generic controller directive
|
||||||
|
.directive('tabController', function() {
|
||||||
|
return {
|
||||||
|
restrict: 'E',
|
||||||
|
replace: true,
|
||||||
|
transclude: true,
|
||||||
|
template: '<div ng-transclude></div>',
|
||||||
|
require: '^tabs',
|
||||||
|
scope: {
|
||||||
|
title: '@'
|
||||||
|
},
|
||||||
|
link: function(scope, element, attrs, tabsCtrl) {
|
||||||
|
tabsCtrl.addItem(scope);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
.directive('tabBar', function() {
|
||||||
|
return {
|
||||||
|
restrict: 'E',
|
||||||
|
require: '^tabs',
|
||||||
|
transclude: true,
|
||||||
|
replace: true,
|
||||||
|
template: '<div class="tabs">' +
|
||||||
|
'<a href="#" class="tab-item" ng-repeat="item in items">' +
|
||||||
|
'<i class="{{item.icon}}"></i> {{item.title}}' +
|
||||||
|
'</a>' +
|
||||||
|
'</div>'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
.directive('tabItem', function() {
|
||||||
|
return {
|
||||||
|
restrict: 'E',
|
||||||
|
replace: true,
|
||||||
|
require: '^tabBar',
|
||||||
|
scope: {
|
||||||
|
text: '@',
|
||||||
|
icon: '@',
|
||||||
|
active: '=',
|
||||||
|
tabSelected: '@',
|
||||||
|
},
|
||||||
|
compile: function(element, attrs, transclude) {
|
||||||
|
return function(scope, element, attrs, tabBarCtrl) {
|
||||||
|
var getActive, setActive;
|
||||||
|
|
||||||
|
scope.$watch('active', function(active) {
|
||||||
|
console.log('ACTIVE CHANGED', active);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
},
|
||||||
|
link: function(scope, element, attrs, tabBarCtrl) {
|
||||||
|
|
||||||
|
// Store the index of this list item, which
|
||||||
|
// specifies which tab item it is
|
||||||
|
scope.tabIndex = element.index();
|
||||||
|
|
||||||
|
scope.active = true;
|
||||||
|
|
||||||
|
scope.selectTab = function(index) {
|
||||||
|
console.log('SELECT TAB', index);
|
||||||
|
tabBarCtrl.selectTabAtIndex(index);
|
||||||
|
};
|
||||||
|
|
||||||
|
tabBarCtrl.addTab(scope);
|
||||||
|
},
|
||||||
|
template: '<li class="tab-item" ng-class="{active:active}">' +
|
||||||
|
'<a href="#" ng-click="selectTab(tabIndex)">' +
|
||||||
|
'<i class="{{icon}}"></i>' +
|
||||||
|
'{{text}}' +
|
||||||
|
'</a></li>'
|
||||||
|
}
|
||||||
|
});
|
||||||
55
hacking/tabsAngular.html
Normal file
55
hacking/tabsAngular.html
Normal file
@ -0,0 +1,55 @@
|
|||||||
|
<html ng-app="tabsTest">
|
||||||
|
<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">
|
||||||
|
<script src="/vendor/angular/angular.js"></script>
|
||||||
|
<style>
|
||||||
|
.content {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<tabs>
|
||||||
|
<tab-controller title="Home">
|
||||||
|
<header class="bar bar-header bar-dark">
|
||||||
|
<h1 class="title">Tab Bars</h1>
|
||||||
|
</header>
|
||||||
|
<content has-header="true" has-tabs="true">
|
||||||
|
<h1>Home</h1>
|
||||||
|
</content>
|
||||||
|
</tab-controller>
|
||||||
|
<tab-controller title="About">
|
||||||
|
<header class="bar bar-header bar-dark">
|
||||||
|
<h1 class="title">About</h1>
|
||||||
|
</header>
|
||||||
|
<content has-header="true" has-tabs="true">
|
||||||
|
<h1>About Us</h1>
|
||||||
|
</content>
|
||||||
|
</tab-controller>
|
||||||
|
<tab-controller title="Settings">
|
||||||
|
<header class="bar bar-header bar-dark">
|
||||||
|
<h1 class="title">Settings</h1>
|
||||||
|
</header>
|
||||||
|
<content has-header="true" has-tabs="true">
|
||||||
|
<h1>Settings</h1>
|
||||||
|
</content>
|
||||||
|
</tab-controller>
|
||||||
|
</tabs>
|
||||||
|
|
||||||
|
<script src="../../js/ionic-events.js"></script>
|
||||||
|
<script src="../../js/ionic-gestures.js"></script>
|
||||||
|
<script src="TabBar.js"></script>
|
||||||
|
<script src="TabBarController.js"></script>
|
||||||
|
<script src="TabAngular.js"></script>
|
||||||
|
<script>
|
||||||
|
angular.module('tabsTest', ['ionic.ui']);
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -189,12 +189,3 @@
|
|||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Pad top/bottom of content so it doesn't hide behind .bar-title and .bar-tab.
|
|
||||||
Note: For these to work, content must come after both bars in the markup */
|
|
||||||
.has-header {
|
|
||||||
top: $bar-height;
|
|
||||||
}
|
|
||||||
|
|
||||||
.has-footer {
|
|
||||||
bottom: $bar-height;
|
|
||||||
}
|
|
||||||
|
|||||||
@ -29,6 +29,9 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.view {
|
.view {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
@ -53,6 +56,21 @@ body {
|
|||||||
padding: $content-padding;
|
padding: $content-padding;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Pad top/bottom of content so it doesn't hide behind .bar-title and .bar-tab.
|
||||||
|
// Note: For these to work, content must come after both bars in the markup
|
||||||
|
.has-header {
|
||||||
|
top: $bar-height;
|
||||||
|
}
|
||||||
|
|
||||||
|
.has-footer {
|
||||||
|
bottom: $bar-height;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Specify that a content area will have tabs
|
||||||
|
.has-tabs {
|
||||||
|
bottom: $tabs-height;
|
||||||
|
}
|
||||||
|
|
||||||
.inset {
|
.inset {
|
||||||
margin: $inset-margin;
|
margin: $inset-margin;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -98,3 +98,4 @@
|
|||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user