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 栏可以切换页面),可以 ...
随机推荐
- poj1742硬币——多重背包可行性
题目:http://poj.org/problem?id=1742 贪心地想,1.如果一种面值已经可以被组成,则不再对它更新: 2.对于同一种面值的硬币,尽量用较少硬币(一个)更新,使后面可以用更多此 ...
- 重学JAVA基础(一):PATH和CLASSPATH
我想大多数Java初学者都会遇到的问题,那就是怎么配置环境,执行java -jar xxx.jar 都会报NoClassDefFindError,我在最开始学习的时候,也遇到了这些问题. 1.PAT ...
- Linux MySQL5.5的安装
1.安装cmake [root@server1 src]# cd /opt/ipnms/src[root@server1 src]# tar zxvf cmake-2.8.4.tar.gz[root@ ...
- 用idea工具对java打包：命令 mvn clear package，报错
用idea工具对java打包:命令 mvn clear package,报错 网上都是eclipse的,要么是project structure和setting的(当然这俩也要用) 我都试了,每一个能 ...
- Eclipse简介和使用
常用快捷键 快捷键的配置,常用快捷键: 内容提示: Alt + / 例如: System.out.println(); 语句 ,syso再按住alt 和/ 就会补全. 忘记某个类如何书写,可以写出一部 ...
- SLAM细碎内容积累_来自各种技术交流群_持续更新
imu标定 工具包:imu_utils, imu_tk, kalibr 用kalibr做标定,相机和imu的采样频率要求:相机20,imu100.kalibr也可以做鱼眼相机+imu的联合标定 ...
- Unobtrusive Javascript有三层含义
一是在HTML代码中不会随意的插入Javsscript代码,只在标签中加一些额外的属性值,然后被引用的脚本文件识别和处理: 二是通过脚本文件所增加的功能是一种渐进式的增强,当客户端不支持或禁用了Jav ...
- 网站特效离不开脚本，javascript是最常用的脚本语言，我们归纳一下常用的基础函数和语法：
转载自网络,非原创 1.输出语句:document.write(""); 2.JS中的注释为//3.传统的HTML文档顺序是:document->html->(head ...
- C++11之lambda表达式解析
什么是Lanmbda? 简短函数,就地书写.常用于向函数(算法)传递函数参数. 语法 Lambda 表达式,[capture](paras)mutable->return type{statem ...
- zoj2901【DP·二进制优化】
题意: 要排一个L长度的序列,当 j 放在 i 后面的时候会增加v[ i ][ j ]的值,求构成L长度序列的最大值. 思路: 可以想到预处理任意两点<i,j>的最大值是多少,然后题目还有 ...