index.html

  • "js/mine.js", "ng-app=ionicApp" 그리고 body 안에 있는 html 태그를 제외하고는 모두 ionic 프로젝트 생성 시 기본으로 생성되는 내용입니다.
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!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></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<!-- <link href="lib/ionic/css/ionicons.css" rel="stylesheet"> -->
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/mine.js"></script>
</head>
<body>
    <ion-tabs class="tabs-icon-bottom tabs-icon-only">
 
        <ion-tab ng-controller="friends" title="친구" icon-on="ion-person" icon-off="ion-person">
            <ion-header-bar class="bar-dark">
                <a class="button button-clear button-white" ng-click="toggleEdit()">{{data.status}}</a>
                <h1 class="title">친구</h1>
                <a class="button button-clear button-white">
                    <i class="icon ion-person-add"></i>
                </a>
            </ion-header-bar>
 
            <ion-content>
                <ion-list show-delete="data.showDelete">
                    <ion-item ng-repeat="item in items" item="item">
                        {{item.name}}
                        <ion-delete-button class="ion-minus-circled" ng-click="onItemDelete(item)"></ion-delete-button>
                    </ion-item>
                </ion-list>
            </ion-content>
        </ion-tab>
 
        <ion-tab title="채팅" icon-on="ion-chatbubble" icon-off="ion-chatbubble">
        <!-- Tab 2 content -->
        </ion-tab>
 
        <ion-tab title="채널" icon-on="ion-ios-list" icon-off="ion-ios-list">
        <!-- Tab 3 content -->
        </ion-tab>
 
        <ion-tab title="더보기" icon-on="ion-more" icon-off="ion-more">
        <!-- Tab 4 content -->
        </ion-tab>
 
    </ion-tabs>
</body>
</html>

js/mine.js

  • Android 기기에서는 Tab의 위치가 기본으로 Top 으로 지정이 되고 iOS 에서는 Bottom 으로 지정이 되는 것을 항상 Bottom 으로 지정이 되도록 하였습니다.
  • 그리고 친구 리스트를 편집/완료 할 수 있는 기능을 추가 하였습니다.
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
# js/mine.js
 
angular.module('ionicApp', ['ionic'])
 
.config(function($ionicConfigProvider) {
    // 모든 OS 에서 Tab의 위치를 Bottom 으로 지정
    $ionicConfigProvider.tabs.position("bottom");
    $ionicConfigProvider.tabs.style("standard");
})
 
.controller('friends', function($scope) {
    $scope.data = {
        status: '편집',
        showDelete: false
    };
 
    $scope.items = [
        {name: '친구1'},
        {name: '친구2'}
    ];
 
    $scope.toggleEdit = function() {
        $scope.data.status = $scope.data.showDelete === false ? '완료' : '편집';
        $scope.data.showDelete = $scope.data.showDelete === false ? true : false;
    };
 
    $scope.onItemDelete = function(item) {
        $scope.items.splice($scope.items.indexOf(item), 1);
    };
})
 
;

결과


저작자표시

'하이브리드앱' 카테고리의 다른 글

Cordova(Phonegap) - ngCordova 설치하기  (0) 2015.08.24
Cordova(Phonegap) + Ionic Framework - '<a>' 태그로 전화걸기 기능 구현하기  (2) 2015.08.24
Cordova(Phonegap) + Ionic Framework - "Access-Control-Allow-Origin" 문제점 해결방법 (CORS)  (0) 2015.08.14
Cordova(Phonegap) + Ionic Framework - 위치정보(Geolocation) 사용하기  (4) 2015.08.11
하이브리드 앱 개발을 위한 Ionic 프레임워크 시작하기  (0) 2015.08.09
끄적끄적Yooni_PaPa 님의 블로그입니다.

티스토리툴바