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 栏可以切换页面),可以 ...
随机推荐
- poj1966Cable TV Network——无向图最小割(最大流)
题目:http://poj.org/problem?id=1966 把一个点拆成入点和出点,之间连一条边权为1的边,跑最大流即最小割: 原始的边权赋成inf防割: 枚举源点和汇点,直接相邻的两个点不必 ...
- 用Spring MVC开发简单的Web应用程序
1 工具与环境 借助Eclipse4.3 + Maven3.0.3构建Java Web应用程序.使用Maven内置的servlet 容器jetty,不需手工集成Web服务器到Eclipse.还帮我们自 ...
- Spring boot 2.0 学习
Spring boot 2.0出来了,支持java 9, 好多新特性,应该学习. 待续... ...
- 获取CPU ID ，disk ID, MAC ID (windows ARM linux Mac)
windows 命令行获取CPU ID,可以用ShellExecute wmic cpu get processorid ProcessorId BFEBFBFF000506E3 开源库: 查询CPU ...
- 编译portmap和nfs-utils
编译portmap和nfs-utils 为了在播放机上实现NFS服务器的功能,我们已经在uClibc中打开了完整RPC支持,并且在新编译的内核中打开了NFS服务器支持.此外还有两个软件包也是提供NFS ...
- centos6.5 下安装 sqlplus
1.下载下面的 rpm 文件 oracle-instantclient12.-basic--.x86_64.rpm oracle-instantclient12.-devel--.x86_64.rpm ...
- jsonp的使用方法
参数jsonp 和 jsonpCallback jsonp指定使用哪个名字将回调函数传给服务端,也就是在服务端通过 request.getParameter(""); 的那个名字, ...
- SetCapture到底是什么？
函数功能:该函数在属于当前线程的指定窗口里设置鼠标捕获.一旦窗口捕获了鼠标,所有鼠标输入都针对该窗口,无论光标是否在窗口的边界内.同一时刻只能有一个窗口捕获鼠标.如果鼠标光标在另一个线程创建的窗口上, ...
- MS SQL的CASE...WHEN...THEN...END语法
根据多个可能的答案检查一个值或变量. 举例说明: SELECT [type],CASE [type] WHEN 'TT' THEN 'TYPE_TABLE' WHEN 'FN' THEN 'SQL_S ...
- Find First and Last Position of Element in Sorted Array
问题:给定一个有序数组和一个目标值,输出目标值在数组中的起始位置和终止位置,如果目标值不在数组中,则输出[-1,-1] 示例: 输入:nums = [1,2,3,5,5,7] target = 5 输 ...