ionic-侧边菜单$ionicSideMenuDelegate

来源：互联网发布：知更杨千嬅编辑：程序博客网时间：2024/06/05 09:48
<!DOCTYPE html><html ng-app="myApp"><head>    <meta charset="UTF-8">    <meta name="viewport"          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">    <link rel="stylesheet" href="js/lib/ionic1/css/ionic.min.css">    <script src="js/lib/ionic1/js/ionic.bundle.min.js"></script>    <title>Title</title>    <!--        $ionicSideMenuDelegate           必须注入    *一个容器元素的侧边菜单和主要内容。    *通过把主要内容区域从一边拖动到另一边，    *来让左侧或右侧的侧栏菜单进行切换。    *    --></head><body ng-controller="myCtrl"><ion-side-menus>    <!-- 中间内容 -->    <ion-side-menu-content>        <!--页面头部-->            <ion-header-bar class="bar-royal">                <!-- 左菜单 -->                <button class="button button-clear" ng-click="showLeft()">                    <i class="iocn ion-navicon"></i>                </button>                <h1 class="title">我是标题</h1>                    <!-- 右菜单 -->                <button class="button button-clear" ng-click="showRight()">                    <i class="icon ion-settings"></i>                </button>            </ion-header-bar>            <!--页面中间内容-->            <ion-content>                <ul class="list">                    <li ng-repeat="g in goodses">                        <span ng-bind="g"></span>                    </li>                </ul>            </ion-content>            <!--页面底部内容-->            <ion-footer-bar class="bar-royal">                <h1 class="title">我是底部</h1>            </ion-footer-bar>    </ion-side-menu-content>    <!-- 左侧菜单 -->    <ion-side-menu side="left">            <ul class="list">                <li class="item">侧边菜单</li>                <li class="item">侧边菜单</li>                <li class="item">侧边菜单</li>                <li class="item">侧边菜单</li>                <li class="item">侧边菜单</li>            </ul>    </ion-side-menu>    <!-- 右侧菜单 -->    <ion-side-menu side="right">        <ul class="list">            <li class="item">软件界面设置</li>            <li class="item">软件字体设置</li>            <li class="item">背景颜色设置</li>            <li class="item">自动翻页设置</li>            <li class="item">语音朗诵设置</li>        </ul>    </ion-side-menu></ion-side-menus><script>    var app=angular.module("myApp",["ionic"]);    app.controller("myCtrl",["$scope","$ionicSideMenuDelegate",            function ($scope,$ionicSideMenuDelegate) {        $scope.goodses=[];        for(var i=0;i<50;i++){            $scope.goodses.push("不要关空调"+i)        }        $scope.showLeft = function() {            $ionicSideMenuDelegate.toggleLeft();        }        $scope.showRight = function() {            $ionicSideMenuDelegate.toggleRight();        }    }])</script></html>
0 0