Ionic学习笔记3_ionic指令简单布局
2016-04-13 19:31
597 查看
1) 添加引用类库(ionic样式和ionic js文件)
2) 标题栏，页脚栏，内容区
3) Js引入ionic类库，添加页面操作方法和对象
4) 数据初始化
5) Html页面绑定方法和对象
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">
<link href="http://code.ionicframework.com/nightly/css/ionic.min.css" rel="stylesheet">
<script src="http://code.ionicframework.com/nightly/js/ionic.bundle.min.js"></script>
</head>
<body ng-controller="myCtrl">
<ion-header-bar align-title="center" class="bar-positive"> 1. 标题栏
<div class="buttons">
<button class="button">Left Button</button>
</div>
<h1 class="title">ion-header-bar</h1>
<a class="button button-clear icon ion-cloud"></a>
</ion-header-bar>
<ion-content class="has-header" overflow-scroll="true"> 3. 内容区
<!--Form对象 -->
<div class='list card' ng-controller="contr-2">
<h3> 控制器</h3>
<label class="item item-input">
<span class="input-label">First Name：</span>
<input type="text" ng-model="firstName" placeholder="First Name">
</label>
<label class="item item-input">
<span class="input-label">Last Name：</span>
<input type="text" ng-model="lastName" placeholder="Last Name">
</label>
<label class="item"> Full Name : <span ng-bind="firstName + ',' + lastName"></span></label>
<button class="button button-calm button-block" ng-click="hello()">button-light</button>
</div>
<!--列表对象 -->
<ul class="list card" ng-init="number=[1,2,2,3,4]" >
<li class="item" ng-repeat="x in number track by $index"> 遍历重复集合
<span ng-bind="$index"></span> : {{x}} 索引号
</li>
</ul>
<ul class="list">
<li class="item" ng-repeat="item in items">
<span ng-bind="$index"></span> :{{item}}
</li>
</ul>
</ion-content>
<ion-footer-bar align-title="left" class="dark-bg"> 2. 页脚栏
<div class="buttons"> 按钮
<button class="button" ng-click="doSomething()">Left Button</button>
</div>
<h1 class="title light">ion-footer-bar</h1> 标题
<div class="button-bar"> 工具组
<a class="button button-clear icon ion-ios-loop" ></a>
</div>
</ion-footer-bar>
</body>
<script>
angular.module("myApp",["ionic"])
.controller("contr-2",function($scope){
$scope.firstName = 'zhang';
$scope.lastName = 'san';
$scope.hello = function () {
alert("hello!");
};
})
.controller("myCtrl",function($scope){ 添加控制器
$scope.items = []; 数据初始化
for(var i=0;i<20;i++)
$scope.items.push("line " + i);
$scope.doSomething = function () { 添加方法
console.log("doSomething。。。");
};
});
</script>
</html>
1.4.1. ionic 头部和底部
ion-header-bar 如果给它加上'bar-subheader' 这个样式，它就是副标题
align-title 对齐如果没有设置，它将会按照手机的默认排版(Ios的默认是居中，Android默认是居左)。它的值可以是 'left','center','right'。
no-tap-scroll 设置 header-bar 是否跟随着内容的滚动而滚动，就是是否固定在顶部。它的值是布尔值（true/false）
ion-footer-bar
align-title 如果没有设置，它将会按照手机的默认排版(Ios的默认是居中，Android默认是居左)。它的值可以是 'left','center','right'。
与 ion-header-bar 不同的是，ion-footer-bar 只有 align-title 这个 API。
ion-content
指令定义内容区域. overflow-scroll="true" 使用系统内置的滚动条
1.4.2. 表单输入 ion-checkbox ion-radio ion-spinner
<body ng-controller="myCtrl">
<div class="list card">
<div class="item item-divider"> 当前支付方式: {{ data.pay }} </div>
<ion-radio ng-repeat="item in payList" ng-value="item.value" ng-model="data.pay">
{{ item.text }}
</ion-radio>
<div class="item item-divider">pay : {{ data.pay }}</div>
<ion-radio ng-repeat="item in payList" ng-value="item.value" ng-model="data.pay" ng-change="payChange(item)" name="pay">
{{ item.text }}
</ion-radio>
<div class="item item-divider"> pay: {{ data.pay }} <br> mycity: {{ mycity }}<br>
<select ng-model="data.pay" ng-options="pay.value as pay.text for pay in payList" ng-change="payChange(data)"></select>
<select ng-model="mycity.value" ng-options="city.value as city.name group by city.group for city in Cities"
ng-change="cityChange(mycity)"></select>注意绑定值，传递参数
</div>
</div>
<!--绑定json列表数据的text和checked-->
<div class="list card"> <!--选中颜色 -->
<ion-checkbox class="checkbox-dark" ng-repeat="item in devList" ng-model="item.checked" ng-checked="item.checked">
{{ item.text }}: {{item. checked }}
</ion-checkbox>
<ion-toggle ng-repeat="item in devList" ng-model="item.checked" ng-checked="item.checked">
{{ item.text }}
</ion-toggle>
</div>
<!--绑定json对象数据的checked 数据改变事件-->
<ion-checkbox ng-model="pushNotification.checked" ng-change="pushNotificationChange()">Push Notifications</ion-checkbox>
<ion-toggle ng-model="pushNotification.checked" ng-change="pushNotificationChange()">Push Notifications</ion-toggle>
<!--绑定 判断是否选中-->
<ion-checkbox ng-model="emailNotification" ng-true-value="Subscribed" ng-false-value="Unubscribed"> Newsletter</ion-checkbox>
<ion-toggle ng-model="emailNotification" ng-true-value="Subscribed" ng-false-value="Unubscribed" toggle-class="toggle-assertive" >
Newsletter </ion-toggle>
<!--查看json对象-->
<div class="item">
<pre ng-bind="devList | json"></pre> <pre ng-bind="pushNotification | json"></pre> <pre ng-bind="emailNotification | json"></pre>
</div>
<div class="list">
<div class="item item-divider"> 当前支付方式: {{ data.pay }} pay : {{ data.pay }} </div>
<ion-radio ng-repeat="item in payList" ng-value="item.value" ng-model="data.pay"> {{ item.text }} </ion-radio>
<ion-radio ng-repeat="item in payList" ng-value="item.value" ng-model="data.pay" ng-change="payChange(item)" name="pay">
{{ item.text }}
</ion-radio>
</div>
</div>
</body>
</html>
<script>
angular.module("myApp",["ionic"])
.controller('myCtrl', function ($scope) {
$scope.mycity = { id: 1, name: '北京',value: 'beijng', group: '中国' };
$scope.Cities = [{ id: 1, name: '北京',value: 'beijng', group: '中国' },
{ id: 2, name: '上海',value: 'shanghai', group: '中国' },{ id: 3, name: '广州',value: 'guangzhou', group: '中国' }];
$scope.cityChange = function(item) {console.log("item", item); };
$scope.payList = [{ text: "albaba alipay", value: "alipay" },{ text: "ebay paypal", value: "paypal" } ];
$scope.data = { pay: 'alipay'};
$scope.payChange = function(item) { console.log("pay:", item.pay); };
/////////////////////////////////////////
$scope.devList = [{ text: "HTML5", checked: true},{ text: "CSS3", checked: false},{ text: "JavaScript", checked: false}];
$scope.pushNotification = { checked: true};
$scope.emailNotification = 'Subscribed';
$scope.pushNotificationChange = function () { console.log('Push Notification Change', $scope.pushNotification.checked); };
});
</script>
1.4.2.1. 复选按钮 : ion-checkbox 开关按钮ion-toggle
支持数据绑定。使用可选的ng-model属性，
绑定：可直接绑定列表对象，根据item对象是否选中；可直接绑定对象属性true；可绑定对象的文本是否为指定的值。
事件：ng-change 对象选中值改变
1.4.2.2. 单选按钮 : ion-radio
使用可选的ng-model属性，实现与作用域变量的数据绑定
使用可选的ng-value属性，可以使用作用域变量设置单选按钮对应的值
list列表json对象中选中单个json, ng-change 对象选中值改变 传入 item
1.4.2.3. 下拉选择 : select
使用可选的ng-model属性，实现与作用域变量的数据绑定
<select ng-model="mycity.value" ng-options="city.value as city.name group by city.group for city in Cities"
ng-change="cityChange(mycity)"></select>
ng-model为实际选中的值mycity，ng-options对列表对象或hashmap轮询，分组。处理好显示信息和实际值 ，
ng-change 对象选中值改变 传入 item
1.4.2.4. 等待指示器 : ion-spinner
<ion-item ng-repeat="item in items" >
<ion-spinner icon="{{item}}"></ion-spinner>
</ion-item>
$scope.items = ["android","ios","ios-small","bubbles","circles","crescent","dots","lines","ripples","spiral"];
1.4.3. ionic 手势事件
1.4.3.1. on-hold长按的时间是500毫秒
<button on-hold="onHold()" class="button"> Test</button>
1.4.3.2. on-tap
这个是手势轻击事件，如果长按时间超过250毫秒，那就不是轻击了。。
<button on-tap="onTap()" class="button"> Test </button>
1.4.3.3. on-double-tap手双击屏幕事件
<button on-double-tap="onDoubleTap()"class="button"> Test</button>
1.4.3.4. on-touch
这个和 on-tap 还是有区别的，这个是立即执行，而且是用户点击立马执行。不用等待 touchend/mouseup 。
<button on-touch="onTouch()" class="button"> Test </button>
1.4.3.5. on-release
当用户结束触摸事件时触发。
<button on-release="onRelease()" class="button"> Test</button>
1.4.3.6. on-drag
这个有点类似于PC端的拖拽。当你一直点击某个物体，并且手开始移动，都会触发 on-drag。
<button on-drag="onDrag()"class="button"> Test</button>
1.4.3.7. on-drag-up 向上拖拽
<button on-drag-up="onDragUp()" class="button"> Test</button>
1.4.3.8. on-drag-right向右拖拽。
<button on-drag-right="onDragRight()" class="button"> Test</button>
1.4.3.9. on-drag-down 向下拖拽
<button on-drag-down="onDragDown()" class="button">Test</button>
1.4.3.10. on-drag-left 向左边拖拽
<button on-drag-left="onDragLeft()" class="button">Test</button>
1.4.3.11. on-swipe 指手指滑动效果
可以是任何方向上的。而且也和 on-drag 类似，都有四个方向上单独的事件。
<button on-swipe="onSwipe()" class="button"> Test</button>
1.4.3.12. on-swipe-up 向上的手指滑动效果。
<button on-swipe-up="onSwipeUp()" class="button"> Test</button>
1.4.3.13. on-swipe-right 向右的手指滑动效果。
<button on-swipe-right="onSwipeRight()" class="button"> Test</button>
1.4.3.14. on-swipe-down 向下的手指滑动效果。
<button on-swipe-down="onSwipeDown()" class="button"> Test</button>
1.4.3.15. on-swipe-left 向左的手指滑动效果
<button on-swipe-left="onSwipeLeft()" class="button"> Test</button>
1.4.3.16. $ionicGesture
一个angular服务展示ionicionic.EventController手势。
on(eventType, callback, $element) 在一个元素上添加一个事件监听器。
eventType string 监听的手势事件。
callback function(e) 当手势事件发生时触发的事件。
$element element angular元素监听的事件。
options object 对象。
off(eventType, callback, $element) 在一个元素上移除一个手势事件监听器。
eventType string 移除监听的手势事件。
callback function(e) 移除监听器。
$element element 被监听事件的angular元素。
1.4.4. ionic 列表操作以及高性能的ng-repeat
<ion-header-bar class="bar-positive"> 通过ng-click修改变量，进而控制按钮是否显示
<a class="button button-clear icon ion-ios-minus-outline" ng-click="flag.showDelete=!flag.showDelete;flag.showReorder=false;"></a>
<h1 class="title">成员按钮</h1>
<a class="button" ng-click="flag.showReorder=!flag.showReorder;flag.showDelete=false;">重新排序</a>
</ion-header-bar>
<ion-list can-swipe="true" show-delete="flag.showDelete" show-reorder="flag.showReorder">
<ion-item ng-repeat="item in items">
{{item}}
<ion-option-button class="button-calm icon ion-edit"></ion-option-button>
<ion-option-button class="button-energized icon ion-share"></ion-option-button>
<ion-delete-button class="ion-minus-circled" ng-click="delete_item(item)"></ion-delete-button> item为传入对象
<ion-reorder-button class="ion-navicon" on-reorder="move_item(item,$fromIndex,$toIndex)"></ion-reorder-button>
</ion-item>
</ion-list>
<script>
angular.module("myApp",["ionic"])
.controller("myCtrl",function($scope){
$scope.flag={showDelete:false,showReorder:false};
$scope.items=["Chinese","English","German","Italian","Janapese","Sweden","Koeran","Russian","French"];
$scope.delete_item=function(item){
var idx = $scope.items.indexOf(item);
$scope.items.splice(idx,1);
};
$scope.move_item = function(item, fromIndex, toIndex) {
$scope.items.splice(fromIndex, 1);
$scope.items.splice(toIndex, 0, item);
};
$scope.close = function(){
$ionicListDelegate.closeOptionButtons();
};
});
1). ion-list ion-item
show-delete - 是否显示成员内的delete按钮
show-reorder - 是否显示成员内的reorder按钮
can-swipe - 是否支持滑动方式显示成员option按钮
2). ion-list ion-item 成员
ion-option-button - 选项按钮
ng-click指令来挂接点击事件监听函数 var optionListener = function(item){...}
ion-delete-button - 删除按钮 var deleteListener = function(item){...}
ion-reorder-button - 重排按钮 var reorderListener = function(item,$fromIndex,$toIndex){...}
3). collection-repeat : 高性能的ng-repeat
<ion-list>
<ion-item collection-repeat="item in items">
{{item}}
<ion-option-button class="button-positive">...</ion-option-button>
</ion-item>
</ion-list>
collection-repeat指令比ng-repeat更适用于大数据量 的列表数据，它只将处于可视区域的数据渲染到DOM上。
collection-repeat指令接受一个枚举表达式，同时可以附加以下的属性：
item-width - 可选。声明重复元素的宽度
item-height - 可选。声明重复元素的高度
item-render-buffer - 可选。需要载入渲染缓冲区的可视数据前后的数量。默认为3
force-refresh-images - 可选。滚动时是否强制刷新图像。允许值：true | false
4). 脚本接口 : $ionicListDelegate
showReorder([showReorder]) - 显示/关闭排序按钮
showReorder的允许值为：true | false。可以使用一个作用域上的表达式
showDelete([showDelete]) - 显示/关闭删除按钮
showDelete的允许值为： true | false。可以使用一个作用域上的表达式
canSwipeItems([canSwipeItems]) - 是否允许通过滑动方式来显示成员选项按钮
canSwipeItems的允许值为：true | false。可以使用一个作用域上的表达式
closeOptionButtons() - 关闭所有选项按钮
1.4.5. ionic 选项卡栏操作
1.4.5.1. ion-tabs简介，设置，标题文字、图标和徽章显示隐藏
<ion-tabs class="tabs-positive tabs-striped"> tabs-top tabs-dark tabs-icon-only位置和条带风格
<ion-tab title="tab1">
<ion-view> ……
</ion-tab> //图标 icon-on和icon-off - 选中未选中状态图标 微章内容及样式
<ion-tab title=" tab2" icon-on="ion-ios-clock" icon-off="ion-ios-clock-outline" badge="12" badge-style="badge-assertive">
<ion-nav-view name="tab-tab2"></ion-nav-view> 在name 放tab-tab2
</ion-tab>
<ion-tab title="tab3" disabled="true"> // disabled - 禁止，hidden - 隐藏
<ion-view>
<ion-content class="energized-bg">
tab 3 content
</ion-content>
</ion-view>
</ion-tab>
</ion-tabs>
1.4.5.2. ion-tabs 事件和 $ionicTabsDelegate
事件：on-select ，on-deselect ，ng-click
$ionicTabsDelegate服务：select(index)，selectedIndex()
<ion-tab title="tab3" on-select="on_select(3)">
<ion-view>
<ion-content class="energized-bg">
tab 3 content
</ion-content>
</ion-view>
</ion-tab>
<script>
angular.module("ezApp",["ionic"])
.controller("ezCtrl",function($scope){
$scope.title="ion-tab : events";
$scope.on_select = function(idx){
$scope.title = ["ion-tab ",idx," selected!"].join("");
}
})
.controller("ezCtrl",function($scope,$ionicTabsDelegate,$interval){
var idx=0;
$interval(function(){ // interval 定时刷新
idx = (idx + 1) % 3;
console.log(idx);
$ionicTabsDelegate.select(idx); // select(index) - 选中指定的选项页
},2000);
});
</script>
1.4.5.3. ion-tabs路由详解
ionic中结合tab状态嵌套
app.config(function($stateProvider,$urlRouterProvider) {
$stateProvider
.state('tab', {
url: "/tab",
abstract:true,
templateUrl: "tabs.html"
})
.state('tab.tab1', { 1).使用“点标记法”
url: '/tab1',
views:{
'tab-tab1':{
templateUrl: "tab-tab1.html",
controller:'tab1Controller'
}
}
})
.state('tab2', {
parent: 'tab', 2).使用parent属性，指定一个父状态的名称字符串
url: '/tab2',
views:{
'tab-tab2':{
templateUrl: "tab-tab2.html",
controller:'tab2Controller'
}
}
})
.state(tab.tab3, {
url: '/tab3',
views:{ 定义ion-nav-view并且加上name属性<ion-nav-view name="tab-tab2"></ion-nav-view>
'tab-tab3':{ 定义view 并对应 ion-nav-view 中的name属性
templateUrl: "tab-tab3.html",
controller:'tab3Controller'
}
}
})
$urlRouterProvider.otherwise('/tab/tab1');
})
3).使用parent属性，指定一个父状态对象
var contacts = { name: 'contacts', templateUrl: 'contacts.html' }
var contactsList = { name: 'list', parent: contacts, //mandatory templateUrl: 'contacts.list.html' }
states 抽象状态abstract
一个抽象的状态可以有子状态但不能显式激活，它将被隐性激活当其子状态被激活时。
两个最常用的抽象状态的示例：
•为所有子状态预提供一个基url
•在父状态中设置template属性，子状态对应的模板将插入到父状态模板中的ui-view(s)中
<!--主页面导航框架：导航栏和回退按钮，导航视图-->
<ion-nav-bar class="bar-positive">
<ion-nav-back-button></ion-nav-back-button>
</ion-nav-bar><!-- -->
<ion-nav-view></ion-nav-view>
<!--导航页面 -->
<script id="tabs.html" type="text/ng-template">
<ion-header-bar class="bar-positive">
<h1 class="title"> ion-tabs</h1>
</ion-header-bar>
<ion-tabs class="tabs-icon-top tabs-positive">
<ion-tab title="tab1" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/tab/tab1">
<ion-nav-view name="tab-tab1"></ion-nav-view>
</ion-tab>
<ion-tab title="tab2" icon-off="ion-ios-chatboxes-outline" icon-on="ion-ios-chatboxes"
badge="12" badge-style="badge-assertive" href="#/tab/tab2">
<ion-nav-view name="tab-tab2"></ion-nav-view>
</ion-tab>
<ion-tab title="tab3" icon-off="ion-ios-gear-outline" icon-on="ion-ios-gear" href="#/tab/tab3">
<ion-nav-view name="tab-tab3"></ion-nav-view>
</ion-tab>
<ion-tab title="Home1" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline">
<ion-view>
<ion-header-bar class="bar-positive"> 为什么不起作用？
<h1 class="title">home tab</h1>
</ion-header-bar>
<ion-content>
<p>home content</p>
</ion-content>
</ion-view>
</ion-tab>
</ion-tabs>
</script>
<!—应用页面 -->
<script id="tab-tab1.html" type="text/ng-template"> 应用页面放在ion-view 里遵循它的特点，title 和buttons放在
<ion-view view-title="Tab1">
<ion-nav-buttons side="right">
<button class="button" ng-click="doSomething()"> register </button>
</ion-nav-buttons>
<ion-content>
Tab1 {{title}}
<!—三级页面 -->
<a class="button" href="#/tab/content1/10">跳转到内容</a>
<a class="button" href="#/news">news跳转到内容</a>
</ion-content>
</ion-view>
</script>
<script>
var app = angular.module('myApp', ['ionic']);
app.config(function($stateProvider,$urlRouterProvider) {
$stateProvider
.state('tab', {
url: "/tab",
abstract:true,
templateUrl: "tabs.html"
})
.state('tab.tab1', {
url: '/tab1',
views:{
'tab-tab1':{
templateUrl: "tab-tab1.html",
controller:'tab1Controller'
}
}
})
.state('tab2', {
parent: 'tab',
url: '/tab2',
views:{
'tab-tab2':{
templateUrl: "tab-tab2.html",
controller:'tab2Controller'
}
}
})
.state('tab.content1', { tab.content1状态的页面放在ion-nav-view的name属性为tab-tab1 里
url: '/content1/:id',
views:{
'tab-tab1':{
templateUrl: "tab-content1.html",
controller:'content1Controller'
}
}
})
.state('news', { 只能放在最外面的ion-nav-view里
url: '/news',
templateUrl: "news.html"
})
$urlRouterProvider.otherwise('/tab/tab1');
})
.controller('tab2Controller', function($scope) {
$scope.title='tab2Controller';
})
.controller('content1Controller', function($scope,$stateParams) {
$scope.title='content1Controller';
console.log($stateParams);
});
</script>
1.4.6. 侧边栏ion-side-menus
<body ng-app="ionic" >
<ion-side-menus> 侧边栏菜单
<ion-side-menu-content drag-content="true" edge-drag-threshold=50 class="calm-bg"> 主区域容器
<ion-header-bar class="bar-dark">
<!--切换左侧栏显示状态-->
<a menu-toggle="left" class="button icon ion-navicon"></a>
<h1 class="title">ion-side-menu-content</h1>
</ion-header-bar>
<ion-content class="positive-bg">
menu-close指令关闭侧栏内容
<a menu-close="" class="button icon ion-navicon"></a>
</ion-content>
</ion-side-menu-content>
侧边栏区域容器
<ion-side-menu side="left" width="150" expose-aside-when="(min-width:300px) " class="balanced-bg">
左侧区域
</ion-side-menu>
<ion-side-menu side="right" width="150" class="dark-bg">
右侧区域
</ion-side-menu>
</ion-side-menus>
</body>
1).侧边栏菜单 : ion-side-menus
2).侧边栏打开关闭 切换指令 : menu-toggle/menu-close
3).主区域容器ion-side-menu-content 属性设置
drag-content - 是否允许拖动内容打开侧栏菜单
edge-drag-threshold -启用边距检测,正数，当拖动发生在距离边界小于这个数,触发侧栏显示。为true时，使用默认的25px作为边距阈值。为false或0，则意味着禁止边距检测，可在内容区域的任何地方拖动来打开侧栏
4).侧边栏区域容器 : ion-side-menu
width - 侧边栏的宽度 width属性是可选的，表示以像素为单位的侧栏菜单宽度。默认为275px
is-enabled - 是否可用
expose-aside-when - 侧边栏自动显示条件表达式
默认情况下，侧边栏是隐藏的，需要用户向左或向右拖动内容，或者通过一个切换按钮来打开。 但是在有些场景下（比如，横放的平板）屏幕宽度足够大，这时，自动地显示侧边栏内容会更 合理。
expose-aside-when属性就是处理这种情况的，和CSS3的@meida类似，expose-aside-when需要 一个CSS表达式，例如：expose-aside-when="(min-width:500px)"，这意味着当屏幕宽度大于 500px时将自动显示侧栏菜单。
ionic为expose-aside-when提供了一个快捷选项：large ， 这等同于 (min-width:768px)。
5).脚本中控制侧边栏菜单接口 : $ionicSideMenuDelegate
<ion-header-bar class="bar-positive">
<a class="button" ng-click="toggle1();">切换</a>
</ion-header-bar>
<script>
angular.module("myApp",["ionic"])
.controller("myCtrl",function($scope,$ionicSideMenuDelegate){
$scope.toggle1 = function(){
$ionicSideMenuDelegate.toggleLeft();
};
});
</script>
getOpenRatio() - 侧栏菜单打开的宽度占其总宽度比例
canDragContent([canDrag]) - 是否允许拖拽内容以打开侧栏菜单
edgeDragThreshold(value) - 设置边框距离阈值
6).ion-tap结合 ion-side-menus一起使用
<ion-side-menus>
<ion-side-menu-content class="calm-bg">
<ion-nav-bar class="bar-positive">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<ion-tabs class="tabs-icon-top tabs-positive">
<!-- Dashboard Tab -->
<ion-tab title="tab1" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/tab/tab1">
<ion-nav-view name="tab-tab1"></ion-nav-view>
</ion-tab>
<!-- Chats Tab -->
<ion-tab title="tab2" icon-off="ion-ios-chatboxes-outline" icon-on="ion-ios-chatboxes" href="#/tab/tab2">
<ion-nav-view name="tab-tab2"></ion-nav-view>
</ion-tab>
<!-- Account Tab -->
<ion-tab title="tab3" icon-off="ion-ios-gear-outline" icon-on="ion-ios-gear" href="#/tab/tab3">
<ion-nav-view name="tab-tab3"></ion-nav-view>
</ion-tab>
</ion-tabs>
</ion-side-menu-content>
<ion-side-menu side="left" width="150" class="balanced-bg">
左侧区域
</ion-side-menu>
<ion-side-menu side="right" width="150" class="dark-bg">
右侧区域
</ion-side-menu>
</ion-side-menus>
1.4.7. 幻灯指令 ion-slide-box
1.4.7.1. 幻灯片 : ion-slide-box指令介绍
1.4.7.2. ion-slide-box : 属性设置定制播放行为
1.4.7.3. ion-slide-box : 事件及变量
1.4.7.4. 脚本接口: $ionicSlideBoxDelegate
<ion-slide-box on-slide-changed="slideChanged(index)">
<ion-slide>
<h3>Thank you for choosing the Awesome App!</h3>
<div id="logo"><img src="http://code.ionicframework.com/assets/img/app_icon.png"></div>
<p> We've worked super hard to make you happy.</p>
<p> But if you are angry, too bad. </p>
</ion-slide>
<ion-slide>
<h3>Using Awesome</h3>
<div id="list">
<h5>Just three steps:</h5>
<ol>
<li>Be awesome</li>
<li>Stay awesome</li>
<li>There is no step 3</li>
</ol>
</div>
</ion-slide>
<ion-slide>
<h3>Any questions?</h3>
<p> Too bad! </p>
</ion-slide>
<ion-slide>
<h3>Any questions?</h3>
<p> 这是第四个 </p>
</ion-slide>
</ion-slide-box>
1.5. ionic指令复杂布局
1.5.1. ion-scroll滚动框
<ion-scroll class="has-header" zooming="true" direction="xy" style="width: 500px; height: 500px">
<div style="width: 5000px; height: 5000px; background: url('img/map.jpg') repeat"></div>
</ion-scroll>
5. 滚动框 : ion-scroll
1.5.2. 下拉更新数据 : ion-refresher
<body ng-controller="firstCtrl">
<ion-content class="has-header">
<ion-refresher pulling-text="Pull to refresh..." on-refresh="doRefresh()" spinner="android"></ion-refresher>
<ul class="list">
<li class="item" ng-repeat="item in items">{{item}}</li>
</ul>
</ion-content>
<script>
angular.module("myApp",["ionic"])
.controller("firstCtrl",function($scope){
//$scope.items=[];
//for(var i=0;i<50;i++)
// $scope.items.push(["this is line ",i].join(""));
$scope.items = ['item1','item2','item3'];
var base = 1;
$scope.doRefresh = function() {
for(var i=0;i<10;i++,base++)
$scope.items.unshift(["item ",base].join(""));
$scope.$broadcast("scroll.refreshComplete"); // Stop the ion-refresher from spinning
};
});
</script>
</body>
1.5.3. 上拉更新数据 : ion-infinite-scroll
<body ng-controller="firstCtrl">
<ion-content class="has-header">
<ion-infinite-scroll on-infinite="load_more();" icon="ion-load-a" distance="1%" immediate-check="true"></ion-infinite-scroll>
<ul class="list">
<li class="item" ng-repeat="item in items">{{item}}</li>
</ul>
</ion-content>
<script>
angular.module("myApp",["ionic"])
.controller("firstCtrl",function($scope,$timeout){
$scope.items = ['1111','22222'];
var base = 0;
$scope.load_more = function(){
$timeout(function(){
for(var i=0;i<3;i++,base++)
$scope.items.push(["item ",base].join(""));
$scope.$broadcast("scroll.infiniteScrollComplete");
},500);
};
});
</script>
1.5.4. 脚本接口 : $ionicScrollDelegate
<ion-footer-bar class="bar-positive">
<a class="button" ng-click="gotop();">GO TOP!</a>
<a class="button" ng-click="gobottom();">GO BOTTOM!</a>
<a class="button" ng-click="getScrollPosition();">ScrollPosition</a>
</ion-footer-bar>
</body>
</html>
<script>
angular.module("myApp",["ionic"])
.controller("firstCtrl",["$scope","$ionicScrollDelegate",function($scope,$ionicScollDelegate){
$scope.items = [];
for(var i=0;i<100;i++)
$scope.items.push(["item ",i+1].join(""));
$scope.gotop = function(){
$ionicScollDelegate.scrollTop(true);
}
$scope.gobottom = function(){
$ionicScollDelegate.scrollBottom(true);
}
$scope.getScrollPosition = function(){
console.log($ionicScollDelegate.getScrollPosition());
}
}]);
</script>
1.5.5. 百度地图
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">
<link rel="stylesheet" type="text/css" href="http://code.ionicframework.com/1.2.4/css/ionic.css">
<script src="lib/ionic/js/ionic.bundle.min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=0KzDtnrAVfdyBds7BV55rfzZ"></script>
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
</style>
</head>
<body ng-controller="firstCtrl">
<ion-content scroll="false" class="has-header">
<div id="allmap"></div>
</ion-content>
<script>
angular.module("myApp",["ionic"])
.controller("firstCtrl",function($scope){
// 百度地图API功能
var map = new BMap.Map("allmap"); // 创建Map实例
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别
map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
});
</script>
</body>
2) 标题栏，页脚栏，内容区
3) Js引入ionic类库，添加页面操作方法和对象
4) 数据初始化
5) Html页面绑定方法和对象
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">
<link href="http://code.ionicframework.com/nightly/css/ionic.min.css" rel="stylesheet">
<script src="http://code.ionicframework.com/nightly/js/ionic.bundle.min.js"></script>
</head>
<body ng-controller="myCtrl">
<ion-header-bar align-title="center" class="bar-positive"> 1. 标题栏
<div class="buttons">
<button class="button">Left Button</button>
</div>
<h1 class="title">ion-header-bar</h1>
<a class="button button-clear icon ion-cloud"></a>
</ion-header-bar>
<ion-content class="has-header" overflow-scroll="true"> 3. 内容区
<!--Form对象 -->
<div class='list card' ng-controller="contr-2">
<h3> 控制器</h3>
<label class="item item-input">
<span class="input-label">First Name：</span>
<input type="text" ng-model="firstName" placeholder="First Name">
</label>
<label class="item item-input">
<span class="input-label">Last Name：</span>
<input type="text" ng-model="lastName" placeholder="Last Name">
</label>
<label class="item"> Full Name : <span ng-bind="firstName + ',' + lastName"></span></label>
<button class="button button-calm button-block" ng-click="hello()">button-light</button>
</div>
<!--列表对象 -->
<ul class="list card" ng-init="number=[1,2,2,3,4]" >
<li class="item" ng-repeat="x in number track by $index"> 遍历重复集合
<span ng-bind="$index"></span> : {{x}} 索引号
</li>
</ul>
<ul class="list">
<li class="item" ng-repeat="item in items">
<span ng-bind="$index"></span> :{{item}}
</li>
</ul>
</ion-content>
<ion-footer-bar align-title="left" class="dark-bg"> 2. 页脚栏
<div class="buttons"> 按钮
<button class="button" ng-click="doSomething()">Left Button</button>
</div>
<h1 class="title light">ion-footer-bar</h1> 标题
<div class="button-bar"> 工具组
<a class="button button-clear icon ion-ios-loop" ></a>
</div>
</ion-footer-bar>
</body>
<script>
angular.module("myApp",["ionic"])
.controller("contr-2",function($scope){
$scope.firstName = 'zhang';
$scope.lastName = 'san';
$scope.hello = function () {
alert("hello!");
};
})
.controller("myCtrl",function($scope){ 添加控制器
$scope.items = []; 数据初始化
for(var i=0;i<20;i++)
$scope.items.push("line " + i);
$scope.doSomething = function () { 添加方法
console.log("doSomething。。。");
};
});
</script>
</html>
1.4.1. ionic 头部和底部
ion-header-bar 如果给它加上'bar-subheader' 这个样式，它就是副标题
align-title 对齐如果没有设置，它将会按照手机的默认排版(Ios的默认是居中，Android默认是居左)。它的值可以是 'left','center','right'。
no-tap-scroll 设置 header-bar 是否跟随着内容的滚动而滚动，就是是否固定在顶部。它的值是布尔值（true/false）
ion-footer-bar
align-title 如果没有设置，它将会按照手机的默认排版(Ios的默认是居中，Android默认是居左)。它的值可以是 'left','center','right'。
与 ion-header-bar 不同的是，ion-footer-bar 只有 align-title 这个 API。
ion-content
指令定义内容区域. overflow-scroll="true" 使用系统内置的滚动条
1.4.2. 表单输入 ion-checkbox ion-radio ion-spinner
<body ng-controller="myCtrl">
<div class="list card">
<div class="item item-divider"> 当前支付方式: {{ data.pay }} </div>
<ion-radio ng-repeat="item in payList" ng-value="item.value" ng-model="data.pay">
{{ item.text }}
</ion-radio>
<div class="item item-divider">pay : {{ data.pay }}</div>
<ion-radio ng-repeat="item in payList" ng-value="item.value" ng-model="data.pay" ng-change="payChange(item)" name="pay">
{{ item.text }}
</ion-radio>
<div class="item item-divider"> pay: {{ data.pay }} <br> mycity: {{ mycity }}<br>
<select ng-model="data.pay" ng-options="pay.value as pay.text for pay in payList" ng-change="payChange(data)"></select>
<select ng-model="mycity.value" ng-options="city.value as city.name group by city.group for city in Cities"
ng-change="cityChange(mycity)"></select>注意绑定值，传递参数
</div>
</div>
<!--绑定json列表数据的text和checked-->
<div class="list card"> <!--选中颜色 -->
<ion-checkbox class="checkbox-dark" ng-repeat="item in devList" ng-model="item.checked" ng-checked="item.checked">
{{ item.text }}: {{item. checked }}
</ion-checkbox>
<ion-toggle ng-repeat="item in devList" ng-model="item.checked" ng-checked="item.checked">
{{ item.text }}
</ion-toggle>
</div>
<!--绑定json对象数据的checked 数据改变事件-->
<ion-checkbox ng-model="pushNotification.checked" ng-change="pushNotificationChange()">Push Notifications</ion-checkbox>
<ion-toggle ng-model="pushNotification.checked" ng-change="pushNotificationChange()">Push Notifications</ion-toggle>
<!--绑定 判断是否选中-->
<ion-checkbox ng-model="emailNotification" ng-true-value="Subscribed" ng-false-value="Unubscribed"> Newsletter</ion-checkbox>
<ion-toggle ng-model="emailNotification" ng-true-value="Subscribed" ng-false-value="Unubscribed" toggle-class="toggle-assertive" >
Newsletter </ion-toggle>
<!--查看json对象-->
<div class="item">
<pre ng-bind="devList | json"></pre> <pre ng-bind="pushNotification | json"></pre> <pre ng-bind="emailNotification | json"></pre>
</div>
<div class="list">
<div class="item item-divider"> 当前支付方式: {{ data.pay }} pay : {{ data.pay }} </div>
<ion-radio ng-repeat="item in payList" ng-value="item.value" ng-model="data.pay"> {{ item.text }} </ion-radio>
<ion-radio ng-repeat="item in payList" ng-value="item.value" ng-model="data.pay" ng-change="payChange(item)" name="pay">
{{ item.text }}
</ion-radio>
</div>
</div>
</body>
</html>
<script>
angular.module("myApp",["ionic"])
.controller('myCtrl', function ($scope) {
$scope.mycity = { id: 1, name: '北京',value: 'beijng', group: '中国' };
$scope.Cities = [{ id: 1, name: '北京',value: 'beijng', group: '中国' },
{ id: 2, name: '上海',value: 'shanghai', group: '中国' },{ id: 3, name: '广州',value: 'guangzhou', group: '中国' }];
$scope.cityChange = function(item) {console.log("item", item); };
$scope.payList = [{ text: "albaba alipay", value: "alipay" },{ text: "ebay paypal", value: "paypal" } ];
$scope.data = { pay: 'alipay'};
$scope.payChange = function(item) { console.log("pay:", item.pay); };
/////////////////////////////////////////
$scope.devList = [{ text: "HTML5", checked: true},{ text: "CSS3", checked: false},{ text: "JavaScript", checked: false}];
$scope.pushNotification = { checked: true};
$scope.emailNotification = 'Subscribed';
$scope.pushNotificationChange = function () { console.log('Push Notification Change', $scope.pushNotification.checked); };
});
</script>
1.4.2.1. 复选按钮 : ion-checkbox 开关按钮ion-toggle
支持数据绑定。使用可选的ng-model属性，
绑定：可直接绑定列表对象，根据item对象是否选中；可直接绑定对象属性true；可绑定对象的文本是否为指定的值。
事件：ng-change 对象选中值改变
1.4.2.2. 单选按钮 : ion-radio
使用可选的ng-model属性，实现与作用域变量的数据绑定
使用可选的ng-value属性，可以使用作用域变量设置单选按钮对应的值
list列表json对象中选中单个json, ng-change 对象选中值改变 传入 item
1.4.2.3. 下拉选择 : select
使用可选的ng-model属性，实现与作用域变量的数据绑定
<select ng-model="mycity.value" ng-options="city.value as city.name group by city.group for city in Cities"
ng-change="cityChange(mycity)"></select>
ng-model为实际选中的值mycity，ng-options对列表对象或hashmap轮询，分组。处理好显示信息和实际值 ，
ng-change 对象选中值改变 传入 item
1.4.2.4. 等待指示器 : ion-spinner
<ion-item ng-repeat="item in items" >
<ion-spinner icon="{{item}}"></ion-spinner>
</ion-item>
$scope.items = ["android","ios","ios-small","bubbles","circles","crescent","dots","lines","ripples","spiral"];
1.4.3. ionic 手势事件
1.4.3.1. on-hold长按的时间是500毫秒
<button on-hold="onHold()" class="button"> Test</button>
1.4.3.2. on-tap
这个是手势轻击事件，如果长按时间超过250毫秒，那就不是轻击了。。
<button on-tap="onTap()" class="button"> Test </button>
1.4.3.3. on-double-tap手双击屏幕事件
<button on-double-tap="onDoubleTap()"class="button"> Test</button>
1.4.3.4. on-touch
这个和 on-tap 还是有区别的，这个是立即执行，而且是用户点击立马执行。不用等待 touchend/mouseup 。
<button on-touch="onTouch()" class="button"> Test </button>
1.4.3.5. on-release
当用户结束触摸事件时触发。
<button on-release="onRelease()" class="button"> Test</button>
1.4.3.6. on-drag
这个有点类似于PC端的拖拽。当你一直点击某个物体，并且手开始移动，都会触发 on-drag。
<button on-drag="onDrag()"class="button"> Test</button>
1.4.3.7. on-drag-up 向上拖拽
<button on-drag-up="onDragUp()" class="button"> Test</button>
1.4.3.8. on-drag-right向右拖拽。
<button on-drag-right="onDragRight()" class="button"> Test</button>
1.4.3.9. on-drag-down 向下拖拽
<button on-drag-down="onDragDown()" class="button">Test</button>
1.4.3.10. on-drag-left 向左边拖拽
<button on-drag-left="onDragLeft()" class="button">Test</button>
1.4.3.11. on-swipe 指手指滑动效果
可以是任何方向上的。而且也和 on-drag 类似，都有四个方向上单独的事件。
<button on-swipe="onSwipe()" class="button"> Test</button>
1.4.3.12. on-swipe-up 向上的手指滑动效果。
<button on-swipe-up="onSwipeUp()" class="button"> Test</button>
1.4.3.13. on-swipe-right 向右的手指滑动效果。
<button on-swipe-right="onSwipeRight()" class="button"> Test</button>
1.4.3.14. on-swipe-down 向下的手指滑动效果。
<button on-swipe-down="onSwipeDown()" class="button"> Test</button>
1.4.3.15. on-swipe-left 向左的手指滑动效果
<button on-swipe-left="onSwipeLeft()" class="button"> Test</button>
1.4.3.16. $ionicGesture
一个angular服务展示ionicionic.EventController手势。
on(eventType, callback, $element) 在一个元素上添加一个事件监听器。
eventType string 监听的手势事件。
callback function(e) 当手势事件发生时触发的事件。
$element element angular元素监听的事件。
options object 对象。
off(eventType, callback, $element) 在一个元素上移除一个手势事件监听器。
eventType string 移除监听的手势事件。
callback function(e) 移除监听器。
$element element 被监听事件的angular元素。
1.4.4. ionic 列表操作以及高性能的ng-repeat
<ion-header-bar class="bar-positive"> 通过ng-click修改变量，进而控制按钮是否显示
<a class="button button-clear icon ion-ios-minus-outline" ng-click="flag.showDelete=!flag.showDelete;flag.showReorder=false;"></a>
<h1 class="title">成员按钮</h1>
<a class="button" ng-click="flag.showReorder=!flag.showReorder;flag.showDelete=false;">重新排序</a>
</ion-header-bar>
<ion-list can-swipe="true" show-delete="flag.showDelete" show-reorder="flag.showReorder">
<ion-item ng-repeat="item in items">
{{item}}
<ion-option-button class="button-calm icon ion-edit"></ion-option-button>
<ion-option-button class="button-energized icon ion-share"></ion-option-button>
<ion-delete-button class="ion-minus-circled" ng-click="delete_item(item)"></ion-delete-button> item为传入对象
<ion-reorder-button class="ion-navicon" on-reorder="move_item(item,$fromIndex,$toIndex)"></ion-reorder-button>
</ion-item>
</ion-list>
<script>
angular.module("myApp",["ionic"])
.controller("myCtrl",function($scope){
$scope.flag={showDelete:false,showReorder:false};
$scope.items=["Chinese","English","German","Italian","Janapese","Sweden","Koeran","Russian","French"];
$scope.delete_item=function(item){
var idx = $scope.items.indexOf(item);
$scope.items.splice(idx,1);
};
$scope.move_item = function(item, fromIndex, toIndex) {
$scope.items.splice(fromIndex, 1);
$scope.items.splice(toIndex, 0, item);
};
$scope.close = function(){
$ionicListDelegate.closeOptionButtons();
};
});
1). ion-list ion-item
show-delete - 是否显示成员内的delete按钮
show-reorder - 是否显示成员内的reorder按钮
can-swipe - 是否支持滑动方式显示成员option按钮
2). ion-list ion-item 成员
ion-option-button - 选项按钮
ng-click指令来挂接点击事件监听函数 var optionListener = function(item){...}
ion-delete-button - 删除按钮 var deleteListener = function(item){...}
ion-reorder-button - 重排按钮 var reorderListener = function(item,$fromIndex,$toIndex){...}
3). collection-repeat : 高性能的ng-repeat
<ion-list>
<ion-item collection-repeat="item in items">
{{item}}
<ion-option-button class="button-positive">...</ion-option-button>
</ion-item>
</ion-list>
collection-repeat指令比ng-repeat更适用于大数据量 的列表数据，它只将处于可视区域的数据渲染到DOM上。
collection-repeat指令接受一个枚举表达式，同时可以附加以下的属性：
item-width - 可选。声明重复元素的宽度
item-height - 可选。声明重复元素的高度
item-render-buffer - 可选。需要载入渲染缓冲区的可视数据前后的数量。默认为3
force-refresh-images - 可选。滚动时是否强制刷新图像。允许值：true | false
4). 脚本接口 : $ionicListDelegate
showReorder([showReorder]) - 显示/关闭排序按钮
showReorder的允许值为：true | false。可以使用一个作用域上的表达式
showDelete([showDelete]) - 显示/关闭删除按钮
showDelete的允许值为： true | false。可以使用一个作用域上的表达式
canSwipeItems([canSwipeItems]) - 是否允许通过滑动方式来显示成员选项按钮
canSwipeItems的允许值为：true | false。可以使用一个作用域上的表达式
closeOptionButtons() - 关闭所有选项按钮
1.4.5. ionic 选项卡栏操作
1.4.5.1. ion-tabs简介，设置，标题文字、图标和徽章显示隐藏
<ion-tabs class="tabs-positive tabs-striped"> tabs-top tabs-dark tabs-icon-only位置和条带风格
<ion-tab title="tab1">
<ion-view> ……
</ion-tab> //图标 icon-on和icon-off - 选中未选中状态图标 微章内容及样式
<ion-tab title=" tab2" icon-on="ion-ios-clock" icon-off="ion-ios-clock-outline" badge="12" badge-style="badge-assertive">
<ion-nav-view name="tab-tab2"></ion-nav-view> 在name 放tab-tab2
</ion-tab>
<ion-tab title="tab3" disabled="true"> // disabled - 禁止，hidden - 隐藏
<ion-view>
<ion-content class="energized-bg">
tab 3 content
</ion-content>
</ion-view>
</ion-tab>
</ion-tabs>
1.4.5.2. ion-tabs 事件和 $ionicTabsDelegate
事件：on-select ，on-deselect ，ng-click
$ionicTabsDelegate服务：select(index)，selectedIndex()
<ion-tab title="tab3" on-select="on_select(3)">
<ion-view>
<ion-content class="energized-bg">
tab 3 content
</ion-content>
</ion-view>
</ion-tab>
<script>
angular.module("ezApp",["ionic"])
.controller("ezCtrl",function($scope){
$scope.title="ion-tab : events";
$scope.on_select = function(idx){
$scope.title = ["ion-tab ",idx," selected!"].join("");
}
})
.controller("ezCtrl",function($scope,$ionicTabsDelegate,$interval){
var idx=0;
$interval(function(){ // interval 定时刷新
idx = (idx + 1) % 3;
console.log(idx);
$ionicTabsDelegate.select(idx); // select(index) - 选中指定的选项页
},2000);
});
</script>
1.4.5.3. ion-tabs路由详解
ionic中结合tab状态嵌套
app.config(function($stateProvider,$urlRouterProvider) {
$stateProvider
.state('tab', {
url: "/tab",
abstract:true,
templateUrl: "tabs.html"
})
.state('tab.tab1', { 1).使用“点标记法”
url: '/tab1',
views:{
'tab-tab1':{
templateUrl: "tab-tab1.html",
controller:'tab1Controller'
}
}
})
.state('tab2', {
parent: 'tab', 2).使用parent属性，指定一个父状态的名称字符串
url: '/tab2',
views:{
'tab-tab2':{
templateUrl: "tab-tab2.html",
controller:'tab2Controller'
}
}
})
.state(tab.tab3, {
url: '/tab3',
views:{ 定义ion-nav-view并且加上name属性<ion-nav-view name="tab-tab2"></ion-nav-view>
'tab-tab3':{ 定义view 并对应 ion-nav-view 中的name属性
templateUrl: "tab-tab3.html",
controller:'tab3Controller'
}
}
})
$urlRouterProvider.otherwise('/tab/tab1');
})
3).使用parent属性，指定一个父状态对象
var contacts = { name: 'contacts', templateUrl: 'contacts.html' }
var contactsList = { name: 'list', parent: contacts, //mandatory templateUrl: 'contacts.list.html' }
states 抽象状态abstract
一个抽象的状态可以有子状态但不能显式激活，它将被隐性激活当其子状态被激活时。
两个最常用的抽象状态的示例：
•为所有子状态预提供一个基url
•在父状态中设置template属性，子状态对应的模板将插入到父状态模板中的ui-view(s)中
<!--主页面导航框架：导航栏和回退按钮，导航视图-->
<ion-nav-bar class="bar-positive">
<ion-nav-back-button></ion-nav-back-button>
</ion-nav-bar><!-- -->
<ion-nav-view></ion-nav-view>
<!--导航页面 -->
<script id="tabs.html" type="text/ng-template">
<ion-header-bar class="bar-positive">
<h1 class="title"> ion-tabs</h1>
</ion-header-bar>
<ion-tabs class="tabs-icon-top tabs-positive">
<ion-tab title="tab1" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/tab/tab1">
<ion-nav-view name="tab-tab1"></ion-nav-view>
</ion-tab>
<ion-tab title="tab2" icon-off="ion-ios-chatboxes-outline" icon-on="ion-ios-chatboxes"
badge="12" badge-style="badge-assertive" href="#/tab/tab2">
<ion-nav-view name="tab-tab2"></ion-nav-view>
</ion-tab>
<ion-tab title="tab3" icon-off="ion-ios-gear-outline" icon-on="ion-ios-gear" href="#/tab/tab3">
<ion-nav-view name="tab-tab3"></ion-nav-view>
</ion-tab>
<ion-tab title="Home1" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline">
<ion-view>
<ion-header-bar class="bar-positive"> 为什么不起作用？
<h1 class="title">home tab</h1>
</ion-header-bar>
<ion-content>
<p>home content</p>
</ion-content>
</ion-view>
</ion-tab>
</ion-tabs>
</script>
<!—应用页面 -->
<script id="tab-tab1.html" type="text/ng-template"> 应用页面放在ion-view 里遵循它的特点，title 和buttons放在
<ion-view view-title="Tab1">
<ion-nav-buttons side="right">
<button class="button" ng-click="doSomething()"> register </button>
</ion-nav-buttons>
<ion-content>
Tab1 {{title}}
<!—三级页面 -->
<a class="button" href="#/tab/content1/10">跳转到内容</a>
<a class="button" href="#/news">news跳转到内容</a>
</ion-content>
</ion-view>
</script>
<script>
var app = angular.module('myApp', ['ionic']);
app.config(function($stateProvider,$urlRouterProvider) {
$stateProvider
.state('tab', {
url: "/tab",
abstract:true,
templateUrl: "tabs.html"
})
.state('tab.tab1', {
url: '/tab1',
views:{
'tab-tab1':{
templateUrl: "tab-tab1.html",
controller:'tab1Controller'
}
}
})
.state('tab2', {
parent: 'tab',
url: '/tab2',
views:{
'tab-tab2':{
templateUrl: "tab-tab2.html",
controller:'tab2Controller'
}
}
})
.state('tab.content1', { tab.content1状态的页面放在ion-nav-view的name属性为tab-tab1 里
url: '/content1/:id',
views:{
'tab-tab1':{
templateUrl: "tab-content1.html",
controller:'content1Controller'
}
}
})
.state('news', { 只能放在最外面的ion-nav-view里
url: '/news',
templateUrl: "news.html"
})
$urlRouterProvider.otherwise('/tab/tab1');
})
.controller('tab2Controller', function($scope) {
$scope.title='tab2Controller';
})
.controller('content1Controller', function($scope,$stateParams) {
$scope.title='content1Controller';
console.log($stateParams);
});
</script>
1.4.6. 侧边栏ion-side-menus
<body ng-app="ionic" >
<ion-side-menus> 侧边栏菜单
<ion-side-menu-content drag-content="true" edge-drag-threshold=50 class="calm-bg"> 主区域容器
<ion-header-bar class="bar-dark">
<!--切换左侧栏显示状态-->
<a menu-toggle="left" class="button icon ion-navicon"></a>
<h1 class="title">ion-side-menu-content</h1>
</ion-header-bar>
<ion-content class="positive-bg">
menu-close指令关闭侧栏内容
<a menu-close="" class="button icon ion-navicon"></a>
</ion-content>
</ion-side-menu-content>
侧边栏区域容器
<ion-side-menu side="left" width="150" expose-aside-when="(min-width:300px) " class="balanced-bg">
左侧区域
</ion-side-menu>
<ion-side-menu side="right" width="150" class="dark-bg">
右侧区域
</ion-side-menu>
</ion-side-menus>
</body>
1).侧边栏菜单 : ion-side-menus
2).侧边栏打开关闭 切换指令 : menu-toggle/menu-close
3).主区域容器ion-side-menu-content 属性设置
drag-content - 是否允许拖动内容打开侧栏菜单
edge-drag-threshold -启用边距检测,正数，当拖动发生在距离边界小于这个数,触发侧栏显示。为true时，使用默认的25px作为边距阈值。为false或0，则意味着禁止边距检测，可在内容区域的任何地方拖动来打开侧栏
4).侧边栏区域容器 : ion-side-menu
width - 侧边栏的宽度 width属性是可选的，表示以像素为单位的侧栏菜单宽度。默认为275px
is-enabled - 是否可用
expose-aside-when - 侧边栏自动显示条件表达式
默认情况下，侧边栏是隐藏的，需要用户向左或向右拖动内容，或者通过一个切换按钮来打开。 但是在有些场景下（比如，横放的平板）屏幕宽度足够大，这时，自动地显示侧边栏内容会更 合理。
expose-aside-when属性就是处理这种情况的，和CSS3的@meida类似，expose-aside-when需要 一个CSS表达式，例如：expose-aside-when="(min-width:500px)"，这意味着当屏幕宽度大于 500px时将自动显示侧栏菜单。
ionic为expose-aside-when提供了一个快捷选项：large ， 这等同于 (min-width:768px)。
5).脚本中控制侧边栏菜单接口 : $ionicSideMenuDelegate
<ion-header-bar class="bar-positive">
<a class="button" ng-click="toggle1();">切换</a>
</ion-header-bar>
<script>
angular.module("myApp",["ionic"])
.controller("myCtrl",function($scope,$ionicSideMenuDelegate){
$scope.toggle1 = function(){
$ionicSideMenuDelegate.toggleLeft();
};
});
</script>
getOpenRatio() - 侧栏菜单打开的宽度占其总宽度比例
canDragContent([canDrag]) - 是否允许拖拽内容以打开侧栏菜单
edgeDragThreshold(value) - 设置边框距离阈值
6).ion-tap结合 ion-side-menus一起使用
<ion-side-menus>
<ion-side-menu-content class="calm-bg">
<ion-nav-bar class="bar-positive">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<ion-tabs class="tabs-icon-top tabs-positive">
<!-- Dashboard Tab -->
<ion-tab title="tab1" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/tab/tab1">
<ion-nav-view name="tab-tab1"></ion-nav-view>
</ion-tab>
<!-- Chats Tab -->
<ion-tab title="tab2" icon-off="ion-ios-chatboxes-outline" icon-on="ion-ios-chatboxes" href="#/tab/tab2">
<ion-nav-view name="tab-tab2"></ion-nav-view>
</ion-tab>
<!-- Account Tab -->
<ion-tab title="tab3" icon-off="ion-ios-gear-outline" icon-on="ion-ios-gear" href="#/tab/tab3">
<ion-nav-view name="tab-tab3"></ion-nav-view>
</ion-tab>
</ion-tabs>
</ion-side-menu-content>
<ion-side-menu side="left" width="150" class="balanced-bg">
左侧区域
</ion-side-menu>
<ion-side-menu side="right" width="150" class="dark-bg">
右侧区域
</ion-side-menu>
</ion-side-menus>
1.4.7. 幻灯指令 ion-slide-box
1.4.7.1. 幻灯片 : ion-slide-box指令介绍
1.4.7.2. ion-slide-box : 属性设置定制播放行为
1.4.7.3. ion-slide-box : 事件及变量
1.4.7.4. 脚本接口: $ionicSlideBoxDelegate
<ion-slide-box on-slide-changed="slideChanged(index)">
<ion-slide>
<h3>Thank you for choosing the Awesome App!</h3>
<div id="logo"><img src="http://code.ionicframework.com/assets/img/app_icon.png"></div>
<p> We've worked super hard to make you happy.</p>
<p> But if you are angry, too bad. </p>
</ion-slide>
<ion-slide>
<h3>Using Awesome</h3>
<div id="list">
<h5>Just three steps:</h5>
<ol>
<li>Be awesome</li>
<li>Stay awesome</li>
<li>There is no step 3</li>
</ol>
</div>
</ion-slide>
<ion-slide>
<h3>Any questions?</h3>
<p> Too bad! </p>
</ion-slide>
<ion-slide>
<h3>Any questions?</h3>
<p> 这是第四个 </p>
</ion-slide>
</ion-slide-box>
1.5. ionic指令复杂布局
1.5.1. ion-scroll滚动框
<ion-scroll class="has-header" zooming="true" direction="xy" style="width: 500px; height: 500px">
<div style="width: 5000px; height: 5000px; background: url('img/map.jpg') repeat"></div>
</ion-scroll>
5. 滚动框 : ion-scroll
1.5.2. 下拉更新数据 : ion-refresher
<body ng-controller="firstCtrl">
<ion-content class="has-header">
<ion-refresher pulling-text="Pull to refresh..." on-refresh="doRefresh()" spinner="android"></ion-refresher>
<ul class="list">
<li class="item" ng-repeat="item in items">{{item}}</li>
</ul>
</ion-content>
<script>
angular.module("myApp",["ionic"])
.controller("firstCtrl",function($scope){
//$scope.items=[];
//for(var i=0;i<50;i++)
// $scope.items.push(["this is line ",i].join(""));
$scope.items = ['item1','item2','item3'];
var base = 1;
$scope.doRefresh = function() {
for(var i=0;i<10;i++,base++)
$scope.items.unshift(["item ",base].join(""));
$scope.$broadcast("scroll.refreshComplete"); // Stop the ion-refresher from spinning
};
});
</script>
</body>
1.5.3. 上拉更新数据 : ion-infinite-scroll
<body ng-controller="firstCtrl">
<ion-content class="has-header">
<ion-infinite-scroll on-infinite="load_more();" icon="ion-load-a" distance="1%" immediate-check="true"></ion-infinite-scroll>
<ul class="list">
<li class="item" ng-repeat="item in items">{{item}}</li>
</ul>
</ion-content>
<script>
angular.module("myApp",["ionic"])
.controller("firstCtrl",function($scope,$timeout){
$scope.items = ['1111','22222'];
var base = 0;
$scope.load_more = function(){
$timeout(function(){
for(var i=0;i<3;i++,base++)
$scope.items.push(["item ",base].join(""));
$scope.$broadcast("scroll.infiniteScrollComplete");
},500);
};
});
</script>
1.5.4. 脚本接口 : $ionicScrollDelegate
<ion-footer-bar class="bar-positive">
<a class="button" ng-click="gotop();">GO TOP!</a>
<a class="button" ng-click="gobottom();">GO BOTTOM!</a>
<a class="button" ng-click="getScrollPosition();">ScrollPosition</a>
</ion-footer-bar>
</body>
</html>
<script>
angular.module("myApp",["ionic"])
.controller("firstCtrl",["$scope","$ionicScrollDelegate",function($scope,$ionicScollDelegate){
$scope.items = [];
for(var i=0;i<100;i++)
$scope.items.push(["item ",i+1].join(""));
$scope.gotop = function(){
$ionicScollDelegate.scrollTop(true);
}
$scope.gobottom = function(){
$ionicScollDelegate.scrollBottom(true);
}
$scope.getScrollPosition = function(){
console.log($ionicScollDelegate.getScrollPosition());
}
}]);
</script>
1.5.5. 百度地图
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">
<link rel="stylesheet" type="text/css" href="http://code.ionicframework.com/1.2.4/css/ionic.css">
<script src="lib/ionic/js/ionic.bundle.min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=0KzDtnrAVfdyBds7BV55rfzZ"></script>
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
</style>
</head>
<body ng-controller="firstCtrl">
<ion-content scroll="false" class="has-header">
<div id="allmap"></div>
</ion-content>
<script>
angular.module("myApp",["ionic"])
.controller("firstCtrl",function($scope){
// 百度地图API功能
var map = new BMap.Map("allmap"); // 创建Map实例
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别
map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
});
</script>
</body>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- hdu 4405 Aeroplane chess 概率dp入门题
- 腾讯技术运营一面
- 经典OJ：Hanoi汉诺塔的移动问题
- 素数路径 Prime Distance On Tree 点分治+FFT
- MyEclipse的html/JSP编辑器添加代码自动提示
- LDA的介绍
- JavaScript学习之基础语法
- 单例和多例的区别
- android事件分发
- 从键盘读入n个整数（升序），请编写算法实现： 建立带表头结点的单链表； 显示单链表，（形如：H->10->20->30->40）; 在有序单链表中插入新的数据元素x； 将单链表就地逆
- Java中的数组
- Ionic学习笔记1_基本布局
- unreal3脚本stacktrace的问题
- POJ 2396 Budget【网络流】
- Qt之文件操作
- 自定义的onMeasure()方法
- HDU 1016 Prime Ring Problem
- 经典排序算法总结
- ViewPager每页包含多个item
- Linux内核分析作业 NO.8 完结撒花~~~