teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

1

コードを追記

2017/04/30 05:38

投稿

Foxy
Foxy

スコア43

title CHANGED
File without changes
body CHANGED
@@ -4,4 +4,122 @@
4
4
 
5
5
  ###試したこと
6
6
  [ons-tabbarリファレンス](https://ja.onsen.io/v1/reference/ons-tabbar.html)
7
- 上サイト(onsenUIのドキュメント)を見て、「hide-tabs」を用いれば消せるのではないかと思いましたが、どこに実装すれば良いのかが分かりませんでした。
7
+ 上サイト(onsenUIのドキュメント)を見て、「hide-tabs」を用いれば消せるのではないかと思いましたが、どこに実装すれば良いのかが分かりませんでした。
8
+
9
+ ###追記
10
+ index.html
11
+ ```html
12
+ <!DOCTYPE HTML>
13
+ <html>
14
+ <head>
15
+ <meta charset="utf-8">
16
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
17
+ <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
18
+ <script src="components/loader.js"></script>
19
+ <script src="lib/onsenui/js/onsenui.min.js"></script>
20
+
21
+ <link rel="stylesheet" href="components/loader.css">
22
+ <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
23
+ <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
24
+ <link rel="stylesheet" href="css/style.css">
25
+
26
+ <script>
27
+ ons.ready(function() {
28
+ console.log("Onsen UI is ready!");
29
+ });
30
+
31
+ //画面遷移の処理
32
+ document.addEventListener('init', function(event) {
33
+ var page = event.target;
34
+
35
+ if (page.matches('#first-page')) {
36
+ // tab1.html → page1.html
37
+ page.querySelector('#push-button').onclick = function() {
38
+ document.querySelector('#navigator').pushPage('page1.html');
39
+ };
40
+
41
+ } else if (page.matches('#page1')) {
42
+ // page1.html → tab1.html
43
+ page.querySelector('#pop-button').onclick = function() {
44
+ document.querySelector('#navigator').popPage();
45
+ };
46
+ }
47
+ });
48
+ </script>
49
+ </head>
50
+ <body>
51
+ <!-- *************************** tabbar *************************** -->
52
+ <ons-tabbar var="tabbar">
53
+ <ons-tab
54
+ icon="map-o"
55
+ label="tab1"
56
+ page="navigator.html"
57
+ active="true"></ons-tab>
58
+ <ons-tab
59
+ icon="folder-open"
60
+ label="tab2"
61
+ page="tab2.html"></ons-tab>
62
+ <ons-tab
63
+ icon="search"
64
+ label="tab3"
65
+ page="tab3.html"></ons-tab>
66
+ </ons-tabbar>
67
+
68
+ <!-- *************************** page *************************** -->
69
+ <!-- page1 -->
70
+ <ons-template id="tab1.html">
71
+ <ons-page id="first-page">
72
+ <p style="text-align: center;">
73
+ This is the first page.
74
+ </p>
75
+
76
+ <!-- 画面遷移ボタン -->
77
+ <div id="push-button">
78
+ <p style="text-align: center;">
79
+ <ons-button>push-button</ons-button>
80
+ </p>
81
+ </div>
82
+ </ons-page>
83
+ </ons-template>
84
+
85
+ <!-- page2 -->
86
+ <ons-template id="tab2.html">
87
+ <ons-page id="second-page">
88
+ <p style="text-align: center;">
89
+ This is the second page.
90
+ </p>
91
+ </ons-page>
92
+ </ons-template>
93
+
94
+ <!-- page3 -->
95
+ <ons-template id="tab3.html">
96
+ <ons-page id="third-page">
97
+ <p style="text-align: center;">
98
+ This is the third page.
99
+ </p>
100
+ </ons-page>
101
+ </ons-template>
102
+
103
+ <!-- *************************** push-page *************************** -->
104
+ <ons-template id="page1.html">
105
+ <ons-page id="page1">
106
+ <p style="text-align: center;">
107
+ This is the push page.
108
+ </p>
109
+
110
+ <!-- pop-button -->
111
+ <div id="pop-button">
112
+ <p style="text-align: center;">
113
+ <ons-button>pop-button</ons-button>
114
+ </p>
115
+ </div>
116
+ </ons-page>
117
+ </ons-template>
118
+
119
+ </body>
120
+ </html>
121
+ ```
122
+ navigator.html
123
+ ```html
124
+ <ons-navigator id="navigator" page="tab1.html"></ons-navigator>
125
+ ```