ons-tabの非表示

###前提・実現したいこと
MonacaでOnsenUI v2を使ったアプリを製作していて、ons-tabを用いてページの切り替えを行っているのですが、ons-tab内のページでpush-pageを用いた画面遷移を実行した場合に、tabを非表示にする方法が分かりません。
良ければアドバイスをいただけると嬉しいです。

###試したこと
ons-tabbarリファレンス
上サイト(onsenUIのドキュメント)を見て、「hide-tabs」を用いれば消せるのではないかと思いましたが、どこに実装すれば良いのかが分かりませんでした。

###追記
index.html

html
1<!DOCTYPE HTML>
2<html>
3<head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
6    <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
7    <script src="components/loader.js"></script>
8    <script src="lib/onsenui/js/onsenui.min.js"></script>
9
10    <link rel="stylesheet" href="components/loader.css">
11    <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
12    <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
13    <link rel="stylesheet" href="css/style.css">
14
15    <script>
16        ons.ready(function() {
17            console.log("Onsen UI is ready!");
18        });
19        
20        //画面遷移の処理
21        document.addEventListener('init', function(event) {
22            var page = event.target;
23
24            if (page.matches('#first-page')) {
25                // tab1.html → page1.html
26                page.querySelector('#push-button').onclick = function() {
27                    document.querySelector('#navigator').pushPage('page1.html');
28                };
29            
30            } else if (page.matches('#page1')) {
31                // page1.html → tab1.html 
32                page.querySelector('#pop-button').onclick = function() {
33                    document.querySelector('#navigator').popPage();
34                };
35            }
36        });
37    </script>
38</head>
39<body>
40<!-- *************************** tabbar *************************** -->
41<ons-tabbar var="tabbar">
42    <ons-tab
43        icon="map-o"
44        label="tab1"
45        page="navigator.html"
46        active="true"></ons-tab>
47    <ons-tab
48        icon="folder-open"
49        label="tab2" 
50        page="tab2.html"></ons-tab>
51    <ons-tab
52        icon="search"
53        label="tab3"
54        page="tab3.html"></ons-tab>
55</ons-tabbar>
56    
57<!-- *************************** page *************************** -->
58<!-- page1 -->
59<ons-template id="tab1.html">
60<ons-page id="first-page">
61    <p style="text-align: center;">
62        This is the first page.
63    </p>
64    
65    <!-- 画面遷移ボタン -->
66    <div id="push-button">
67    <p style="text-align: center;">
68        <ons-button>push-button</ons-button>
69    </p>
70    </div>
71</ons-page>
72</ons-template>
73
74<!-- page2 -->
75<ons-template id="tab2.html">
76<ons-page id="second-page">
77    <p style="text-align: center;">
78        This is the second page.
79    </p>
80</ons-page>
81</ons-template>
82
83<!-- page3 -->
84<ons-template id="tab3.html">
85<ons-page id="third-page">
86    <p style="text-align: center;">
87        This is the third page.
88    </p>
89</ons-page>
90</ons-template>
91
92<!-- *************************** push-page *************************** -->
93<ons-template id="page1.html">
94<ons-page id="page1">
95    <p style="text-align: center;">
96        This is the push page.
97    </p>
98    
99    <!-- pop-button -->
100    <div id="pop-button">
101    <p style="text-align: center;">
102        <ons-button>pop-button</ons-button>
103    </p>
104    </div>
105</ons-page>
106</ons-template>
107
108</body>
109</html>

navigator.html

html
1<ons-navigator id="navigator" page="tab1.html"></ons-navigator>

行動規範の内容に同意します

回答2件

ベストアンサー

以下のような感じが、一応は求められているような動きをするコードになります。

解説後述します。

