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 栏可以切换页面),可以 ...
随机推荐
- MQTT协议简介及协议原理
MQTT(Message Queuing Telemetry Transport,消息队列遥测传输协议),是一种基于发布/订阅(publish/subscribe)模式的“轻量级”通讯协议,该协议构建 ...
- SpringBoot @RequestBody 中文乱码
今天突然想学习一下Restful风,详细的我就不赘述了,我的理解是同一个请求路径根据请求方式不同进行不同的处理 如四种提交方式,这里推荐一个插件Postman,可以模仿各种请求类型,自行百度安装吧 G ...
- Struts result param详细设置
<</span>result type="json"> <</span>param name="root">da ...
- Laravel中使用Session存取验证码信息
1.将验证码存储到session中. $request->session()->put('validate_code',$validateCode->getCode());//存储信 ...
- pure css做的手机页面
<!doctype html> <html> <head> <meta http-equiv="Content-type" content ...
- mysql由浅入深探究（二）----mysql用户操作
上一节我们完成了mysql的安装,现在我们将开启实战模式,完成一些基本的mysql操作.这节我们分为一些几个内容: mysql中用户新建 mysql中用户删除 mysql中用户修改 mysql中用户查 ...
- 51nod1117【贪心】
思路:哈夫曼树~~哇塞,那么有道理. 利用堆维护:每次从堆里取两个最小加起来,然后还是最小的两个,最后只剩一根总的 #include <bits/stdc++.h> using names ...
- UnityShader实例09:Stencil Buffer&Stencil Test
http://blog.csdn.net/u011047171/article/details/46928463 Stencil Buffer&Stencil Test 在开始前先吐槽下uni ...
- 2017-9-9 NOIP模拟赛
站军姿 2bc*cosA=b^2+c^2-a^2 #include<cstdio> #include<cstdlib> #include<cmath> #inclu ...
- 洛谷P1044 栈（Catalan数）
P1044 栈 题目背景 栈是计算机中经典的数据结构,简单的说,栈就是限制在一端进行插入删除操作的线性表. 栈有两种最重要的操作,即pop(从栈顶弹出一个元素)和push(将一个元素进栈). 栈的重要 ...