侧边栏 

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title>app</title>
    <link href="resource/ionic.min.css" rel="stylesheet">
    <script src="resource/ionic.bundle.min.js"></script>
    <script type="text/javascript">
    
    angular.module('starter', ['ionic'])

    .run(function($ionicPlatform) {
      $ionicPlatform.ready(function() {
        // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
        // for form inputs)
        if(window.cordova && window.cordova.plugins.Keyboard) {
          cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        }
        if(window.StatusBar) {
          // org.apache.cordova.statusbar required
          StatusBar.styleDefault();
        }
      });
    })

    .config(function($stateProvider, $urlRouterProvider) {
      $stateProvider

        .state('app', {
          url: "/app",
          abstract: true,
          templateUrl: "menu.html"
        })

        .state('app.playlists', {
          url: "/playlists",
          views: {
            'menuContent' :{
              templateUrl: "playlists.html"
            }
          }
        })
        
        .state('app.browse', {
          url: "/browse",
          views: {
            'menuContent' :{
              templateUrl: "browse.html"
            }
          }
        })
        
        .state('app.search', {
          url: "/search",
          views: {
            'menuContent' :{
              templateUrl: "search.html"
            }
          }
        })


      // if none of the above states are matched, use this as the fallback
      $urlRouterProvider.otherwise('/app/playlists');
    })

    

    

    </script>

  </head>

  <body ng-app="starter">
    <ion-nav-view></ion-nav-view>
    
    <script id="menu.html" type="text/ng-template">
        
    <ion-side-menus>

      <ion-pane ion-side-menu-content>
        <ion-nav-bar class="bar-stable nav-title-slide-ios7">
          <ion-nav-back-button class="button-clear"><i class="icon ion-chevron-left"></i> Back</ion-nav-back-button>
        </ion-nav-bar>
        <ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>
      </ion-pane>

      <ion-side-menu side="left">
        <header class="bar bar-header bar-stable">
          <h1 class="title">Left</h1>
        </header>
        <ion-content class="has-header">
          <ion-list>
            <ion-item nav-clear menu-close href="#/app/search">
              Search
            </ion-item>
            <ion-item nav-clear menu-close href="#/app/browse">
              Browse
            </ion-item>
            <ion-item nav-clear menu-close href="#/app/playlists">
              Playlists
            </ion-item>
          </ion-list>
        </ion-content>
      </ion-side-menu>
    </ion-side-menus>
      
    </script>

    <script id="playlists.html" type="text/ng-template">
    <ion-view title="Playlists">
      <ion-nav-buttons side="left">
        <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
      </ion-nav-buttons>
        <ion-content class="padding">
          123123
        </ion-content>
    </ion-view>  
    </script>
    
     <script id="browse.html" type="text/ng-template">
    <ion-view title="browse">
      <ion-nav-buttons side="left">
        <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
      </ion-nav-buttons>
        <ion-content class="padding">
          4444
        </ion-content>
    </ion-view>  
    </script>
    
    <script id="search.html" type="text/ng-template">
    <ion-view title="search">
      <ion-nav-buttons side="left">
        <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
      </ion-nav-buttons>
        <ion-content class="padding">
          5555555555
        </ion-content>
    </ion-view>  
    </script>
      
 
  </body>
</html>

 

posted @ 2016-10-28 14:02  fleam  阅读(355)  评论(0)    收藏  举报