様々なコンポーネントを併用した結果うまく動かなくなった

前提・実現したいこと

<ons-button>コンポーネント使用して
指定したページを表示するコードを既存のコードに追加したところ
<ons-splitter>コンポーネントがうまく動作しませんでした。
<ons-button>のタップイベントを残しつつ
<ons-splitter>コンポーネントが正常に動作するようにしたいです。
<ons-navigator>コンポーネントを使用してのページの切り替えの詳細至っては
プログラム初心者なので理解が乏しいです。

具体的な解決法を教えていただけると嬉しいです。
(※一部省略している箇所があります）

該当のソースコード

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
  <script src="components/loader.js"></script>
  <script src="lib/angular/angular.min.js"></script>
  <script src="lib/onsenui/js/onsenui.min.js"></script>
  <script src="lib/onsenui/js/angular-onsenui.min.js"></script>

  <link rel="stylesheet" href="components/loader.css">
  <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
  <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
  <link rel="stylesheet" href="css/style.css">

  <script>
    ons.bootstrap()
    ons.ready(function(){
    });

     window.fn = {};
    window.fn.open = function() {
      var menu = document.getElementById('menu');
      menu.open();
    };
    window.fn.load = function(page) {
      var content = document.getElementById('content');
      var menu = document.getElementById('menu');
      content
        .load(page)
        .then(menu.close.bind(menu));
    };

    document.addEventListener('show', function(event) {
      var page = event.target;
      var titleElement = document.querySelector('#toolbar-title');
      
      if (page.matches('#first-page')) {
        titleElement.innerHTML = 'ホーム画面';
      } else if (page.matches('#second-page')) {
        titleElement.innerHTML = '観光地図';
      } else if (page.matches('#third-page'))
      {
        titleElement.innerHTML = '投稿画面'
      }
    });


  </script>
</head>
<body>
　<ons-navigator var="myNavigator" page="tab.html>
　</ons-navigator>
   <ons-splitter>
    <ons-splitter-side id="menu" side="left" width="220px" collapse swipeable>
      <ons-page>
        <ons-list>
          <ons-list-header>メニュー画面</ons-list-header>
          <ons-list-item onclick="fn.load('tab.html')" tappable>Home
          </ons-list-item>
          <ons-list-item onclick="fn.load('settings.html')" tappable>Settings
          </ons-list-item>
          <ons-list-item onclick="fn.load('about.html')" tappable>about
          </ons-list-item>
        </ons-list>
      </ons-page>
    </ons-splitter-side>
    <ons-splitter-content id="content"page="tab.html">
    </ons-splitter-content>
  </ons-splitter>
  

 <template id="tab.html">
   <ons-page>
    <ons-toolbar>
      <div class="center" id="toolbar-title"></div>
    </ons-toolbar>
    <ons-tabbar var="myTabbar">
      <ons-tab
      icon="ion-home"
      label="ホーム"
      page="page1.html"
      active>
      </ons-tab>
      <ons-tab
      icon="ion-map"
      label="マップ"
      page="page2.html">
      </ons-tab>
      <ons-tab
      icon="ion-edit"
      label="投稿"
      page="page3.html">
      </ons-tab>
    </ons-tabbar>
  </ons-page>
 </template>

  <template id="page1.html">
    <ons-page id="first-page">
      <ons-toolbar>
       <div class="left">
          <ons-toolbar-button onclick="fn.open()">
            <ons-icon icon="ion-navicon, material:md-menu"></ons-icon>
          </ons-toolbar-button>
        </div>
        <div class="center">
          
        </div>
      </ons-toolbar>
      <p style="text-align: center; opacity: 0.6; padding-top: 20px;">
        //ここに表示させるものを入力
      </p>
    </ons-page>

  </template>
  <template id="page2.html">
    <ons-page id="second-page">
      <ons-toolbar>
       <div class="left">
          <ons-toolbar-button onclick="fn.open()">
            <ons-icon icon="ion-navicon, material:md-menu"></ons-icon>
          </ons-toolbar-button>
        </div>
        <div class="center">
          
        </div>
      </ons-toolbar>
      <p style="text-align: center; opacity: 0.6; padding-top: 20px;">
        <ons-button onclick="myNavigator.pushPage('map.html')">
          マップ表示
        </ons-button>
      </p>
    </ons-page>
  </template>

  <template id="page3.html">
    <ons-page id="third-page">
       <ons-toolbar>
       <div class="left">
          <ons-toolbar-button onclick="fn.open()">
            <ons-icon icon="ion-navicon, material:md-menu"></ons-icon>
          </ons-toolbar-button>
        </div>
        <div class="center">
        
        </div>
      </ons-toolbar>
      <p style="text-align: center; opacity: 0.6; padding-top: 20px;">
        //ここに表示させるものを入力
      </p>
    </ons-page>
  </template>

  <template id="settings.html">
    <ons-page id="settings-page">
      <ons-toolbar>
        <div class="left">
          <ons-toolbar-button onclick="fn.open()">
            <ons-icon icon="ion-navicon, material:md-menu"></ons-icon>
          </ons-toolbar-button>
        </div>
        <div class="center">
          Settings
        </div>
      </ons-toolbar>
    </ons-page>
  </template>

  <template id="about.html">
    <ons-page>
      <ons-toolbar>
        <div class="left">
          <ons-toolbar-button onclick="fn.open()">
            <ons-icon icon="ion-navicon, material:md-menu"></ons-icon>
          </ons-toolbar-button>
        </div>
        <div class="center">
          About
        </div>
      </ons-toolbar>
    </ons-page>
  </template>

  <template id="map.html">
    <ons-page id="map-page">
      <ons-toolbar>
        <div class="left">
          <ons-toolbar-button onclick="fn.open()">
            <ons-icon icon="ion-navicon, material:md-menu"></ons-icon>
          </ons-toolbar-button>
        </div>
        <div class="center">
          <iframe src="指定したサイト" width="640" height="480"></iframe>
        </div>
      </ons-toolbar>
    </ons-page>
  </template>


</body>
</html>

補足情報（FW/ツールのバージョンなど）

Cordovaバージョン:1.0.3
iPhone7 iOS:12.0.1

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

回答1件

ベストアンサー

とりあえず動くまで復旧させてみました

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: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
7  <script src="components/loader.js"></script>
8  <script src="lib/angular/angular.min.js"></script>
9  <script src="lib/onsenui/js/onsenui.min.js"></script>
10  <script src="lib/onsenui/js/angular-onsenui.min.js"></script>
11
12  <link rel="stylesheet" href="components/loader.css">
13  <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
14  <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
15  <link rel="stylesheet" href="css/style.css">
16
17  <script>
18    ons.bootstrap()
19    ons.ready(function(){
20    });
21
22    window.fn = {};
23    window.fn.open = function() {
24      var menu = document.getElementById('menu');
25      menu.open();
26    };
27    window.fn.load = function(page) {
28      var content = document.getElementById('content');
29      var menu = document.getElementById('menu');
30      content
31        .load(page)
32        .then(menu.close.bind(menu));
33    };
34
35    document.addEventListener('show', function(event) {
36      var page = event.target;
37      var titleElement = document.querySelector('#toolbar-title');
38
39      if (page.matches('#first-page')) {
40        titleElement.innerHTML = 'ホーム画面';
41      } else if (page.matches('#second-page')) {
42        titleElement.innerHTML = '観光地図';
43      } else if (page.matches('#third-page'))
44      {
45        titleElement.innerHTML = '投稿画面'
46      }
47    });
48
49
50  </script>
51</head>
52<body>
53   <ons-splitter>
54    <ons-splitter-side id="menu" side="left" width="220px" collapse swipeable>
55      <ons-page>
56        <ons-list>
57          <ons-list-header>メニュー画面</ons-list-header>
58          <ons-list-item onclick="fn.load('tab.html')" tappable>Home
59          </ons-list-item>
60          <ons-list-item onclick="fn.load('settings.html')" tappable>Settings
61          </ons-list-item>
62          <ons-list-item onclick="fn.load('about.html')" tappable>about
63          </ons-list-item>
64        </ons-list>
65      </ons-page>
66    </ons-splitter-side>
67    <ons-splitter-content id="content"page="tab.html">
68    </ons-splitter-content>
69  </ons-splitter>
70
71  <template id="tab.html">
72    <ons-page>
73      <ons-toolbar>
74        <div class="center" id="toolbar-title"></div>
75      </ons-toolbar>
76      <ons-tabbar var="myTabbar">
77        <ons-tab
78        icon="ion-home"
79        label="ホーム"
80        page="page1.html"
81        active>
82        </ons-tab>
83        <ons-tab
84        icon="ion-map"
85        label="マップ"
86        page="nav1.html">
87        </ons-tab>
88        <ons-tab
89        icon="ion-edit"
90        label="投稿"
91        page="page3.html">
92        </ons-tab>
93      </ons-tabbar>
94    </ons-page>
95  </template>
96
97  <template id="nav1.html">
98    <ons-navigator var="myNavigator" page="page2.html">
99    </ons-navigator>
100  </template>
101
102  <template id="page1.html">
103    <ons-page id="first-page">
104      <ons-toolbar>
105       <div class="left">
106          <ons-toolbar-button onclick="fn.open()">
107            <ons-icon icon="ion-navicon, material:md-menu"></ons-icon>
108          </ons-toolbar-button>
109        </div>
110        <div class="center">
111
112        </div>
113      </ons-toolbar>
114      <p style="text-align: center; opacity: 0.6; padding-top: 20px;">
115        //ここに表示させるものを入力
116      </p>
117    </ons-page>
118  </template>
119
120  <template id="page2.html">
121    <ons-page id="second-page">
122      <ons-toolbar>
123       <div class="left">
124          <ons-toolbar-button onclick="fn.open()">
125            <ons-icon icon="ion-navicon, material:md-menu"></ons-icon>
126          </ons-toolbar-button>
127        </div>
128        <div class="center">
129
130        </div>
131      </ons-toolbar>
132      <p style="text-align: center; opacity: 0.6; padding-top: 20px;">
133        <ons-button onclick="myNavigator.pushPage('map.html')">
134          マップ表示
135        </ons-button>
136      </p>
137    </ons-page>
138  </template>
139
140  <template id="page3.html">
141    <ons-page id="third-page">
142       <ons-toolbar>
143       <div class="left">
144          <ons-toolbar-button onclick="fn.open()">
145            <ons-icon icon="ion-navicon, material:md-menu"></ons-icon>
146          </ons-toolbar-button>
147        </div>
148        <div class="center">
149
150        </div>
151      </ons-toolbar>
152      <p style="text-align: center; opacity: 0.6; padding-top: 20px;">
153        //ここに表示させるものを入力
154      </p>
155    </ons-page>
156  </template>
157
158  <template id="settings.html">
159    <ons-page id="settings-page">
160      <ons-toolbar>
161        <div class="left">
162          <ons-toolbar-button onclick="fn.open()">
163            <ons-icon icon="ion-navicon, material:md-menu"></ons-icon>
164          </ons-toolbar-button>
165        </div>
166        <div class="center">
167          Settings
168        </div>
169      </ons-toolbar>
170    </ons-page>
171  </template>
172
173  <template id="about.html">
174    <ons-page>
175      <ons-toolbar>
176        <div class="left">
177          <ons-toolbar-button onclick="fn.open()">
178            <ons-icon icon="ion-navicon, material:md-menu"></ons-icon>
179          </ons-toolbar-button>
180        </div>
181        <div class="center">
182          About
183        </div>
184      </ons-toolbar>
185    </ons-page>
186  </template>
187
188  <template id="map.html">
189    <ons-page id="map-page">
190      <ons-toolbar>
191        <div class="left">
192        <div class="left"><ons-back-button>戻る</ons-back-button></div>
193          <ons-toolbar-button onclick="fn.open()">
194            <ons-icon icon="ion-navicon, material:md-menu"></ons-icon>
195          </ons-toolbar-button>
196        </div>
197        <div class="center">
198          <iframe src="指定したサイト" width="640" height="480"></iframe>
199        </div>
200      </ons-toolbar>
201    </ons-page>
202  </template>
203</body>
204</html>

投稿2018/11/30 14:40

編集2018/12/01 04:18

rururu3

総合スコア5545

haniwaoshi

2018/11/30 15:40

質問の内容が明確ではありませんでしたので一部質問内容とコードを変更しました。このコードの内容ですと <ons-button>コンポーネントのbuttonタップイベントが正常に動作しませでした。 <ons-button>のタップイベントを正常に動作しつつ <ons-splitter>を動作させるにはどのように<ons-navigator>を配置したらよろしいのでしょうか。又は他の方法はありますでしょうか。

haniwaoshi

2018/12/01 06:39

全ての機能が正常に動作しました。ありがとうございました。

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