html5_ionic_側拉練習

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <link href="lib/css/ionic.min.css" rel="stylesheet" />
    <script src="lib/js/ionic.bundle.min.js"></script>
    <script>
        angular.module("myapp", ['ionic'])
            .controller("democ", ["$scope", "$ionicSideMenuDelegate", function($scope, $ionicSideMenuDelegate) {

                $scope.toggleProjects = function() {
                    $ionicSideMenuDelegate.toggleLeft(); //toggle
                };

            }]);
    </script>

</head>

<body ng-app="myapp" ng-controller="democ">
    <ion-side-menus>

        <!-- 中心內容 -->
        <ion-side-menu-content>
            <!--頭部-->
            <ion-header-bar class="bar-dark" ng-click="toggleProjects()">
                <button class="button button-icon">
                    <i class="icon ion-navicon"></i>
                </button>
                <h1 class="title">Todo</h1>
            </ion-header-bar>
            <!--內容區域-->
            <ion-content>
                ppppp
            </ion-content>
        </ion-side-menu-content>

        <!-- 左側菜單 -->
        <ion-side-menu side="left">
            <ion-header-bar class="bar-dark">
                <h1 class="title">Projects</h1>
            </ion-header-bar>

        </ion-side-menu>

    </ion-side-menus>

</body>

</html>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章