JavaScript
1<!DOCTYPE HTML>
2<html>
3<head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
6    <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
7    <script src="components/loader.js"></script>
8    <script src="lib/onsenui/js/onsenui.min.js"></script>
9
10    <link rel="stylesheet" href="components/loader.css">
11    <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
12    <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
13    <link rel="stylesheet" href="css/style.css">
14
15    <script>
16        ons.ready(function() {
17            console.log("Onsen UI is ready!");
18        });
19
20        //画面遷移の処理
21        document.addEventListener('init', function(event) {
22            var page = event.target;
23
24            if (page.matches('#first-page')) {
25                // tab1.html → page1.html
26                page.querySelector('#push-button').onclick = function() {
27                    document.querySelector('#navigator').pushPage('page1.html');
28                };
29
30            } else if (page.matches('#page1')) {
31                // page1.html → tab1.html 
32                page.querySelector('#pop-button').onclick = function() {
33                    document.querySelector('#navigator').popPage();
34                };
35            }
36        });
37    </script>
38</head>
39<body>
40
41<ons-navigator id="navigator" page="tab.html"></ons-navigator> 
42
43
44<!-- *************************** tabbar *************************** -->
45<ons-template id="tab.html">
46<ons-tabbar var="tabbar">
47    <ons-tab
48        icon="map-o"
49        label="tab1"
50        page="tab1.html"
51        active="true"></ons-tab>
52    <ons-tab
53        icon="folder-open"
54        label="tab2" 
55        page="tab2.html"></ons-tab>
56    <ons-tab
57        icon="search"
58        label="tab3"
59        page="tab3.html"></ons-tab>
60</ons-tabbar>
61</ons-template>
62
63<!-- *************************** page *************************** -->
64<!-- page1 -->
65<ons-template id="tab1.html">
66<ons-page id="first-page">
67    <p style="text-align: center;">
68        This is the first page.
69    </p>
70
71    <!-- 画面遷移ボタン -->
72    <div id="push-button">
73    <p style="text-align: center;">
74        <ons-button>push-button</ons-button>
75    </p>
76    </div>
77</ons-page>
78</ons-template>
79
80<!-- page2 -->
81<ons-template id="tab2.html">
82<ons-page id="second-page">
83    <p style="text-align: center;">
84        This is the second page.
85    </p>
86</ons-page>
87</ons-template>
88
89<!-- page3 -->
90<ons-template id="tab3.html">
91<ons-page id="third-page">
92    <p style="text-align: center;">
93        This is the third page.
94    </p>
95</ons-page>
96</ons-template>
97
98<!-- *************************** push-page *************************** -->
99<ons-template id="page1.html">
100<ons-page id="page1">
101    <p style="text-align: center;">
102        This is the push page.
103    </p>
104
105    <!-- pop-button -->
106    <div id="pop-button">
107    <p style="text-align: center;">
108        <ons-button>pop-button</ons-button>
109    </p>
110    </div>
111</ons-page>
112</ons-template>
113
114</body>
115</html>

index.htmlでは、ons-navigatorのみが有効です。
ons-navigatorはons-tabのページを呼び出します。そしてons-tab内の１ページからpushPageを行うと、ons-tabごとページが切り替わります。

ちょっと伝わりづらかったかもしれませんが、従来のコードは「ons-navigatorをtab内部で定義している」状態でした。
このような場合、ons-tabはずっと有効なままで、tab内のページだけが遷移していくような動きになります。

ons-navigatorの動きをつかむまでは結構大変ですが頑張ってください。

ちなみにons-navigatorの使い方として、今回の応用編で例えばページ全体をnavigatorで切り替えるのではなく、ページの一部を遷移させるようなこともできます。
ひとつのページ内で複数のons-navigatorを利用し、ページの上半分と下半分を分離させて複雑な画面遷移をすることも、やろうと思えば可能です。（おそらく・・）

投稿2017/04/30 12:43

akabee

総合スコア1947

Foxy

2017/05/01 07:01

回答ありがとうございます。自分の思い浮かべていた通りの動作です、助かりました！ tabの内部と外部の定義だけで違いがあるとは思っていませんでした。ons-navigatorは画面遷移のために必要なコンポーネントだというようにしか捉えていなかったので、もう少し詳しく勉強してみようと思います。 ons-navigatorの扱いでそんなこともできるのですね...。その画面遷移を実装できたら面白そうなので、時間が余ったときに少し挑戦してみようと思います！たぶん自分の技量じゃできませんが(笑)

akabee

2017/05/01 10:15

「画面遷移」というのを、ページのリンク、というように考えると分かりにくいかもしれません。各htmlはページの定義で、ons-navigatorはそれを必要に応じて呼び出すコンポーネント、と考えると理解しやすいかもしれません。なので画面分割してそれぞれにons-navigatorを定義すれば、上半分だけ次のhtmlを呼び出す、みたいなことになります。従来のWebページのaタグではなかなか実現できないですね。なんにせよ、色々試すと見えてくると思います。頑張ってください！

行動規範の内容に同意します

恐らく、ons-navigatorをtab内部で定義しているのではないでしょうか？
ons-navigatorのトップページがons-tabになるようにすれば、やりたい動作になるのではないかと思います。

解決しなかった場合、発生しているコードを簡易的で良いので見せて下さい。再現させて確認します。

投稿2017/04/29 10:12

akabee

総合スコア1947

Foxy

2017/04/30 05:35

用事が立て込んでて返事遅れました、すいません。 <ons-navigator>はnavigator.htmlで定義しているので大丈夫だと思います！ tab1.htmlからpage1.htmlへと画面遷移した際にpage1.htmlではtabを非表示にしたいのですが、どうしたら良いのかが分かりません。コードを追記したので見ていただけると幸いです。

akabee

2017/04/30 12:44

別の回答欄を使わせていただきました。

行動規範の内容に同意します

あなたの回答