在线编辑工具_程序员人生

源代码:

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title>W3Cschool教程(w3cschool.cn)</title>
    <link href="http://www.w3cschool.cn/statics/demosource/ionic.min.css" rel="stylesheet">
    <script src="http://www.w3cschool.cn/statics/demosource/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",
          controller: 'AppCtrl'
        })

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

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

.controller('AppCtrl', function($scope) {
    })

.controller('PlaylistsCtrl', function($scope) {
      console.log("PlaylistsCtrl");
      $scope.playlists = [
        { title: 'Reggae', id: 1 },
        { title: 'Chill', id: 2 },
        { title: 'Dubstep', id: 3 },
        { title: 'Indie', id: 4 },
        { title: 'Rap', id: 5 },
        { title: 'Cowbell', id: 6 }
      ];
    })

.controller('PlaylistCtrl', function($scope, $stateParams) {
    })

</script>

</head>

<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>

<ion-tabs class="tabs-positive tabs-icon-only">

<ion-tab title="Home" icon-on="ion-ios7-filing" icon-off="ion-ios7-filing-outline" class="has-header">
          
          <ion-content>
          <ion-list>
            <ion-item ng-repeat="playlist in playlists" href="#/app/playlists/{{playlist.id}}">
            {{playlist.title}}
            </ion-item>
          </ion-list>
            
          </ion-content>
        </ion-tab>

<ion-tab title="About" icon-on="ion-ios7-clock" icon-off="ion-ios7-clock-outline">
          
          <ion-content>
          <h1>About</h1>
            
          </ion-content>
        </ion-tab>

<ion-tab title="Settings" icon-on="ion-ios7-gear" icon-off="ion-ios7-gear-outline">
          
          <ion-content>
          <h1>Settings</h1>
            
          </ion-content>
        </ion-tab>

</ion-tabs>

</ion-view>  
    </script>
      
 
  </body>
</html>

​x
          <ion-nav-back-button class="button-clear"><i class="icon ion-chevron-left"></i> Back</ion-nav-back-button>
 
<html>  <head>    <meta charset="utf-8">    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">    <title>W3Cschool教程(w3cschool.cn)</title>    <link href="http://www.w3cschool.cn/statics/demosource/ionic.min.css" rel="stylesheet">    <script src="http://www.w3cschool.cn/statics/demosource/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",          controller: 'AppCtrl'        })​        .state('app.playlists', {          url: "/playlists",          views: {            'menuContent' :{              templateUrl: "playlists.html",              controller: 'PlaylistsCtrl'            }

运行结果：