第十章
固定标题栏
<body ng-app="starter">
<ion-header-bar align-title="left" class="bar-positive">
<button class="button">消息</button>
<h4 class="title"> 这里是顶部</h4>
<button class="button">签到</button>
</ion-header-bar>
<ion-header-bar class="bar-subheader bar-energized">
<h4>次级顶栏</h4>
</ion-header-bar>
<!--添加内容的位置-->
<ion-footer-bar class="bar-subfooter bar-energized">
<h4>次级底栏</h4>
</ion-footer-bar>
<ion-footer-bar align-title="right" class="bar-positive">
<button class="button">推荐</button>
<h4 class="title"> 这里是底部</h4>
<button class="button" pull-right>设置</button>
</ion-footer-bar>
</body>
内容区域
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>内容区域:ion-content</title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
</head>
<body ng-app="starter">
<ion-header-bar class="bar-positive">
<h4 class="title">这里是顶部</h4>
</ion-header-bar>
<ion-content ng-controller="myCtrl" on-scroll="onScroll()" on-scroll-complete="onScrollComplete(scrollLeft,scrollTop)">
<h1>美丽的海岛</h1>
<img src="img/demo10-2/海岛.jpg">
</ion-content>
<ion-footer-bar class="bar-positive">
<h4 class="title">这里是底部</h4>
</ion-footer-bar>
</body>
<script>
angular.module("starter",["ionic"]).controller("myCtrl",function($scope){
$scope.onScroll=function(){
console.log("正在滚动");
}
$scope.onScrollComplete=function(scrollLeft,scrollTop){
console.log("当前滚动位置"+scrollLeft+","+scrollTop);
}
})
</script>
</html>
滚动刷新
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>滚动刷新:ion-infinite-scroll</title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.min.js"></script>
</head>
<body ng-app="starter">
<ion-header-bar class="bar-positive">
<h4>这里是头部</h4>
</ion-header-bar>
<ion-content ng-controller="myCtrl">
<ul class="list">
<li class="item" ng-repeat="item in items">{{item}}</li>
<li class="item" ng-if="!moreDataCanBeLoaded()">没有更多数据喽</li>
</ul>
<ion-infinite-scroll ng-if="moreDataCanBeLoaded()"
on-infinite="loadMore()" distance="1%">
</ion-infinite-scroll>
</ion-content>
<ion-footer-bar class="bar-positive">
<h4>这里是底部</h4>
</ion-footer-bar>
</body>
<script>
//定义控制器
angular.module("starter",["ionic"]).controller("myCtrl",function($scope,$timeout){
//初始化加载更多数据的次数
$scope.loadTimes=0;
//定义判断是否可以加载更多数据的函数
$scope.moreDataCanBeLoaded=function(){
return $scope.loadTimes<3;
}
//初始化数据
$scope.items=[];
$scope.data=[];
for(var i=1;i<=30;i++){
$scope.data.push("第"+i+"条数据");
}
$scope.pageSize=10;
//页面滚动到底部需要调用的方法
$scope.loadMore = function() {
//定义定时器，延时加载可以看到加载图标效果
$timeout(function () {
$scope.start=$scope.pageSize*($scope.loadTimes-1);
$scope.items= $scope.data.slice($scope.start,$scope.start+$scope.pageSize);
//加载完毕通知容器更新滚动视图（收起图标）
$scope.loadTimes=$scope.loadTimes+1;
$scope.$broadcast('scroll.infiniteScrollComplete');
}, 1000);
$scope.$on('stateChangeSuccess', function() {
$scope.loadMore();
});
}
});
</script>
</html>
路由
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>模板视图与视图容器</title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.min.js"></script>
</head>
<body ng-app="starter">
<!--<ion-nav-bar class="bar-positive">-->
<!--<ion-nav-back-button>返回</ion-nav-back-button>-->
<!--</ion-nav-bar>-->
<ion-nav-view>
<i>模板内容将会加载到此处</i>
<!--因为要跳转到页面2，所以这里ui-sref填入页面2的状态：two-->
</ion-nav-view>
<script id="templates/page1.html" type="text/ng-template">
<ion-view>
<ion-content class="calm-bg">
<p>
This is page 1.
</p>
<a class="button" ui-sref="two">go to page2</a>
</ion-content>
</ion-view>
</script>
<script id="templates/page2.html" type="text/ng-template">
<ion-view>
<ion-content class="royal-bg">
<p>
This is page 2.
</p>
<a class="button" ui-sref="three">go to page3</a>
</ion-content>
</ion-view>
</script>
<script id="templates/page3.html" type="text/ng-template">
<ion-view>
<ion-content class="energized-bg">
<p>
This is page 3.
</p>
<a class="button" ui-sref="one">go to page1</a>
</ion-content>
</ion-view>
</script>
</body>
<script type="text/javascript">
var app = angular.module('starter', ['ionic']);
app.config(function($stateProvider,$urlRouterProvider) {
// $stateProvider用来配置状态路由
$stateProvider
.state('one', { // "one"是页面1的状态
url: '/one', // "/one"是页面1的Url
templateUrl: 'templates/page1.html' // "page1.html"是页面1的模板
})
.state('two', {
url: '/two',
templateUrl: 'templates/page2.html'
})
.state('three', {
url: '/three',
templateUrl: 'templates/page3.html'
});
// 以上匹配都失败的情况下，进行下面的匹配
$urlRouterProvider.otherwise('/one');
});
</script>
</html>
列表
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>ionic JS 列表</title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.min.js"></script>
</head>
<body ng-app="starter" ng-controller="myCtrl">
<ion-header-bar class="bar-positive">
<div class="buttons">
<button class="button button-icon icon ion-ios-minus-outline"
ng-click="data.showDelete = !data.showDelete; data.showReorder = false"></button>
</div>
<h1 class="title">通讯录</h1>
<div class="buttons">
<button class="button"
ng-click="data.showDelete = false; data.showReorder = !data.showReorder">
排序
</button>
</div>
</ion-header-bar>
<ion-content>
<ion-list show-delete="data.showDelete" show-reorder="data.showReorder">
<ion-item ng-repeat="item in items" item="item"
href="#/item/{{item.id}}" class="item-remove-animate">
好友{{ item.id }}
<ion-delete-button class="ion-minus-circled" ng-click="onItemDelete(item)">
</ion-delete-button>
<ion-option-button class="button-balanced">
星标朋友
</ion-option-button>
<ion-option-button class="button-calm">
修改备注
</ion-option-button>
<ion-reorder-button class="ion-navicon"
on-reorder="moveItem(item, $fromIndex, $toIndex)"></ion-reorder-button>
</ion-item>
</ion-list>
</ion-content>
</body>
<script type="text/javascript">
var app = angular.module('starter', ['ionic']);
app.controller('myCtrl', function($scope) {
$scope.data = {
showDelete: false
};
//排序
$scope.moveItem = function(item, fromIndex, toIndex) {
$scope.items.splice(fromIndex, 1);
$scope.items.splice(toIndex, 0, item);
};
//删除好友
$scope.onItemDelete = function(item) {
$scope.items.splice($scope.items.indexOf(item), 1);
};
$scope.items = [{ id: 0 }, { id: 1 }, { id: 2 }, { id: 3 }, { id: 4 },
{ id: 5 }, { id: 6 }, { id: 7 }, { id: 8 }, { id: 9 }, { id: 10 }
];
});
</script>
</html>
选项卡
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>选项卡</title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.min.js"></script>
</head>
<body ng-app="starter">
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<ion-tabs class="tabs-icon-top tabs-color-active-positive">
<!-- Dashboard Tab -->
<ion-tab title="Status" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/dash">
<ion-nav-view name="tab-dash"></ion-nav-view>
</ion-tab>
<!-- Chats Tab -->
<ion-tab title="Chats" icon-off="ion-ios-chatboxes-outline" icon-on="ion-ios-chatboxes" href="#/chats">
<ion-nav-view name="tab-chats"></ion-nav-view>
</ion-tab>
<!-- Account Tab -->
<ion-tab title="Account" icon-off="ion-ios-gear-outline" icon-on="ion-ios-gear" href="#/account">
<ion-nav-view name="tab-account"></ion-nav-view>
</ion-tab>
</ion-tabs>
<!--模板-->
<script id="templates/tab-dash.html" type="text/ng-template">
<ion-view view-title="Dashboard">
<ion-content class="calm-bg"></ion-content>
</ion-view>
</script>
<script id="templates/tab-chats.html" type="text/ng-template">
<ion-view view-title="Chats">
<ion-content class="royal-bg"></ion-content>
</ion-view>
</script>
<script id="templates/tab-account.html" type="text/ng-template">
<ion-view view-title="Account">
<ion-content class="energized-bg"></ion-content>
</ion-view>
</script>
</body>
<script type="text/javascript">
var app=angular.module('starter',['ionic']);
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('dash', {
url: '/dash',
views: {
'tab-dash': {
templateUrl: 'templates/tab-dash.html',
}
}
})
.state('chats', {
url: '/chats',
views: {
'tab-chats': {
templateUrl: 'templates/tab-chats.html',
}
}
})
.state('account', {
url: '/account',
views: {
'tab-account': {
templateUrl: 'templates/tab-account.html',
}
}
});
$urlRouterProvider.otherwise('/dash');
});
</script>
</html>
第十一章
弹出框
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>弹出框</title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.min.js"></script>
</head>
<body ng-app="starter"ng-controller="myCtrl">
<button class="button button-balanced" ng-click="showPopup()">
自定义
</button>
<button class="button button-dark" ng-click="showConfirm()">
确认
</button>
<button class="button button-assertive" ng-click="showAlert()">
警告
</button>
</body>
<script type="text/javascript">
angular.module('starter', ['ionic'])
.controller('myCtrl',function($scope, $ionicPopup) {
$scope.showPopup = function() {
$scope.data = {}
// 自定义弹出框
var myPopup = $ionicPopup.show({
template: '<input type="password" ng-model="data.pass">',
title: '请输入密码',
subTitle: '8位数字和字母组合',
scope: $scope,
buttons: [
{ text: '取消' },
{
text: '<b>保存</b>',
type: 'button-positive',
onTap: function(e) {
if (!$scope.data.pass) {
// 输入密码前，不允许用户关闭
e.preventDefault();
} else {
myPopup.close();
}
}
},
]
});
myPopup.then(function() {
console.log('自定义弹出框关闭了');
});
};
// 确认弹出框
$scope.showConfirm = function() {
var confirmPopup = $ionicPopup.confirm({
title: '提示',
template: '您是否同意用户协议'
});
confirmPopup.then(function(res) {
if(res) {
console.log('同意');
} else {
console.log('不同意');
}
});
};
// 警告弹出框
$scope.showAlert = function() {
var alertPopup = $ionicPopup.alert({
title: '提示',
template: '电量不足'
});
alertPopup.then(function(res) {
console.log('警告弹出框关闭了');
});
};
});
</script>
</html>
449
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
