案例：ionic案例     状态：可编辑再运行    进入竖版
 运行结果　
​x
 
1
<html>
2
    <head>
3
        <meta charset="utf-8">
4
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
5
        <title>W3xue教程(w3xue.com)</title>
6
        <link href="https://cdn.bootcss.com/ionic/1.3.2/css/ionic.css" rel="stylesheet">
7
        <script src="https://cdn.bootcss.com/ionic/1.3.2/js/ionic.bundle.min.js"></script>
8
    </head>
9
    <body ng-app="todo" ng-controller="TodoCtrl">
10
    <ion-side-menus>
11
​
12
    <!-- 中心内容 -->
13
    <ion-side-menu-content>
14
      <ion-header-bar class="bar-dark">
15
        <button class="button button-icon" ng-click="toggleProjects()">
16
          <i class="icon ion-navicon"></i>
17
        </button>
18
        <h1 class="title">{{activeProject.title}}</h1>
19
        <!-- 新增按钮 -->
20
        <button class="button button-icon" ng-click="newTask()">
21
          <i class="icon ion-compose"></i>
22
        </button>
23
      </ion-header-bar>
24
      <ion-content scroll="false">
25
        <ion-list>
26
          <ion-item ng-repeat="task in activeProject.tasks">
27
            {{task.title}}
28
          </ion-item>
29
        </ion-list>
30
      </ion-content>
31
    </ion-side-menu-content>
32
​
33
    <!-- 左边栏 -->
34
    <ion-side-menu side="left">
35
    <ion-header-bar class="bar-dark">
36
      <h1 class="title">Projects</h1>
37
      <button class="button button-icon ion-plus" ng-click="newProject()">
38
      </button>
39
    </ion-header-bar>
40
    <ion-content scroll="false">
41
      <ion-list>
42
        <ion-item ng-repeat="project in projects" ng-click="selectProject(project, $index)" ng-class="{active: activeProject == project}">
43
          {{project.title}}
44
        </ion-item>
45
      </ion-list>
46
    </ion-content>
47
    </ion-side-menu>
48
​