导航组件综合应用

2018-04-08 15:52:00
admin
原创
343
<html ng-app="example">
    <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="https://cdn.bootcss.com/ionic/1.3.2/css/ionic.css" rel="stylesheet">
        <script src="https://cdn.bootcss.com/ionic/1.3.2/js/ionic.bundle.min.js"></script>
        <script src="https://cdn.bootcss.com/lodash.js/4.3.0/lodash.js"></script>

    </head>
  <script type="text/javascript">
    ;
    angular.module('example', ['ionic'])
    .run(function($ionicPlatform) {
      $ionicPlatform.ready(function() {
        if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
          cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
          cordova.plugins.Keyboard.disableScroll(true);
        }
        if (window.StatusBar) {
          // org.apache.cordova.statusbar required
          StatusBar.styleDefault();
        }
      });
    });
  </script>

<script type="text/javascript">
  angular.module('example').config(function($stateProvider,$urlRouterProvider) {
    $stateProvider
    .state("home", {
      templateUrl: "home.html",
      url: "home"
    })
    .state("music", {
      templateUrl: "music.html",
      url: "music",
      controller: "MusicController"
    })
    .state("sports", {
      templateUrl: "sports.html",
      url: "sports"
    });
    $urlRouterProvider.otherwise("home");
  })
  .controller("NavController",function($scope,$state){
    $state.go("home");
  })
  ;
</script>
<body ng-controller="NavController">
  <!--导航栏,主题文本将由ion-view的view-title属性决定-->
  <ion-nav-bar class="bar-positive" >
    <ion-nav-back-button>
    </ion-nav-back-button>
  </ion-nav-bar>
  <!--导航视图容器,里面将动态插入页面模板-->
  <ion-nav-view></ion-nav-view>
  <!--页面模板:home.html,状态为home时被插入至ion-nav-view-->
  <script id="home.html" type="text/ng-template">
    <!-- 视图 -->
    <ion-view view-title="首页">
      <ion-content>
        <ion-list type="list-inset">
          <ion-item ui-sref="music" class="item-icon-left item-icon-right">
            <i class="icon ion-music-note"></i>
            转至音乐频道
            <i class="icon ion-ios-arrow-right"></i>
          </ion-item>
          <ion-item ui-sref="sports" class="item-icon-right item-icon-left">
            <i class="icon ion-ios-basketball"></i>
            转至体育频道
            <i class="icon ion-ios-arrow-right"></i>
          </ion-item>          
        </ion-list>
      </ion-content>
    </ion-view>
  </script>
  <script type="text/javascript">
    angular.module('example')
    .controller("MusicController",function($scope,$ionicNavBarDelegate){
      $scope.join = function(){};
      $scope.hideNavBar = function(){
        $ionicNavBarDelegate.showBar(false);
      };
  })
  </script>
  <!--页面模板:music.html,状态为home时被插入至ion-nav-view-->
  <script id="music.html" type="text/ng-template">
    <!-- 视图 -->
    <ion-view view-title="音乐">
      <ion-nav-title><img src="http://code.ybao.org/ybao_logo.png" height="30px" 
      style="margin-top: 8px;"></ion-nav-title>
      <ion-nav-buttons side="secondary">
        <button class="button" ng-click="join()">加入</button>
        <button class="button" ng-click="hideNavBar()">隐藏顶栏</button>
      </ion-nav-buttons>      
      <ion-content class="padding">
        <a class="button ion ion-home" ui-sref="home" 
        > 返回首页</a>
        <a class="button ion ion-ios-basketball" ui-sref="sports" 
        > 转至体育频道</a>
      </ion-content>
    </ion-view>
  </script>
  <!--页面模板:sports.html,状态为home时被插入至ion-nav-view-->  
  <script id="sports.html" type="text/ng-template">
    <!-- 视图 -->
    <ion-view view-title="体育">
      <ion-content class="padding">
        <a class="button ion ion-home" ui-sref="home"> 返回首页</a>
        <a class="button ion ion-music-note" ui-sref="music"> 转至音乐频道</a>
      </ion-content>
    </ion-view>
  </script>  
</body>

</html>		
				
文章分类
联系我们
电话: 18902328227
Email: 2689701946@qq.com
QQ: 2689701946
微信: 18902328227
地址: 广州番禺区繁华路
  • 在线客服
  • 关注微信
  • 联系电话
    • 欢迎咨询
    • 欢迎加入QQ群 303257430
  • 公众号:源宝网络
    • 联系电话及微信号 18902328227