您的位置：首页 > 其它

IONIC----06.menu-tab

2016-07-26 09:27 369 查看 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">

<script src="./lib/js/ionic.bundle.min.js"></script>
<link rel="stylesheet" type="text/css" href="./lib/css/ionic.min.css">

<title>Ionic</title>
</head>

<body ng-app="myApp">
<ion-nav-bar class="nav-title-slide-ios7 bar-positive">
<ion-nav-back-button class="button-icon ion-arrow-left-c"></ion-nav-back-button>
</ion-nav-bar>

<div ng-controller="MainCtrl">
<ion-nav-view animation="slide-left-right"></ion-nav-view>
</div>

<script id="tabs.html" type="text/ng-template">
<ion-side-menus>
<ion-side-menu-content>
<ion-nav-bar class="bar-positive">
<ion-nav-back-button class="button-icon ion-arrow-left-c"></ion-nav-back-button>
</ion-nav-bar>

<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" ng-click="toggleLeft()"></button>
</ion-nav-buttons>

<!-- 在这里加上tab -->
<ion-tabs class="tabs-icon-top tabs-positive">
<ion-tab title="Home" icon="ion-home" href="#/tab/home">
<ion-nav-view name="home-tab"></ion-nav-view>
</ion-tab>

<ion-tab title="About" icon="icon ion-ios-person-outline" href="#/tab/about">
<ion-nav-view name="about-tab"></ion-nav-view>
</ion-tab>

<ion-tab title="Contact" icon="icon ion-ios-paper-outline" ui-sref="tabs.contact">
<ion-nav-view name="contact-tab"></ion-nav-view>
</ion-tab>
</ion-tabs>

<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>

<ion-side-menu side="left">
<ion-header-bar class="bar-assertive">
<h1 class="title">Left Menu</h1>
</ion-header-bar>

<ion-content>
<ul class="list">
<a href="#/event/check-in" class="item" menu-toggle="left">Check-in</a>
<a href="#/event/attendees" class="item" menu-toggle="left">Attendees</a>
</ul>
</ion-content>
</ion-side-menu>
</ion-side-menus>
</script>

<script id="home.html" type="text/ng-template">
<ion-view title="Home">
<ion-content class="padding">
<h2>home.html</h2>
<a class="button icon icon-right ion-chevron-right" href="#/tab/facts">Facts</a>
</ion-content>
</ion-view>
</script>

<script id="facts.html" type="text/ng-template">
<ion-view title="Facts" class="padding">
<ion-content>
<h2>facts.html</h2>
<a class="button icon ion-home" href="#/tab/home"> Home</a>
<a class="button icon icon-right ion-chevron-right" href="#/tab/facts2">Facts2</a>
</ion-content>
</ion-view>
</script>

<script id="facts2.html" type="text/ng-template">
<ion-view title="facts2">
<ion-content class="padding">
<h2>facts2.html</h2>
<a class="button icon ion-home" href="#/tab/home"> Home</a>
<a class="button icon ion-chevron-left" href="#/tab/facts">Facts</a>
</ion-content>
</ion-view>
</script>

<script id="about.html" type="text/ng-template">
<ion-view title="About">
<ion-content class="padding">
<h2>about.html</h2>
<a class="button icon icon-right ion-chevron-right" href="#/tab/navstack">navstack</a>
</ion-content>
</ion-view>
</script>

<script id="nav-stack.html" type="text/ng-template">
<ion-view title="Nav Stack">
<ion-content class="padding">
<h2>nav-stack.html</h2>
</ion-content>
</ion-view>
</script>

<script id="contact.html" type="text/ng-template">
<ion-view title="Contact">
<ion-content>
<h2>contact.html</h2>
</ion-content>
</ion-view>
</script>
</body>
</html>

<script>
angular.module('myApp', ['ionic'])
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('tabs', {
url: "/tab",
abstract: true,
templateUrl: "tabs.html"
})
.state('tabs.home', {
url: "/home",
views: {
'home-tab': {
templateUrl: "home.html",
controller: 'HomeTabCtrl'
}
}
})
.state('tabs.facts', {
url: "/facts",
views: {
'home-tab': {
templateUrl: "facts.html"
}
}
})
.state('tabs.facts2', {
url: "/facts2",
views: {
'home-tab': {
templateUrl: "facts2.html"
}
}
})
.state('tabs.about', {
url: "/about",
views: {
'about-tab': {
templateUrl: "about.html"
}
}
})
.state('tabs.navstack', {
url: "/navstack",
views: {
'about-tab': {
templateUrl: "nav-stack.html"
}
}
})
.state('tabs.contact', {
url: "/contact",
views: {
'contact-tab': {
templateUrl: "contact.html"
}
}
});

$urlRouterProvider.otherwise("/tab/home");
})

.controller('HomeTabCtrl', function ($scope) {
console.log('HomeTabCtrl');
})
.controller('MainCtrl', function($scope, $ionicSideMenuDelegate) {
$scope.toggleLeft = function() {
$ionicSideMenuDelegate.toggleLeft();
};
});
</script>


GITHUB
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  ionic menu-tab
相关文章推荐
新的分享
章节导航