您的位置：首页 > 其它

ionic的组件 ion-tabs的一个实例

2015-03-09 20:12 267 查看
app.html

<!DOCTYPE html>
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Inline Tabs</title>
<link   href="css/ionic.min.css" rel="stylesheet">
<script  src="js/ionic.bundle.min.js"></script>
<script   src="js/app.js"></script>
</head>
<body ng-controller="RootCtrl">
<ion-tabs class="tabs-icon-only tabs-positive"> <ion-tab
title="Home" icon-on="ion-ios7-filing"
icon-off="ion-ios7-filing-outline" ng-controller="HomeCtrl">
<ion-header-bar class="bar-positive">
<button class="button button-clear" ng-click="newTask()">New</button>
<h1 class="title">Tasks</h1>
</ion-header-bar> <ion-content has-tabs="true" on-refresh="onRefresh()"> <ion-refresher></ion-refresher>
<ion-list scroll="false" on-refresh="onRefresh()"
s-editing="isEditingItems" animation="fade-out"
delete-icon="icon ion-minus-circled"> <ion-item
ng-repeat="item in items" item="item" buttons="item.buttons"
can-delete="true" can-swipe="true" on-delete="deleteItem(item)"
ng-class="{completed: item.isCompleted}"> <i class=""></i>
</ion-item> </ion-list> </ion-content> </ion-tab> <ion-tab title="About" icon-on="icon ion-ios7-clock"
icon-off="icon ion-ios7-clock-outline"> <header
class="bar bar-header bar-positive">
<h1 class="title">Deadlines</h1>
</header> <ion-content has-header="true">
<h1>Deadlines</h1>
</ion-content> </ion-tab> <ion-tab title="Settings" icon-on="icon ion-ios7-gear"
icon-off="icon ion-ios7-gear-outline"> <header
class="bar bar-header bar-positive">
<h1 class="title">Settings</h1>
</header> <ion-content has-header="true">
<h1>Settings</h1>
</ion-content> </ion-tab> </ion-tabs>
<script id="newTask.html" type="text/ng-template">
<div id="task-view" class="modal slide-in-up" ng-controller="TaskCtrl">
<header class="bar bar-header bar-secondary">
<h1 class="title">New Task</h1>
<button class="button button-clear button-primary" ng-click="close()">Done</button>
</header>
<ion-content class="padding has-header">
<input type="text" placeholder="I need to do this...">
</ion-content>
</div>
</script>
</body>
</html>


app.js

angular.module('ionicApp', [ 'ionic' ]).controller(
'RootCtrl',
function($scope) {
$scope.onControllerChanged = function(oldController, oldIndex,
newController, newIndex) {
console.log('Controller changed', oldController, oldIndex,
newController, newIndex);
console.log(arguments);
};
}).controller('HomeCtrl',
function($scope, $timeout, $ionicModal, $ionicActionSheet) {
$scope.items = [];
$ionicModal.fromTemplateUrl('newTask.html', function(modal) {
$scope.settingsModal = modal;
});
var removeItem = function(item, button) {
$ionicActionSheet.show({
buttons : [],
destructiveText : 'Delete Task',
cancelText : 'Cancel',
cancel : function() {
return true;
},
destructiveButtonClicked : function() {
$scope.items.splice($scope.items.indexOf(item), 1);
return true;
}
});
};
var completeItem = function(item, button) {
item.isCompleted = true;
};
$scope.onReorder = function(el, start, end) {
ionic.Utils.arrayMove($scope.items, start, end);
};
$scope.onRefresh = function() {
console.log('ON REFRESH');
$timeout(function() {
$scope.$broadcast('scroll.refreshComplete');
}, 1000);
}
$scope.removeItem = function(item) {
removeItem(item);
};
$scope.newTask = function() {
$scope.settingsModal.show();
};
// Create the items
for (var i = 0; i < 25; i++) {
$scope.items.push({
title : 'Task ' + (i + 1),
buttons : [ {
text : 'Done',
type : 'button-success',
onButtonClicked : completeItem,
}, {
text : 'Delete',
type : 'button-danger',
onButtonClicked : removeItem,
} ]
});
}
}).controller('TaskCtrl', function($scope) {
$scope.close = function() {
$scope.modal.hide();
}
});


效果：



参考链接：http://www.haomou.net/2014/08/11/2014_ionic_api

部分相关js下载地址：http://code.ionicframework.com
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航