用Ionic实现侧边栏菜单滑动效果

来源：互联网发布：卓大王yeile知乎编辑：程序博客网时间：2024/05/16 17:23
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>用Ionic实现侧边栏菜单 滑动效果</title>    <link rel="stylesheet" href="../ionic/css/ionic.css">    <script src="../ionic/js/ionic.bundle.min.js"></script>    <script>        /*  ionic 侧栏菜单：            一个容器元素包含侧边菜单和主要内容。通过把主要内容区域从一边拖动到另一边，来让左侧或右侧的侧栏菜单进行切换。*/        var app = angular.module("myApp",['ionic'])        .run(function($ionicPlatform) {            $ionicPlatform.ready(function() {                // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard                // for form inputs)                if(window.cordova && window.cordova.plugins.Keyboard) {                    cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);                }                if(window.StatusBar) {                    // org.apache.cordova.statusbar required                    StatusBar.styleDefault();                }            });        })            .config(function($stateProvider, $urlRouterProvider) {                $stateProvider                    .state('app', {                        url: "/app",                        abstract: true,                        templateUrl: "menu.html",                        controller: 'AppCtrl'                    })                    .state('app.playlists', {                        url: "/playlists",                        views: {                            'menuContent' :{                                templateUrl: "playlists.html",                                controller: 'PlaylistsCtrl'                            }                        }                    })                // if none of the above states are matched, use this as the fallback                $urlRouterProvider.otherwise('/app/playlists');            })            .controller('AppCtrl', function($scope) {            })            .controller('PlaylistsCtrl', function($scope) {                console.log("PlaylistsCtrl");                $scope.playlists = [                    { title: 'Reggae', id: 1 },                    { title: 'Chill', id: 2 },                    { title: 'Dubstep', id: 3 },                    { title: 'Indie', id: 4 },                    { title: 'Rap', id: 5 },                    { title: 'Cowbell', id: 6 }                ];            })            .controller('PlaylistCtrl', function($scope, $stateParams) {            })    </script></head><body ng-app="myApp">    <ion-nav-view></ion-nav-view>    <script id="menu.html" type="text/ng-template">        <ion-side-menus>            <ion-pane ion-side-menu-content>                <ion-nav-bar class="bar-stable nav-title-slide-ios7">                    <ion-nav-back-button class="button-clear">                        <i class="icon ion-chevron-left"></i>                        返回                    </ion-nav-back-button>                </ion-nav-bar>                <ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>            </ion-pane>            <ion-side-menu side="left">                <header class="bar bar-header bar-stable">                    <h1 class="title">Left</h1>                </header>                <ion-content class="has-header">                    <ion-list>                        <ion-item nav-clear menu-close href="#/app/search">                            Search                        </ion-item>                        <ion-item nav-clear menu-close href="#/app/browse">                            Browse                        </ion-item>                        <ion-item nav-clear menu-close href="#/app/playlists">                            Playlists                        </ion-item>                    </ion-list>                </ion-content>            </ion-side-menu>        </ion-side-menus>    </script>    <script id="playlists.html" type="text/ng-template">        <ion-view title="Playlists">            <ion-nav-buttons side="left">                <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>            </ion-nav-buttons>            <ion-tabs class="tabs-positive tabs-icon-only">                <ion-tab title="Home" icon-on="ion-ios7-filing" icon-off="ion-ios7-filing-outline" class="has-header">                    <!-- Tab 1 content -->                    <ion-content>                        <ion-list>                            <ion-item ng-repeat="playlist in playlists" href="#/app/playlists/{{playlist.id}}">                                {{playlist.title}}                            </ion-item>                        </ion-list>                    </ion-content>                </ion-tab>                <ion-tab title="About" icon-on="ion-ios7-clock" icon-off="ion-ios7-clock-outline">                    <!-- Tab 2 content -->                    <ion-content>                        <h1>About</h1>                    </ion-content>                </ion-tab>                <ion-tab title="Settings" icon-on="ion-ios7-gear" icon-off="ion-ios7-gear-outline">                    <!-- Tab 3 content -->                    <ion-content>                        <h1>Settings</h1>                    </ion-content>                </ion-tab>            </ion-tabs>        </ion-view>    </script></body></html>
阅读全文
0 0
用Ionic实现侧边栏菜单 滑动效果

用Ionic实现侧边栏菜单滑动效果
