ionic 实现侧滑小demo
来源:互联网 发布:广州红砖厂淘宝摄影 编辑:程序博客网 时间:2024/05/24 04:13
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <!--设置适配--> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <link rel="stylesheet" href="lib/css/ionic.min.css" /> <script src="lib/js/ionic.bundle.min.js"></script> <script> angular.module("myApp",['ionic']) .controller("demoC",["$scope", "$ionicSideMenuDelegate",function($scope, $ionicSideMenuDelegate){ $scope.toOpen=function(){ $ionicSideMenuDelegate.toggleLeft(); }; }]); </script> </head> <body ng-app="myApp" ng-controller="demoC"> <ion-side-menus> <ion-side-menu-content> <ion-header-bar calss="bar-dark"> <button class="button button-icon" ng-click="toOpen()"> <i class="icon ion-navicon"></i> </button> <h1 class="title">我是主内容</h1> </ion-header-bar> <ion-content> <h1>Content</h1> </ion-content> </ion-side-menu-content> <!--侧拉菜单--> <ion-side-menu side="left"> <ion-header-bar calss="bar-dark"> <h1 class="title">我是侧拉内容</h1> <div class="content has-header"> <ul class="list"> <li class="item"> Battletoads </li> <li class="item"> Contra </li> <li class="item"> Duck Tales </li> <li class="item"> Mega Man </li> <li class="item"> Metroid </li> <li class="item"> Mike Tyson's Punch-Out </li> <li class="item"> R.C. Pro-Am </li> <li class="item"> Spy Hunter </li> <li class="item"> Super Mario Bros. </li> <li class="item"> The Legend of Zelda </li> </ul> </div> </ion-header-bar> </ion-side-menu> </ion-side-menus> </body></html>
阅读全文
0 0
- ionic 实现侧滑小demo
- ionic 图片上传Demo
- ionic官方demo解读
- ionic入门demo
- ionic 列表页+详细页面Demo示例
- ionic上拉刷新功能的demo
- ionic拍照功能实现
- Ionic实现侧边栏
- ionic实现轮播图效果
- ionic实现轮播
- ionic实现下拉刷新
- ionic侧拉实现
- ionic中的实现下拉刷新
- ionic 实现自动升级APP
- ionic 相册功能的实现
- ionic 实现音乐后台播放
- ionic静态购物车实现
- ionic 实现自动升级APP
- HLL算法
- node.js中的全局变量——global
- NDK support for project 'XXXX' is disabled because the project doesn't contain any valid native
- JavaScript中的数据类型以及使用
- 取出Oracle数据库中Blob类型的未编码图片流显示在JSP页面上
- ionic 实现侧滑小demo
- 【云星数据---Apache Flink实战系列(精品版)】:Apache Flink批处理API详解与编程实战015--DateSet实用API详解015
- 前后端分开开发
- linux安装、配置、使用supervisor
- Ubuntu 17.10 进系统卡死 (禁用Nvidia卡驱动)
- 通过maven下载依赖包速度慢或失败的解决方法
- 一文读懂深度学习与机器学习的差异
- mysql for centos6.5 安装
- Python很简单?学会魔术方法才算入门!