webAPP制作框架Ionic--构建APP侧边栏 底部选项卡 轮播图 加载动画
超好用的移动框架--Ionic
Ionic是一个轻量的手机UI库，具有速度快，界面现代化、美观等特点。
为了解决其他一些UI库在手机上运行缓慢的问题，它直接放弃了IOS6和Android4.1以下的版本支持，来获取更好的使用体验。
（最近正在学习移动端项目制作，本文就Ionic的使用，简单示例了学习到的一些样式。）
1安装ionic
1.HBuilder创建APP项目，导入ionic的css，js（fonts）文件。
2.导入ionic.css和ionic.bundle.js文件。
2使用ionic框架提供的样式进行APP制作--侧滑菜单
1.HTML代码
<body ng-app="todo">
<ion-side-menus> <!-- 中心内容 -->
<ion-side-menu-content>
<ion-header-bar class="bar-dark">
<h1 class="title">Ionic</h1>
</ion-header-bar> <ion-content>
<div class="list card"> <div class="item item-avatar">
<img src="../img/222.jpg"/>
<h2>Ionic Demo</h2>
<p>LJY</p>
</div> <div class="item item-image">
<img src="../img/28.jpg">
</div> <a class="item assertive" href="#"> Try Ionic
</a> </div>
</ion-content>
</ion-side-menu-content> <!-- 左侧菜单 -->
<ion-side-menu side="left">
<ion-header-bar class="bar-dark">
<h1 class="title">Projects</h1> </ion-header-bar>
<div class="list"> <div class="item item-divider">
这是左侧菜单
</div> <a class="item" href="#">
This is page1
</a>
<a class="item" href="#">
This is page2 </a>
<a class="item" href="#">
This is page3
</a> </div>
</ion-side-menu> </ion-side-menus> <script type="text/javascript" src="../js/app.js"></script>
</body>
2.js
angular.module('todo', ['ionic'])
这样就实现了简单的主页和侧边菜单的制作。
3使用ionic框架提供的样式进行APP制作--底部选项卡
<ion-tabs class="tabs-positive tabs-icon-only">
<ion-tab title="首页" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline">
<ion-header-bar class="bar royal-bg">
<h1 class="title royal-bg">Ionic</h1>
</ion-header-bar>
<ion-content>
<ion-scroll direction="y" style="width: 100%;height:auto;">
<div class="list card">
<div class="item item-avatar">
<img src="../img/222.jpg" />
<h2>Ionic Demo</h2>
<p>LJY</p>
</div>
<div class="item item-image">
<img src="../img/2852185939109769629.jpg">
</div>
<a class="item assertive" href="#" on-tap="aaa()">
Try Ionic
</a>
</div>
<div class="list">
<div class="item item-input item-select">
<div class="input-label">
Lightsaber
</div>
<select>
<option>Blue</option>
<option selected="">Green</option>
</select>
</div>
</div>
</ion-scroll>
</ion-content>
<!-- 标签 1 内容 -->
</ion-tab>
<ion-tab title="2">
<ion-header-bar class="bar royal-bg">
<h1 class="title royal-bg">标签 2 </h1>
</ion-header-bar>
<h1>内容2222222222222222222222222222222222222</h1>
</ion-tab>
<ion-tab title="3">
<ion-header-bar class="bar royal-bg">
<h1 class="title royal-bg">标签3</h1>
</ion-header-bar>
<h1>内容 3333333333333333333333333333333333333333</h1>
</ion-tab>
</ion-tabs>
2使用ionic框架提供的样式进行APP制作--图片轮播及加载动画
<div>
<ion-slide-box active-slide="myActiveSlide" does-continue="true" slide-interval="1000">
<ion-slide>
<div class="box blue" on-tap="aaa()">
<h1>BLUE</h1></div>
</ion-slide>
<ion-slide>
<div class="box yellow">
<h1>YELLOW</h1></div>
</ion-slide>
<ion-slide>
<div class="box pink">
<h1>PINK</h1></div>
</ion-slide>
</ion-slide-box>
</div> <script>
angular.module('todo', ['ionic'])
.controller("todo", function($scope, $timeout, $ionicLoading) {
// 页面加载动画
$ionicLoading.show({
content: 'Loading',
animation: 'fade-in',
showBackdrop: true,
maxWidth: 200,
showDelay: 0
}); // 设置加载动画结束时间
$timeout(function() {
$ionicLoading.hide();
$scope.stooges = [{
name: 'Moe'
}, {
name: 'Larry'
}, {
name: 'Curly'
}];
}, 400);
$scope.myActiveSlide = 0;
})
</script>
目前还在学习制作中，感觉Ionic还是比较好用的一个框架，提供了比较多的功能和样式。
webAPP制作框架Ionic--构建APP侧边栏 底部选项卡 轮播图 加载动画的更多相关文章
- JS框架_(Bootstrap.js)实现简单的轮播图
Bootstrap框架中 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式 轮播图效果: <!DOCTYPE html> <html> <head&g ...
- 手机端Zepto框架，利用swipejs插件做banner轮播图
一,HTML部分<div class="banner"> <div id="slider" class="swipe"&g ...
- iOS回顾笔记（05） -- 手把手教你封装一个广告轮播图框架
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,bi ...
- 用avalon框架怎么做轮播图?
avalon这个框架其实特别的小众,做个轮播图呢?在github上的例子只有一个,而且功能特别的少,有的引入的插件与avalon里面的指令又不兼容,所以找了一个owl-carousel,目前实现了移动 ...
- Vue(小案例_vue+axios仿手机app)_首页（底部导航栏+轮播图+九宫格）
---恢复内容开始--- 一.前言 1.底部导航(两种做法) 2.轮播图 ...
- 用css3制作旋转加载动画的几种方法
以WebKit为核心的浏览器,例如Safari和Chrome,对html5有着很好的支持,在移动平台中这两个浏览器对应的就是IOS和Android.最近在开发一个移动平台的web app,那么就有机会 ...
- 【VIP视频网站项目一】搭建视频网站的前台页面（导航栏+轮播图+电影列表+底部友情链接）
首先来直接看一下最终的效果吧: 项目地址:https://github.com/xiugangzhang/vip.github.io 在线预览地址:https://xiugangzhang.githu ...
- [vuejs短文]使用vue-transition制作小小轮播图
提示 本文是个人的一点小笔记,用来记录开发中遇到的轮播图问题和vue-transition问题. 会不断学习各种轮播图添加到本文当中 也有可能会上线,方便看效果 开始制作 超简易呼吸轮播 简单粗暴的使 ...
- 图解微信小程序---添加tabBar底部菜单，添加已做好轮播图操作
图解微信小程序---添加tabBar底部菜单,添加已做好轮播图操作 什么是tabBar? 顶部或者底部tab栏如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以 ...
随机推荐
- Day07:常用模块，面向对象编程（对象&类）及内置函数
今日内容:1.常用模块2.面向对象编程(*****) 介绍面向对象编程 类 对象3.内置函数------------------------------1.面向过程编程 核心“ ...
- stm32之通信
本文提到的内容有以下几个方面: 通信概述 串口通信 I2C通信 CAN通信 SPI通信 I2S通信 USB通信 其他通信 一.通信概述 按照数据传送方式分: 串行通信(一条数据线.适合远距离传输.控制 ...
- <正则吃饺子> ：关于redis配置文件参数详解
来源于网络博文,感谢作者的分享,转载只为学习,方便查找,原文地址:http://blog.csdn.net/ljl890705/article/details/51540427 Redis是一个应用非 ...
- 6、scala面向对象-对象
一.对象 1.object object,相当于class的单个实例,通常在里面放一些静态的field或者method,第一次调用object的方法时,就会执行object的constructor, ...
- java.endorsed.dirs的作用
java.endorsed.dirs java.ext.dirs 用于扩展jdk的系统库,那么 -Djava.endorsed.dirs 又有什么神奇的作用呢? java提供了endorsed技术 ...
- 【转载】Eclipse:Android开发中如何查看System.out.println的输出内容
Android开发中在代码中通过System.out.println的输出内容不知道去哪了,在console视图中看不到.而通过Log.i之类的要在Logcat视图中看到,夹杂了太多的其它App及底层 ...
- js基础（补10.10）
1.内嵌式: <html> <head> <title></title> </head> <body> <a href=& ...
- SQL Server（二）——语句 转
表的创建: 1.创建列(字段):列名+类型 2.设置主键列(primary key):能够唯一标识一条数据 3.设置唯一(unique):内容不能重复 4.外键关系:一张表(从表)其中的某列引用自另外 ...
- 缓存测试分享篇：如何利用测试环境进行灰度测试缓存迁移solo
此文已由作者王婷英授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 缓存,看到这两个字,第一反应,最近怎么又要弄缓存的改造啊,这个测试好复杂,一不不留心就踩一个线上bug.实在 ...
- OVN学习（二）
部署OVN实验环境 同OVN学习(一) L3网络 创建逻辑交换机和路由 ### Central节点 ### 创建逻辑交换机和路由器 # ovn-nbctl ls-add inside # ovn-nb ...