ionic------侧拉

于 2018-01-15 20:28:46 发布
阅读量194 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Guiyide/article/details/79068420
版权
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="css/ionic.css" />
        <script type="text/javascript" src="js/ionic.bundle.min.js" ></script>
        <script>
            var app = angular.module("myApp", ['ionic']);
            app.controller("myCtrl", function($scope) {
                $scope.items = [1, 2, 3, 4, 5, 6, 7, 8];
            });
        </script>
    </head>

    <body ng-app="myApp" ng-controller="myCtrl">

        <ion-side-menus>
            <!-- 中间内容 -->
            <ion-side-menu-content>
                <ion-header-bar align-title="left" class="bar-positive">
                    <div class="buttons">
                        <button class="button" ng-click="doSomething()">Left Button</button>
                    </div>
                    <h1 class="title">Title!</h1>
                    <div class="buttons">
                        <button class="button">Right Button</button>
                    </div>
                </ion-header-bar>
                <ion-content>
                    <ion-list>
                        <ion-item ng-repeat="item in items">
                            <ion-radio ng-model="choice" ng-value="A">Hello, {{item}}!</ion-radio>
                            <ion-checkbox ng-model="isChecked">Hello, {{item}}!</ion-checkbox>
                        </ion-item>
                    </ion-list>
                </ion-content>
            </ion-side-menu-content>

            <!-- 左侧菜单 -->
            <ion-side-menu side="left">
                <ion-item ng-repeat="item in items">
                    <ion-checkbox ng-model="isChecked">Hello left, {{item}}!</ion-checkbox>
                </ion-item>
            </ion-side-menu>

            <!-- 右侧菜单 -->
            <ion-side-menu side="right">
                <ion-item ng-repeat="item in items">
                    <ion-radio ng-model="choice" ng-value="A">Hello right, {{item}}!</ion-radio>
                </ion-item>
            </ion-side-menu>
        </ion-side-menus>
    </body>

</html>






Guiyide
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ionic-framework-master.zip
08-06
"ionic-framework-master.zip" 文件很可能包含了Ionic Framework的源代码仓库，通常用于开发和学习。 在解压"ionic-framework-master"后，我们可以期待找到以下关键组成部分： 1. **项目结构**：在根目录下，通常...
Ionic-Sqlite
05-14
cd Ionic-Sqlite/ npm install 这个怎么运作： 将sql.js文件从（ ）复制到www文件夹。 在正文末尾的index.html文件中，导入[removed] </ script>。 使用此代码打开数据库并读取数据。 import SQL from ".....
HTML5 侧拉实现
Liang_WK的博客
10-20 1918
相对于现在主流的软件一般都需要侧拉来展示个人中心界面,所以下面分享一下侧拉代码 侧边栏 var app = angular.module("myApp", ["ionic"]); app.controller("myCtrl", function ($scope, $ionicSideMenuDeleg
h5项目常用iocic框架
Liang_WK的博客
10-20 611
相信大家对于每次做项目都要写框架感到厌烦,这里提供一个初始的h5框架: 路由-标签切换 var app = angular.module("myApp", ["ionic"]); app.config(function ($stateProvider, $urlRouterProvider) {
html5_ionic_侧拉练习
biggrand的博客
11-16 191
<!DOCTYPE html> <html><head> <meta charset="UTF-8"> <title></title> <link href="lib/css/ionic.min.css" rel="stylesheet" /> <script src="lib/js/ionic.bundle.min.js"></script> <script
ionic练习（2）- 实现侧拉菜单
人走丿茶凉
10-20 305
<!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
ionic侧拉实现
lishuaileibo的博客
12-14 112
八维商城             你好啊 我来拉              别跑啊   var app=angular.module("myapp",["ionic"]); app.controller("ContentController",functi
Ionic angular-ui-router小案例
weixin_30662011的博客
05-05 97
在实际开发中使用angular-ui的router模块是一种比较流行的做法。不同与angularJs本身的路由机制，angular-UI-router基于状态机，提供了嵌套路由等一系列功能。 在使用angular-ui-router的过程中，由于很难调试，并且没有报错信息。因此颇为不易。下面是一个简单的嵌套视图例子。 1. index.html 很简单。在body里面声明了ion-nav-vi...
ionic侧拉菜单
m_mt35的博客
10-20 298
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=
ionic 侧拉框
Yangweifeng_1225的博客
12-14 417
var myapp = angular.module("dxtapp", ['ionic']);    myapp.controller("myCtrl", function($scope) {     $scope.user = ["yyy1", "yyy2", "yyy3"];     $scope.settings = ["yyyy", "yyy", "yy", "y"];    }
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指令定义侧边栏菜单：
ionic-datepicker-oysq
06-02
"ionic-datepicker-oysq"是一个专为Ionic框架设计的日期选择器插件，它使得在Ionic应用中集成日期选择功能变得更加简单和高效。 Ionic是一款基于AngularJS的开源框架，用于构建跨平台的混合移动应用。它提供了丰富...
student-location
04-29
这个项目可能是使用npm（Node Package Manager）来管理依赖，并且基于Ionic框架构建的，因为标签中提到了"Ionic-framework"。Ionic是一个流行的开源框架，用于构建跨平台的移动应用程序，特别是混合型应用，它利用...
ionic-plugin
05-14
cordova plugin add com.ionic.keyboard方法cordova.plugins.Keyboard.hideKeyboardAccessoryBar cordova.plugins.Keyboard.close cordova.plugins.Keyboard.disableScroll cordova.plugins.Keyboard.show特性...
java毕设&课设-ASP校友录设计(源代码+论文).zip
最新发布
07-21
计算机毕业设计资源包含（项目部署视频+源码+LW+开题报告等等），所有项目经过助教老师跑通，有问题可以私信博主解决，可以免费帮部署。
ASP网上书店售书系统设计(源代码+论文).rar
07-21
ASP网上书店售书系统设计(源代码+论文)
ASP+SQL客户关系管理系统设计(源代码+论文).rar
07-21
ASP+SQL客户关系管理系统设计(源代码+论文)
java毕设&课设-ASP图书管理系统的设计与实现(源代码+论文).zip
07-21
计算机毕业设计资源包含（项目部署视频+源码+LW+开题报告等等），所有项目经过助教老师跑通，有问题可以私信博主解决，可以免费帮部署。
ionic-vue打包apk
10-11
要打包 Ionic-Vue 应用程序的 APK，需要遵循以下步骤： 1. 在项目根目录下执行以下命令安装 Cordova-Android 插件：`npm install cordova-android@8.1.0 --save-dev` 2. 添加 Android 平台：`ionic capacitor add ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值