ionic练习（2）- 实现侧拉菜单

最新推荐文章于 2018-10-31 14:23:00 发布

人走丿茶凉

最新推荐文章于 2018-10-31 14:23:00 发布

阅读量298

点赞数

分类专栏： html5+css3 javascript

本文链接：https://blog.csdn.net/luck_whr/article/details/78298395

版权

html5+css3 同时被 2 个专栏收录

23 篇文章 1 订阅

订阅专栏

javascript

22 篇文章 1 订阅

订阅专栏

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

收藏

觉得还不错? 一键收藏
0
评论
ionic练习（2）- 实现侧拉菜单

<!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
复制链接

扫一扫