html5_ionic_侧拉练习

来源：互联网发布：apache camel中文教程编辑：程序博客网时间：2024/05/22 07:08
<!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>
阅读全文
0 0