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

質問編集履歴

3

revised code

2017/05/18 08:18

投稿

teratech
teratech

スコア17

title CHANGED
File without changes
body CHANGED
@@ -33,7 +33,7 @@
33
33
  </ons-page>
34
34
 
35
35
  <ons-template id="page1.html">
36
- <ons-page>
36
+ <ons-page page="page1">
37
37
  <ons-toolbar>
38
38
  <div class="center">Page1</div>
39
39
  </ons-toolbar>
@@ -63,7 +63,7 @@
63
63
  </ons-template>
64
64
 
65
65
  <ons-template id="page2.html">
66
- <ons-page>
66
+ <ons-page id="page2">
67
67
  <ons-toolbar>
68
68
  <div class="center">Page2</div>
69
69
  </ons-toolbar>
@@ -83,7 +83,7 @@
83
83
  </ons-template>
84
84
 
85
85
  <ons-template id="page3.html">
86
- <ons-page>
86
+ <ons-page id="page3">
87
87
  <ons-toolbar>
88
88
  <div class="center">Page3</div>
89
89
  </ons-toolbar>

2

コードの追加

2017/05/18 08:18

投稿

teratech
teratech

スコア17

title CHANGED
File without changes
body CHANGED
@@ -12,9 +12,18 @@
12
12
 
13
13
  ###該当のソースコード
14
14
  ```html
15
+ <!DOCTYPE HTML>
16
+ <html>
17
+ <head>
18
+ <meta charset="UTF-8">
19
+ <script src="components/loader.js"></script>
20
+ <link rel="stylesheet" href="components/loader.css">
21
+ <link rel="stylesheet" href="css/style.css">
22
+ <script src="js/demo.js"></script>
23
+ </head>
15
24
  <body>
16
25
  <ons-navigator page="page1.html" var="app.navi"></ons-navigator>
17
-
26
+
18
27
  <ons-page>
19
28
  <ons-tabbar var="tabbar">
20
29
  <ons-tab page="page1.html" label="page1" icon="ion-home" active="true"></ons-tab>
@@ -39,7 +48,7 @@
39
48
  </ons-col>
40
49
  </ons-row>
41
50
  </ons-list-item>
42
-
51
+
43
52
  <ons-list-item modifier="chevron" class="item" id="page1_2">
44
53
  <ons-row>
45
54
  <ons-col class="title">
@@ -54,29 +63,96 @@
54
63
  </ons-template>
55
64
 
56
65
  <ons-template id="page2.html">
66
+ <ons-page>
67
+ <ons-toolbar>
68
+ <div class="center">Page2</div>
69
+ </ons-toolbar>
70
+
71
+ <ons-list>
72
+ <ons-list-item modifier="chevron" class="item" id="page2_1">
73
+ <ons-row>
74
+ <ons-col class="title">
57
- ・・・
75
+ <header>
76
+ <span class="item-title">Page2_1</span>
77
+ </header>
78
+ </ons-col>
79
+ </ons-row>
80
+ </ons-list-item>
81
+ </ons-list>
82
+ </ons-page>
58
83
  </ons-template>
59
84
 
60
85
  <ons-template id="page3.html">
86
+ <ons-page>
87
+ <ons-toolbar>
88
+ <div class="center">Page3</div>
89
+ </ons-toolbar>
90
+
91
+ <ons-list>
92
+ <ons-list-item modifier="chevron" class="item" id="page3_1">
93
+ <ons-row>
94
+ <ons-col class="title">
61
- ・・・
95
+ <header>
96
+ <span class="item-title">Page3_1</span>
97
+ </header>
98
+ </ons-col>
99
+ </ons-row>
100
+ </ons-list-item>
101
+ </ons-list>
102
+ </ons-page>
62
103
  </ons-template>
63
104
 
64
105
  <ons-template id="page1_1.html">
65
106
  <ons-page id="page1_1">
66
107
  <ons-toolbar id="onstoolbar">
67
108
  <div class="left"><ons-back-button>Back</ons-back-button></div>
68
- <div id="topmsg" class="center">Page1_1</div>
109
+ <div class="center">Page1_1</div>
69
110
  </ons-toolbar>
70
111
  <ons-list>
71
- ・・・
112
+ <p>Page1_1です。</p>
72
113
  </ons-list>
73
114
  </ons-page>
74
115
  </ons-template>
75
116
 
76
117
  <ons-template id="page1_2.html">
118
+ <ons-page id="page1_2">
119
+ <ons-toolbar id="onstoolbar">
120
+ <div class="left"><ons-back-button>Back</ons-back-button></div>
121
+ <div class="center">Page1_2</div>
122
+ </ons-toolbar>
77
- ・・・
123
+ <ons-list>
124
+ <p>Page1_2です。</p>
125
+ </ons-list>
126
+ </ons-page>
78
127
  </ons-template>
128
+
129
+ <ons-template id="page2_1.html">
130
+ <ons-page id="page2_1">
131
+ <ons-toolbar id="onstoolbar">
132
+ <div class="left"><ons-back-button>Back</ons-back-button></div>
133
+ <div class="center">Page2_1</div>
134
+ </ons-toolbar>
135
+ <ons-list>
136
+ <p>Page2_1です。</p>
137
+ </ons-list>
138
+ </ons-page>
139
+ </ons-template>
140
+
141
+ <ons-template id="page3_1.html">
142
+ <ons-page id="page3_1">
143
+ <ons-toolbar id="onstoolbar">
144
+ <div class="left"><ons-back-button>Back</ons-back-button></div>
145
+ <div class="center">Page3_1</div>
146
+ </ons-toolbar>
147
+ <ons-list>
148
+ <p>Page3_1です。</p>
149
+ </ons-list>
150
+ </ons-page>
151
+ </ons-template>
152
+ </body>
153
+ </html>
79
154
  ```
155
+ demo.js
80
156
  ```javascript
81
157
  var app = ons.bootstrap();
82
158
 

1

発生している問題の説明を具体的に変更。

2017/05/18 08:11

投稿

teratech
teratech

スコア17

title CHANGED
File without changes
body CHANGED
@@ -6,7 +6,8 @@
6
6
 
7
7
  ###発生している問題・エラーメッセージ
8
8
  元々一つのページから各機能の画面に遷移させていたのですが、今回タブを入れたことにより、画面遷移がうまくいかずに立ち往生しております。
9
+ 具体的には、タブでの画面遷移はできるのですが、ページ内の画面遷移ボタンが効かない状況(要素をタップしてもpushPageが機能しない状態)です。
9
- タブ設置の仕方悪いものと思いますが、どう修正すべきかよく分からない状況です。
10
+ tabbarを削除すると機能するで、tabbar問題と思われるのですが、どう修正すべきかよく分からない状況です。
10
11
  修正方法をご教示頂ければ幸いです。
11
12
 
12
13
  ###該当のソースコード