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

来源：互联网发布：mac格式化u盘格式编辑：程序博客网时间：2024/05/16 23:54

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 itemsfor (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

0 0