ionic CSS
注意这部分都是CSS
1.ionic 头部与底部
class="bar bar-header bar-light"
class="bar bar-header bar-stable"
class="bar bar-header bar-positive"
class="bar bar-header bar-calm"
class="bar bar-header bar-balanced"
class="bar bar-header bar-energized"
class="bar bar-header bar-assertive"
class="bar bar-header bar-royal"
class="bar bar-header bar-dark"
class="bar bar-subheader"
class="bar bar-footer bar-balanced"
2.ionic按钮
class="button button-light/stable/positive/calm/balanced/energized/assertive/royal/dark"
class="button button-block button-positive" // button-block 100%W
class="button button-full button-positive" // 不想block那么圆润
class="button button-small/large button-assertive"
class="button button-outline button-positive" // 线框按钮
class="button button-clear button-positive" // 透明无边框按钮
<button class="button icon-left ion-home">Home</button> // 带图标按钮
class="button-bar" // 按钮栏
class="button-bar bar-positive"
3.ionic列表
ionList ionItem,主要就是外层list,内层item
class="item item-divider" // 分栏标题
// a 首先是一个item 左右icon位置说明
<a class="item item-icon-left item-icon-right" href="#">
<i class="icon ion-chatbubble-working"></i> // 左icon
Call Ma
<i class="icon ion-ios-telephone-outline"></i> // 右icon
</a>
// 头像
<a class="item item-avatar" href="#">
<img src="http://www.runoob.com/try/demo_source/venkman.jpg">
<h2>Venkman</h2>
<p>Back off, man. I'm a scientist.</p>
</a>
// 缩略图
<a class="item item-thumbnail-left" href="#">
<img src="http://www.runoob.com/try/demo_source/blue-album.jpg">
<h2>Weezer</h2>
<p>Blue Album</p>
</a>
<div class="list list-inset"> // 内嵌列表
4.ionic卡片
class=”card”
class=”list card”
5.ionic表单和输入框
<div class="list">
<label class="item item-input">
<span class="input-label">用户名:</span>
<input type="text">
</label>
// 两个摞起来
<label class="item item-input item-stacked-label">
<span class="input-label">Last Name</span>
<input type="text" placeholder="Suhr">
</label>
// 搜索条
<div class="bar bar-header item-input-inset">
<label class="item-input-wrapper">
<i class="icon ion-ios-search placeholder-icon"></i>
<input type="search" placeholder="搜索">
</label>
<button class="button button-clear">
取消
</button>
</div>
6.ionic Toggle(切换开关)
// 不太懂 track 为什么有input?
<li class="item item-toggle">
HTML5
<label class="toggle toggle-positive">
<input type="checkbox" checked="">
<div class="track">
<div class="handle"></div>
</div>
</label>
</li>
7.ionic checkbox(复选框)
<li class="item item-checkbox">
<label class="checkbox">
<input type="checkbox">
</label>
Flux Capacitor
</li>
8.ionic 单选框
<label class="item item-radio">
<input type="radio" name="group" value="go" checked="checked">
<div class="item-content">
Go
</div>
<i class="radio-icon ion-checkmark"></i>
</label>
9.ionic Range
<div class="range">
<i class="icon ion-volume-low"></i>
<input type="range" name="volume">
<i class="icon ion-volume-high"></i>
</div>
<div class="item range range-positive">
<i class="icon ion-ios-sunny-outline"></i>
<input type="range" name="volume" min="0" max="100" value="12">
<i class="icon ion-ios-sunny"></i>
</div>
10.ionic select
<div class="item item-input item-select">
<div class="input-label">
Lightsaber
</div>
<select>
<option>Blue</option>
<option selected="">Green</option>
<option>Red</option>
</select>
</div>
11.ionic tab(选项卡)
<div class="tabs tabs-icon-top">
<a class="tab-item" href="#">
<i class="icon ion-home"></i>
主页
</a>
<a class="tab-item" href="#">
<i class="icon ion-star"></i>
收藏
</a>
<a class="tab-item" href="#">
<i class="icon ion-gear-a"></i>
设置
</a>
</div>
12.ionic 网格(Grid)
<div class="row">
<div class="col col-75">
<div>.col.col-75</div>
</div>
<div class="col">
<div>.col</div>
</div>
</div>
// 下面不太懂
响应式类 描述
.responsive-sm 小于手机横屏
.responsive-md 小于平板竖屏
.responsive-lg 小于平板横屏
13.ionic 颜色
dark/stable-dark/positive/calm/balanced/energized/assertive/royal
14.ionic icon(图标)
见本地下载项目
ionic JavaScript
1.ionic 上拉菜单(ActionSheet)
要点:页面正常触发方法,controller加载$ionicActionSheet,然后是固定写法:
var hideSheet = $ionicActionSheet.show({
buttons: [
{ text: '<b>Share</b> This' },
{ text: 'Move' }
],
destructiveText: 'Delete',
titleText: 'Modify your album',
cancelText: 'Cancel',
cancel: function() {
// add cancel code..
},
buttonClicked: function(index) {
return true;
}
});
$timeout(function() {
hideSheet();
}, 2000);
2.ionic 背景层
要点:页面正常触发,controller加载$ionicBackdrop,然后固定写法如下:
$scope.action = function() {
$ionicBackdrop.retain();
$timeout(function() { //默认让它1秒后消失
$ionicBackdrop.release();
}, 1000);
};
3.ionic 下拉刷新
要点:ion-content下写<ion-refresher pulling-text="下拉刷新" on-refresh="doRefresh()"></ion-refresher>
,controller做常规http请求方法更新数据。
4.ionic复选框
就是页面组件
<ion-checkbox ng-model="isChecked">复选框标签</ion-checkbox>
5.ionic单选框操作
页面组件 里面应该有item类,外边是list
<ion-radio ng-repeat="item in clientSideList"
ng-value="item.value"
ng-model="data.clientSide">
{{ item.text }}
</ion-radio>
6.ionic 切换开关操作
页面组件
<ion-toggle ng-repeat="item in settingsList"
ng-model="item.checked"
ng-checked="item.checked">
{{ item.text }}
</ion-toggle>
7.ionic手势事件
1.长按 on-hold
用法:button添加on-hold属性,赋值function。
2.单击 on-tap
用法:button添加on-tap属性,赋值function。
3.双击 on-double-tap
用法:button添加on-double-tap属性,赋值function。
4.触碰 on-touch
用法:button添加on-touch属性,赋值function。
5.抬手 on-release
用法:button添加on-release属性,赋值function。
6.拖拽 on-drag
用法:button添加on-drag属性,赋值function。
7.滑动 on-swipe on-swipe-up/right/down/left
8.ionicGestureon(eventType,callback,element)
off(eventType, callback, $element)
没看懂什么意思,不知道怎么用,也没搜到怎么用,碰到再说吧。
8.ionic头部和底部
<ion-header-bar>
</ion-header-bar>
<ion-content>
<ion-content>
<ion-footer-bar>
</ion-footer-bar>
9.ionic列表操作
页面组件,ionic定义的指令 ionList、ionItem
<ion-list>
<ion-item ng-repeat="item in items">
Hello, {{item}}!
</ion-item>
</ion-list>
10.ionic加载动作 静默读黑条
用法:加载$ionicLoading, show方法,hide方法。
.controller('LoadingCtrl', function($scope, $ionicLoading) {
$scope.show = function() {
$ionicLoading.show({
template: 'Loading...指示器的html内容'
});
};
$scope.hide = function(){
$ionicLoading.hide();
};
});
11.ionic模态窗口
用法:先写好模态框,如下:
<script id="my-modal.html" type="text/ng-template">
<ion-modal-view>
<ion-header-bar>
<h1 class="title">My Modal title</h1>
</ion-header-bar>
<ion-content>
Hello!
</ion-content>
</ion-modal-view>
</script>
再controller注入$ionicModal, 建模,连接scope。
.controller('MyController', function($scope, $ionicModal) {
$ionicModal.fromTemplateUrl('my-modal.html', {
scope: $scope,
animation: 'slide-in-up'
}).then(function(modal) {
$scope.modal = modal;
});
});
最后主页面触发,buttton ng-click=”modal.show()” / ng-click=”modal.hide()”
12.ionic导航 ->重点查看
说的就是ionic自己的页面导航系统
<ion-nav-bar></ion-nav-bar>
<ion-nav-view class="slide-left-right">
<ion-view title="我的页面">
<ion-content>
你好!
</ion-content>
</ion-view>
</ion-nav-view>
设置最大允许缓存的视图数量
全局禁用缓存
$ionicConfigProvider.views.maxCache(0);
ion-nav-view
ion-view
ion-nav-bar
ion-nav-buttons
ion-nav-back-button
nav-clear
nav-transition
nav-direction
ionicNavBarDelegate
ionicHistory
13.ionic平台 还是不太懂
ionicPlatform
ionicPlatform 用来检测当前的平台,以及诸如在PhoneGap/Cordova中覆盖Android后退按钮。
onHardwareBackButton(callback)
14.ionic浮动框
用法:跟模态窗口类型
<button ng-click="openPopover($event)">打开浮动框</button>
<script id="my-popover.html" type="text/ng-template">
<ion-popover-view>
<ion-header-bar>
<h1 class="title">我的浮动框标题</h1>
</ion-header-bar>
<ion-content>
Hello!
</ion-content>
</ion-popover-view>
</script>
.controller( 'AppCtrl',['$scope','$ionicPopover',...
// .fromTemplateUrl() 方法
$ionicPopover.fromTemplateUrl('my-popover.html', {
scope: $scope
}).then(function(popover) {
$scope.popover = popover;
});
15.ionic对话框
用法:也是一样,页面btn触发,js代码格式如下:
注入$ionicPopup
.controller('PopupCtrl',function($scope, $ionicPopup, $timeout) {
// Triggered on a button click, or some other target
$scope.showPopup = function() {
$scope.data = {}
// 自定义弹窗
var myPopup = $ionicPopup.show({
template: '<input type="password" ng-model="data.wifi">',
title: 'Enter Wi-Fi Password',
subTitle: 'Please use normal things',
scope: $scope,
buttons: [
{ text: 'Cancel' },
{
text: '<b>Save</b>',
type: 'button-positive',
onTap: function(e) {
if (!$scope.data.wifi) {
// 不允许用户关闭,除非输入 wifi 密码
e.preventDefault();
} else {
return $scope.data.wifi;
}
}
},
]
});
myPopup.then(function(res) {
console.log('Tapped!', res);
});
$timeout(function() {
myPopup.close(); // 3秒后关闭弹窗
}, 3000);
};
// confirm 对话框
$scope.showConfirm = function() {
var confirmPopup = $ionicPopup.confirm({
title: 'Consume Ice Cream',
template: 'Are you sure you want to eat this ice cream?'
});
confirmPopup.then(function(res) {
if(res) {
console.log('You are sure');
} else {
console.log('You are not sure');
}
});
};
// alert(警告) 对话框
$scope.showAlert = function() {
var alertPopup = $ionicPopup.alert({
title: 'Don\'t eat that!',
template: 'It might taste good'
});
alertPopup.then(function(res) {
console.log('Thank you for not eating my delicious ice cream cone');
});
};
});
16.ionic滚动条
页面组件
<ion-scroll zooming="true" direction="xy" style="width: 500px; height: 500px">
</ion-scroll>
上拉加载
<ion-infinite-scroll
on-infinite="loadMore()"
distance="1%">
</ion-infinite-scroll>
$ionicScrollDelegate
该方法直接被$ionicScrollDelegate服务触发,来控制所有滚动视图。用 $getByHandle方法控制特定的滚动视图。
$scope.scrollTop = function() {
$ionicScrollDelegate.scrollTop();
};
resize()
scrollBottom([shouldAnimate])
17.ionic侧栏菜单
用法:配置路由, 搭建menu框架,主要就是页面组件。
<ion-side-menus>
<!-- 菜单统领的程序主界面 -->
<ion-side-menu-content>
<!-- 注释掉 菜单按钮将无效 -->
<ion-nav-bar class="bar-stable nav-title-slide-ios7">
</ion-nav-bar>
<!-- 这里是主界面入口 -->
<ion-nav-view name="menuContent" animation="slide-right-left"></ion-nav-view>
</ion-side-menu-content>
<!-- 下面是菜单内容 -->
<ion-side-menu side="right">
<!-- 菜单标题 -->
<header class="bar bar-header bar-stable">
<h1 class="title">明星台菜单</h1>
</header>
<!-- 菜单项目 -->
<ion-content class="has-header">
<ion-list>
<ion-item nav-clear menu-close href="#">
我的账户
</ion-item>
<ion-item nav-clear menu-close href="#">
余额宝
</ion-item>
<ion-item nav-clear menu-close href="#">
联系我们
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
18.ionic滑动框
页面组件
<ion-slide-box
active-slide="myActiveSlide"
does-continue="true"
auto-play="true"
slide-interval="2000"
show-pager="true">
<!-- does-continue:循环滚动开关
auto-play:自动滚动开关
slide-interval:多少毫秒滚动一次
show-pager:分页显示开关 -->
<ion-slide>
<!-- <div class="box blue"><h1>BLUE</h1></div> -->
<img ng-src="img/Sufei.png" alt="" width="100%" height="200">
</ion-slide>
<ion-slide>
<!-- <div class="box yellow"><h1>YELLOW</h1></div> -->
<img ng-src="img/Scarlett.png" alt="" width="100%" height="200">
</ion-slide>
<ion-slide>
<!-- <div class="box pink"><h1>PINK</h1></div> -->
<img ng-src="img/TaylorSwift.png" alt="" width="100%" height="200">
</ion-slide>
</ion-slide-box>
19.ionic加载动画
页面组件
<div align="center">
<ion-spinner icon="android"></ion-spinner>
<ion-spinner icon="ios"></ion-spinner>
<ion-spinner icon="ios-small"></ion-spinner>
<ion-spinner icon="bubbles" class="spinner-balanced"></ion-spinner>
<ion-spinner icon="circles" class="spinner-energized"></ion-spinner>
<br>
<ion-spinner icon="crescent" class="spinner-royal"></ion-spinner>
<ion-spinner icon="dots" class="spinner-dark"></ion-spinner>
<ion-spinner icon="lines" class="spinner-calm"></ion-spinner>
<ion-spinner icon="ripple" class="spinner-assertive"></ion-spinner>
<ion-spinner icon="spiral"></ion-spinner>
</div>
20.ionic选项卡栏操作
页面组件
<ion-tabs class="tabs-positive tabs-icon-only">
<ion-tab title="首页" icon-on="ion-ios7-filing" icon-off="ion-ios7-filing-outline">
<!-- 标签 1 内容 -->
</ion-tab>
<ion-tab title="关于" icon-on="ion-ios7-clock" icon-off="ion-ios7-clock-outline">
<!-- 标签 2 内容 -->
</ion-tab>
<ion-tab title="设置" icon-on="ion-ios7-gear" icon-off="ion-ios7-gear-outline">
<!-- 标签 3 内容 -->
</ion-tab>
</ion-tabs>
The End