100 Ionic Tabs Template
.
100 Ionic Tabs Template
HTML
<html> <head> <meta charset="utf-8"> <title>Diary</title> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <!-- Internal Library <link href="lib/ionic/css/ionic.css" rel="stylesheet"><script src="lib/ionic/js/ionic.bundle.js"></script> --> <!-- Cloud Library --> <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet"> <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script> <!-- Needed for Cordova/PhoneGap (will be a 404 during development) --> <script src="cordova.js"></script> </head> <body ng-app="app"> <div> <div> <ion-nav-bar class="bar-stable"> <ion-nav-back-button></ion-nav-back-button> </ion-nav-bar> <ion-nav-view></ion-nav-view> </div> </div> <script id="tabsController.html" type="text/ng-template"> <ion-view id="page1"> <ion-tabs class="tabs-stable tabs-icon-top" id="tabsController-tabs1"> <ion-tab title="Camera Tab" icon="ion-ios-camera" href="#/page1/page2" id="tabsController-tab1"> <ion-nav-view name="tab1"></ion-nav-view> </ion-tab> <ion-tab title="Cart Tab" icon="ion-ios-cart" href="#/page1/page3" id="tabsController-tab2"> <ion-nav-view name="tab2"></ion-nav-view> </ion-tab> <ion-tab title="Cloud Tab" icon="ion-ios-cloud" href="#/page1/page4" id="tabsController-tab3"> <ion-nav-view name="tab3"></ion-nav-view> </ion-tab> </ion-tabs> </ion-view> </script> <script id="cameraTabDefaultPage.html" type="text/ng-template"> <ion-view title="Camera Tab Default Page" id="page2"> <ion-content padding="true" class="has-header"></ion-content> </ion-view> </script> <script id="cartTabDefaultPage.html" type="text/ng-template"> <ion-view title="Cart Tab Default Page" id="page3"> <ion-content padding="true" class="has-header"></ion-content> </ion-view> </script> <script id="cloudTabDefaultPage.html" type="text/ng-template"> <ion-view title="Cloud Tab Default Page" id="page4"> <ion-content padding="true" class="has-header"></ion-content> </ion-view> </script> </body> </html> |
JS
angular.module(app, [ionic]) .controller(cameraTabDefaultPageCtrl, [$scope, $stateParams, function ($scope, $stateParams) { }]) .controller(cartTabDefaultPageCtrl, [$scope, $stateParams, function ($scope, $stateParams) { }]) .controller(cloudTabDefaultPageCtrl, [$scope, $stateParams, function ($scope, $stateParams) { }]) .config(function($stateProvider, $urlRouterProvider) { $stateProvider .state(tabsController.cameraTabDefaultPage, { url: /page2, views: { tab1: { templateUrl: cameraTabDefaultPage.html, controller: cameraTabDefaultPageCtrl } } }) .state(tabsController.cartTabDefaultPage, { url: /page3, views: { tab2: { templateUrl: cartTabDefaultPage.html, controller: cartTabDefaultPageCtrl } } }) .state(tabsController.cloudTabDefaultPage, { url: /page4, views: { tab3: { templateUrl: cloudTabDefaultPage.html, controller: cloudTabDefaultPageCtrl } } }) .state(tabsController, { url: /page1, templateUrl: tabsController.html, abstract:true }) $urlRouterProvider.otherwise(/page1/page2) }); |
link download
No comments:
Post a Comment
Note: Only a member of this blog may post a comment.