ionic-侧边菜单$ionicSideMenuDelegate

最新推荐文章于 2021-01-17 17:34:18 发布
最新推荐文章于 2021-01-17 17:34:18 发布
阅读量528 收藏 1
点赞数
分类专栏： ionic
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/guohao326/article/details/71597697
版权 
<!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>
郭浩326
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Bootstrap 3 : 侧边菜单插件 Sliding Side Menu/Panel with jQuery and Bootstrap - BootSid
Just Code
04-05 1139
  A simple lightweight javascript plugin used to create side menus/panels that smoothly slide out from the edge of your screen when toggled, built with jQuery and Bootstrap 3.   How to use it: ...
ionic 侧栏菜单
01-06
ionic 侧栏菜单 一个容器元素包含侧边菜单和主要内容。通过把主要内容区域从一边拖动到另一边，来让左侧或右侧的侧栏菜单进行切换。 效果图如下所示： 用法 要使用侧栏菜单，添加一个父元素，一个中间内容 ，和一个或更多 <ion> 指令。 function ContentController($scope, $ionicSideMenuDelegate) { $scope.toggleLeft = function() { $ionicSideMenuDelegate.toggleLeft(); }; } API 属性
cordova-plugin-ionic-webview:用于Cordova的Web View插件，专门用于Ionic应用程序
05-04
科尔多瓦的Ionic Web View 适用于Cordova的Web View插件，专注于为Ionic应用程序提供最高性能体验（但可与任何Cordova应用程序一起使用）。 该插件在iOS上使用WKWebView，在Android上使用最新的常绿webview。 此外，此插件使Web开发人员期望使用HTML5样式路由轻松构建单页应用程序。 注意：此存储库及其文档适用于cordova-plugin-ionic-webview @ 5.x ，它使用的新功能可能不适用于所有应用程序。 请参阅和 2.x文档可以在找到。 :open_book: 文档： : :megaphone: 支持/问题？ 有关常规支持问题，请参见我们的。 GitHub上的问题应保留用于错误报告和功能请求。 :sparkling_heart: 想要贡献吗？ 请参阅 。 配置 该插件具有几个可在config.xml设置的配置选项。 Android和iOS偏好设置 适用于iOS和
BootSideMenu右侧栏弹出框，在弹出框选择数据之后直接填充到input中
廖宁波
05-15 2000
效果图如图所示： 右侧是弹出框，弹出框是数据源，左边是input输入框，点击右侧栏中的数据，直接将数据填充到左边的input框中，并且右侧栏中的此数据消失，如果选择另一条数据，则选择的数据填充到input框中，并且这条数据消失，之前选择的那条数据显示出来。 具体demo代码如下所示：<!DOCTYPE html> <html> <head> <meta charset
Ionic实现左侧侧边栏新建项目
程序员
09-16 1344
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link href="lib/ionic/css/ionic.css" rel="stylesheet"> <script src="lib/ionic/js/ionic.bundle.js"></sc
Ionic Js十七：侧栏菜单
aochou19810706的博客
06-17 99
一个容器元素包含侧边菜单和主要内容。通过把主要内容区域从一边拖动到另一边，来让左侧或右侧的侧栏菜单进行切换。 效果图如下所示：   用法 要使用侧栏菜单，添加一个父元素，一个中间内容 ，和一个或更多 指令。 <ion-side-menus> <!-- 中间内容 --> <ion-side-menu-content ng-co...
ionic $ionicSideMenuDelegate 侧滑事件
weixin_34199335的博客
04-03 113
2019独角兽企业重金招聘Python工程师标准>>> ...
侧边栏
Ason_haiyu的博客
01-13 268
angular.module("gaoyn", ["ionic"]) .controller("democ", function($scope, $ionicSideMenuDelegate) { $scope.toggleLeft = function() { $ionicSideMenuDelegate.toggleLeft(); };
Ionic基础——侧边栏ion-side-menus 以及ion-tap结合侧边栏详解
热门推荐
bboyjoe的博客
02-17 1万+
一． 侧边栏菜单 : ion-side-menus 侧边栏菜单是一个最多包含三个子容器的元素： 默认情况下，侧边栏菜单将只显示ion-side-menu-content容器的内容。 向左滑动时，将显示右边栏ion-side-menu容器的内容，向右滑动时，将显示左边栏 ion-side-menu容器的内容。 在ionic中，使用ion-side-menus指令定义侧边栏菜单：
angularjs动态侧边栏菜单_Ionic基础——侧边栏ion-side-menus 以及ion-tap结合侧边栏详解...
weixin_34154352的博客
01-17 574
一． 侧边栏菜单 : ion-side-menus侧边栏菜单是一个最多包含三个子容器的元素：默认情况下，侧边栏菜单将只显示ion-side-menu-content容器的内容。向左滑动时，将显示右边栏ion-side-menu容器的内容，向右滑动时，将显示左边栏 ion-side-menu容器的内容。在ionic中，使用ion-side-menus指令定义侧边栏菜单：menu-close指令用来给...
ionic 侧划菜单
02-03
ionic 侧划菜单，可以通过在侧边划动拉出菜单，背景会有渐变效果，顶问导航条固定
ionic侧边栏菜单模板APP
06-27
使用ionic框架构建的具有侧边栏菜单的应用程序模板APP
ionic-datepicker-oysq
06-02
这是一个封装好的ionic日期选择器，下载解压，点击date.html即可查看效果。
ionic-cache：具有IndexedDB，SQLite和WebSQL支持的Ionic和Angular缓存服务
02-20
离子缓存服务 离子缓存服务，可以缓存几乎所有内容。 它缓存请求，可观察，承诺和经典数据...npm install ionic-cache @ionic/storage --save 或纱线： yarn add ionic-cache @ionic/storage 您可以选择添加 。 并
ngx-ionic-image-viewer：一个Ionic 4 Angular组件，用于查看和缩放图像和照片，而无需任何其他依赖项
01-30
ngx-ionic-image-viewer 一个Ionic 4 Angular模块，用于查看和缩放图像和照片，而无需任何其他依赖项。演示版|总览先决条件离子> = 4.0.0 角度> = 8.0.0安装npm install --save ngx-ionic-image-viewer用法进口导入...
ionic-emoji-picker：适用于Ionic 3的Emoji选择器
02-05
离子3表情符号选择器该项目是由创建的 项目安装通过NPM安装模块npm i ionic-emoji-picker --save将其导入到您应用的模块中在应用程序的主模块中导入EmojiPickerModule.forRoot() app.module.ts import { ...
多图表实现员工满意度调查数据分析python
最新发布
04-22
员工满意度是指员工对于工作环境、待遇、职业发展和组织管理等方面的满意程度。它是衡量员工对工作的整体感受和情绪状态的重要指标。
2020届软件工程本科毕业生毕业设计项目.zip
04-22
2020届软件工程本科毕业生毕业设计项目
ionic-vue打包apk
10-11
要打包 Ionic-Vue 应用程序的 APK，需要遵循以下步骤： 1. 在项目根目录下执行以下命令安装 Cordova-Android 插件：`npm install [email protected] --save-dev` 2. 添加 Android 平台：`ionic capacitor add android` 3. 构建 Ionic 应用程序：`ionic build` 4. 将应用程序构建到 Android 平台：`npx cap copy` 5. 打开本机 IDE（如 Android Studio），在“Open an existing Android Studio project”窗口中选择项目的`android `目录 6. 构建 APK：在菜单栏中选择“Build”->“Build Bundle(s)/APK(s)”->“Build APK(s)” 7. APK 文件将被生成到 `android/app/build/outputs/apk/debug/` 目录中。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值