ionic_侧拉

来源：互联网发布：淘宝店铺链接在哪复制编辑：程序博客网时间：2024/05/11 00:10
<!DOCTYPE html><html ng-app="myApp"><head>    <meta charset="UTF-8">    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">    <title>侧边栏</title>    <link href="https://cdn.bootcss.com/ionic/1.3.2/css/ionic.css" rel="stylesheet">    <script src="https://cdn.bootcss.com/ionic/1.3.2/js/ionic.bundle.min.js"></script>    <script type="text/javascript">        var app = angular.module("myApp", ["ionic"]);        app.controller("myCtrl", function ($scope, $ionicSideMenuDelegate) {            $scope.toggleLeft = function () {                $ionicSideMenuDelegate.toggleLeft();            };        });    </script></head><body ng-controller="myCtrl"><ion-side-menus>    <!-- 中间内容 -->    <ion-side-menu-content>        <ion-header-bar class="bar-positive" align-title="center">            <button class="button button-icon ion-ios-more" ng-click="toggleLeft()"></button>            <h1 class="title">中间</h1>        </ion-header-bar>        <ion-content class="has-header">            这是“中间”页面HTML内容        </ion-content>    </ion-side-menu-content>    <!-- 左侧菜单 -->    <ion-side-menu side="left">        <ion-header-bar class="bar-positive">            <h1 class="title">左侧</h1>            <button class="button button-icon ion-ios-arrow-left" ng-click="toggleLeft()"></button>        </ion-header-bar>        <ion-content class="has-header">            这是“侧边栏”页面HTML内容        </ion-content>    </ion-side-menu></ion-side-menus></body></html>
阅读全文
0 0