html5_ionic_侧拉练习_html5 侧拉-优快云博客

本文展示了一个使用Ionic框架实现的侧边栏导航示例。该示例包括一个可切换显示的左侧菜单以及一个主体内容区域。通过AngularJS模块定义控制器来控制侧边栏的展开与收起。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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