快乐学习 Ionic Framework+PhoneGap 手册1-3 {面板切换}
生活随笔
收集整理的這篇文章主要介紹了
快乐学习 Ionic Framework+PhoneGap 手册1-3 {面板切换}
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
編程的快樂和樂趣，來自于能成功運行程序并運用到項目中,會在后面案例，實際運用到項目當中與數據更新一起說明
從面板切換開始，請看效果圖和代碼，這只是一個面板切換的效果
?
?Index HTML Code?
<!DOCTYPE html> <html ng-app="ionicApp"><head><meta charset="utf-8"><meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"><title></title><link href="lib/ionic/css/ionic.css" rel="stylesheet"><link href="css/style.css" rel="stylesheet"><!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above<link href="css/ionic.app.css" rel="stylesheet">--><!-- ionic/angularjs js --><script src="lib/ionic/js/ionic.bundle.js"></script><!-- cordova script (this will be a 404 during development) --><script src="cordova.js"></script><!-- your app's js --><script src="js/app.js"></script></head> <body ng-controller="FaceCtrl"><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><ion-nav-view animation="slide-left-right"></ion-nav-view><script id="tabs.html" type="text/ng-template"><ion-tabs class="tabs-icon-top tabs-positive"><ion-tab title="首頁" icon="ion-home" href="#/tab/home" badge="badges.home" badge-style="badge-assertive"><ion-nav-view name="home-tab"></ion-nav-view></ion-tab><ion-tab title="最新動態" icon="ion-ios7-information" href="#/tab/about" badge="5" badge-style="badge-assertive"><ion-nav-view name="about-tab"></ion-nav-view></ion-tab><ion-tab title="關于" icon="ion-ios7-world" ui-sref="tabs.contact" badge="badges.contact" badge-style="badge-assertive"><ion-nav-view name="contact-tab"></ion-nav-view></ion-tab></ion-tabs></script><script id="home.html" type="text/ng-template"><ion-view title="首頁"><ion-content class="padding"><p>全棧工程師，也叫全端工程師，英文Full Stack developer。是指掌握多種技能，并能利用多種技能獨立完成產品的人。</p><p><a class="button icon icon-right ion-chevron-right" href="#/tab/facts">最新動態</a></p></ion-content></ion-view></script><script id="facts.html" type="text/ng-template"><ion-view title="最新動態" class="padding"><ion-content><p>你現在的借口是阻礙你成功的絆腳石。 MarkFan</p><p>你現在的借口是阻礙你成功的絆腳石。 MarkFan</p><p>你現在的借口是阻礙你成功的絆腳石。 MarkFan</p><p>你現在的借口是阻礙你成功的絆腳石。 MarkFan</p><p><a class="button icon ion-home" href="#/tab/home"> 首頁</a><a class="button icon icon-right ion-chevron-right" href="#/tab/facts2">關于</a></p></ion-content></ion-view></script><script id="facts2.html" type="text/ng-template"><ion-view title="最新動態"><ion-content class="padding"><p>不要別人的負能量擊倒你的正能量。MarkFan</p><p>不要別人的負能量擊倒你的正能量。MarkFan</p><p><a class="button icon ion-home" href="#/tab/home"> 首頁</a><a class="button icon ion-chevron-left" href="#/tab/facts"> 最新動態</a></p></ion-content></ion-view></script><script id="about.html" type="text/ng-template"><ion-view title="最新動態"><ion-content class="padding"><h3>如果你比你身邊的絕大多數人都強，那你該換朋友圈了</h3><p>若非青春苦短，誰會想來日方長</p><p>若非青春苦短，誰會想來日方長</p><p><a class="button icon icon-right ion-chevron-right" href="#/tab/navstack">關于</a></p></ion-content></ion-view></script><script id="nav-stack.html" type="text/ng-template"><ion-view title="關于"><ion-content class="padding"><p><img src="http://ionicframework.com/img/diagrams/tabs-nav-stack.png" style="width:100%"></p></ion-content></ion-view></script><script id="contact.html" type="text/ng-template"><ion-view title="關于"><ion-content><p>放棄是經線，堅持是緯線</p><p>沒有一個谷底不可逾越</p></ion-content></ion-view></script></body> </html>?JS Code
angular.module('ionicApp', ['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) { }).controller('FaceCtrl', function($scope) {console.log('FaceCtrl');$scope.badges = {home : 10,contact : 3};console.log($scope.badges.home);});?
?
轉載于:https://www.cnblogs.com/cube/p/4086365.html
總結
以上是生活随笔為你收集整理的快乐学习 Ionic Framework+PhoneGap 手册1-3 {面板切换}的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 关于创业公司的一些事情
- 下一篇： 工作生活随笔