ionic侧栏菜单案例

来源：互联网发布：我国生态数据编辑：程序博客网时间：2024/06/05 23:42
这里写图片描述
<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <script src="js/ionic.bundle.min.js" type="text/javascript" charset="utf-8"></script>        <link rel="stylesheet" type="text/css" href="css/ionic.min.css" />    </head>    <body ng-app="mmp" ng-controller="mCtrl">        <ion-side-menus>            <ion-side-menu-content>                <ion-header-bar class="bar-positive">                    <button ng-click="toss()" class="button button-small">☰</button>                    <!--                    <i class="icon ion-star"></i>                    <i class="icon ion-happy-outline"></i>                    <i class="icon ion-ios-analytics"></i>                    <i class="icon ion-ios-eye"></i>                -->                    <h1 class="title"> side me</h1>                </ion-header-bar>                <ion-content>                    <h3 style="display:inline-block">Content</h3>                </ion-content>            </ion-side-menu-content>            <ion-side-menu side='left'>                <ul class="list">                    <li class="item">item1</li>                    <li class="item">item2</li>                    <li class="item">item3</li>                    <li class="item">item4</li>                    <li class="item">item5</li>                    <li class="item">item6</li>                    <li class="item">item7</li>                    <li class="item">item8</li>                    <li class="item">item9</li>                    <li class="item">item10</li>                    <li class="item">item11</li>                    <li class="item">item12</li>                    <li class="item">item13</li>                    <li class="item">item14</li>                    <li class="item">item15</li>                </ul>            </ion-side-menu>        </ion-side-menus>    </body></html><script type="text/javascript">    var mo = angular.module("mmp", ["ionic"])    mo.controller("mCtrl", function($scope, $ionicSideMenuDelegate) {        $scope.toss = function() {            $ionicSideMenuDelegate.toggleLeft()        }    })</script>
》》》ionic菜鸟教程详解
阅读全文
0 0