您的位置：首页 > 移动开发 > Android开发

ionic——页面切换（相当于Android中的Fragment）

2017-12-14 19:56 513 查看
<!DOCTYPE html>

<html>

<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="js/ionic/css/ionic.css" />
<script type="text/javascript" src="js/ionic/js/ionic.bundle.min.js"></script>
<script>
var app = angular.module("myApp", ['ionic']);
app.controller("myCtrl", function($scope) {

});
</script>
</head>

<body ng-app="myApp" ng-controller="myCtrl">
<ion-tabs class="tabs-striped tabs-positive">

<ion-tab title="Home" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline">

<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}">
{{item.title}}
<i class="{{item.icon}}"></i>
</ion-item>
</ion-list>
</ion-content>
</ion-tab>

<ion-tab title="About" icon-on="icon ion-ios-clock" icon-off="icon ion-ios-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-ios-gear" icon-off="icon ion-ios-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>
</body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航