mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-23 05:58:26 +08:00
155 lines
3.6 KiB
HTML
155 lines
3.6 KiB
HTML
<link href="view.css" rel="stylesheet">
|
|
<link href="transition.css" rel="stylesheet">
|
|
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
|
|
|
|
<body ng-app="app" ng-controller="MainCtrl">
|
|
|
|
<div class="view">
|
|
|
|
<div class="tool-bar">
|
|
Tabs
|
|
</div>
|
|
|
|
<div class="tool-bar tab-bar" ng-class="tabsLocation">
|
|
<button ng-click="tab1()" class="tab-item">1</button>
|
|
<button ng-click="tab2()" class="tab-item">2</button>
|
|
<button ng-click="tab3()" class="tab-item">3</button>
|
|
</div>
|
|
|
|
<div class="container">
|
|
|
|
<div class="view" ng-class="view1Class">
|
|
<div class="container">
|
|
<div class="content">
|
|
<p>tab1</p>
|
|
<p>Should animate between tabs</p>
|
|
<p>
|
|
<button ng-click="tabsTop()">Tabs Top</button>
|
|
</p>
|
|
<p>
|
|
<button ng-click="tabsBottom()">Tabs Bottom</button>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="view" ng-class="view2Class">
|
|
<div class="container">
|
|
<div class="content">
|
|
<p>tab2</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="view" ng-class="view3Class">
|
|
<div class="container">
|
|
<div class="content">
|
|
<p>tab3</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</body>
|
|
|
|
|
|
<script src="angular.min.js"></script>
|
|
<script>
|
|
angular.module('app', []).controller('MainCtrl', function($scope, $timeout) {
|
|
|
|
$scope.view1Class = '';
|
|
$scope.view2Class = 'hide';
|
|
$scope.view3Class = 'hide';
|
|
$scope.tabsLocation = 'tool-bar-bottom';
|
|
|
|
var activeTab = 1;
|
|
|
|
$scope.tab1 = function() {
|
|
if (activeTab == 2) {
|
|
$scope.view1Class = 'view-left';
|
|
$scope.view2Class = 'view-center';
|
|
$scope.view3Class = 'hide';
|
|
|
|
$timeout(function() {
|
|
$scope.view1Class = 'view-center';
|
|
$scope.view2Class = 'view-right';
|
|
}, 32);
|
|
|
|
} else if (activeTab == 3) {
|
|
$scope.view1Class = 'view-left';
|
|
$scope.view2Class = 'hide';
|
|
$scope.view3Class = 'view-center';
|
|
|
|
$timeout(function() {
|
|
$scope.view1Class = 'view-center';
|
|
$scope.view3Class = 'view-right';
|
|
}, 32);
|
|
}
|
|
|
|
activeTab = 1;
|
|
};
|
|
|
|
$scope.tab2 = function() {
|
|
if (activeTab == 1) {
|
|
$scope.view1Class = 'view-center';
|
|
$scope.view2Class = 'view-right';
|
|
$scope.view3Class = 'hide';
|
|
|
|
$timeout(function() {
|
|
$scope.view1Class = 'view-left';
|
|
$scope.view2Class = 'view-center';
|
|
}, 32);
|
|
|
|
} else if (activeTab == 3) {
|
|
$scope.view1Class = 'hide';
|
|
$scope.view2Class = 'view-left';
|
|
$scope.view3Class = 'view-center';
|
|
|
|
$timeout(function() {
|
|
$scope.view2Class = 'view-center';
|
|
$scope.view3Class = 'view-right';
|
|
}, 32);
|
|
}
|
|
|
|
activeTab = 2;
|
|
};
|
|
|
|
$scope.tab3 = function() {
|
|
if (activeTab == 1) {
|
|
$scope.view1Class = 'view-center';
|
|
$scope.view2Class = 'hide';
|
|
$scope.view3Class = 'view-right';
|
|
|
|
$timeout(function() {
|
|
$scope.view1Class = 'view-left';
|
|
$scope.view3Class = 'view-center';
|
|
}, 32);
|
|
|
|
} else if (activeTab == 2) {
|
|
$scope.view1Class = 'hide';
|
|
$scope.view2Class = 'view-center';
|
|
$scope.view3Class = 'view-right';
|
|
|
|
$timeout(function() {
|
|
$scope.view2Class = 'view-left';
|
|
$scope.view3Class = 'view-center';
|
|
}, 32);
|
|
}
|
|
|
|
activeTab = 3;
|
|
};
|
|
|
|
$scope.tabsTop = function() {
|
|
$scope.tabsLocation = 'tool-bar-top';
|
|
};
|
|
|
|
$scope.tabsBottom = function() {
|
|
$scope.tabsLocation = 'tool-bar-bottom';
|
|
};
|
|
|
|
});
|
|
</script>
|