23636


お世話になっております。

機能としては、  
・コンテンツをスクロール表示  
・画面下部にタブバーを配置し、「前のページ」「次のページ」等でコンテンツ内容を切り替える  
このようなアプリなのですが、  
タブバーが固定されずコンテンツのスクロールに付いてきてしまいます。

解決法、対処法等ご教授願います。

※該当箇所(ページ)のみの最小限のコードにしてあります。  
タブバー部分のonClick関数には、  
現在表示中のコンテンツの1つ前、1つ後のキーが動的に渡される仕組みになっています。

**index.html**

[code]

    <!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 *; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
        <script src="components/loader.js"></script>
        <link rel="stylesheet" href="components/loader.css">
        <link rel="stylesheet" href="css/style.css">
        <link rel="stylesheet" href="lib/onsen/css/onsenui.css">
        <link rel="stylesheet" href="lib/onsen/css/onsen-css-components.css">
        <script src="lib/onsen/js/angular/angular.js"></script>
        <script src="lib/onsen/js/onsenui.js"></script>
        <script>
            ons.bootstrap();
        </script>
    </head>
    <body>
        <ons-page>
            <ons-toolbar>
                <div class="left">左</div><div class="center"></div><div class="right">右</div>
            </ons-toolbar>
    
            <!-- コンテンツ部分 ここから -->
            <div style="font-size:12pt;margin:10px;">コンテンツ2<br><br>１こんにちは。<br>ここに内容が書かれます。<br><br>２こんにちは。<br>ここに内容が書かれます。<br><br>３こんにちは。<br>ここに内容が書かれます。<br><br>４こんにちは。<br>ここに内容が書かれます。<br><br>５こんにちは。<br>ここに内容が書かれます。<br><br>６こんにちは。<br>ここに内容が書かれます。<br><br>７こんにちは。<br>ここに内容が書かれます。<br><br>８こんにちは。<br>ここに内容が書かれます。<br><br>９こんにちは。<br>ここに内容が書かれます。<br><br>１０こんにちは。<br>ここに内容が書かれます。<br><br>１１こんにちは。<br>いここに内容が書かれます。<br><br></div>
            <!-- コンテンツ部分 ここまで -->
    
            <ons-tabbar>
                <ons-tab label="トップ" ocClick="トップへ遷移"></ons-tab>
                <ons-tab label="前のページ" ocClick="前のコンテンツへ遷移(1)"></ons-tab>
                <ons-tab label="次のページ" ocClick="次のコンテンツへ遷移(3)"></ons-tab>
            </ons-tabbar>
        </ons-page>
    </body>
    </html>
    
[/code]

**追記 2016/04/01**  
暫定対応できたので追記します。  
user13314さんのコメントから、`<ons-tabbar></ons-tabbar>`での実現が不可能と判断し  
`<a></a>`タグ等やスタイルを使った方法に変更することにしました。  
下記のページをほぼそのまま使わせていただき、タブバー風に画面下部に固定することに成功しました。  
<http://weboook.blog22.fc2.com/blog-entry-412.html>

変更点  
・css/style.cssファイルに上記サイトのcss部分を追記。  
・index.htmlの`<ons-page></ons-page>`の部分を下記のように変更。(jQueryは使用せず。)

[code]

        <ons-page>
            <ons-toolbar>
                <div class="left">左</div><div class="center"></div><div class="right">右</div>
            </ons-toolbar>
    
            <!-- コンテンツ部分 ここから -->
            <div style="font-size:12pt;margin:10px;">コンテンツ2<br><br>１こんにちは。<br>ここに内容が書かれます。<br><br>２こんにちは。<br>ここに内容が書かれます。<br><br>３こんにちは。<br>ここに内容が書かれます。<br><br>４こんにちは。<br>ここに内容が書かれます。<br><br>５こんにちは。<br>ここに内容が書かれます。<br><br>６こんにちは。<br>ここに内容が書かれます。<br><br>７こんにちは。<br>ここに内容が書かれます。<br><br>８こんにちは。<br>ここに内容が書かれます。<br><br>９こんにちは。<br>ここに内容が書かれます。<br><br>１０こんにちは。<br>ここに内容が書かれます。<br><br>１１こんにちは。<br>いここに内容が書かれます。<br><br></div>
            <!-- コンテンツ部分 ここまで -->
    
            <nav id="menu-wrap">
                <ul id="menu">
                    <li><a href="#" onClick="トップへ遷移">トップ</a></li>
                    <li><a href="#" onClick="前のコンテンツへ遷移(1)">前のページ</a></li>
                    <li><a href="#" onClick="次のコンテンツへ遷移(3)">次のページ</a></li>
                </ul>
            </nav>
        </ons-page>
    
[/code]


CC BY-SA 3.0
2016-03-30T07:38:13.403
23618
2016-04-01T05:55:29.993
2016-04-01T05:55:29.993
13592
13592
question
monaca onsen-ui
<ons-tabbar></ons-tabbar>を画面下部に固定させる方法


各コンテンツは別ファイルかテンプレートとして分けた方がよいと思います。

[code]

    <ons-page>
        <ons-toolbar>
            <div class="left">左</div><div class="center"></div><div class="right">右</div>
        </ons-toolbar>
    
        <ons-tabbar>
            <ons-tab page="top.html" active="true" label="トップ" ocClick="トップへ遷移"></ons-tab>
            <ons-tab label="前のページ" ocClick="前のコンテンツへ遷移(1)"></ons-tab>
            <ons-tab label="次のページ" ocClick="次のコンテンツへ遷移(3)"></ons-tab>
        </ons-tabbar>
    
        <ons-template id="top.html">
            <!-- コンテンツ部分 ここから -->
            <div style="font-size:12pt;margin:10px;">コンテンツ2<br><br>１こんにちは。<br>ここに内容が書かれます。<br><br>２こんにちは。<br>ここに内容が書かれます。<br><br>３こんにちは。<br>ここに内容が書かれます。<br><br>４こんにちは。<br>ここに内容が書かれます。<br><br>５こんにちは。<br>ここに内容が書かれます。<br><br>６こんにちは。<br>ここに内容が書かれます。<br><br>７こんにちは。<br>ここに内容が書かれます。<br><br>８こんにちは。<br>ここに内容が書かれます。<br><br>９こんにちは。<br>ここに内容が書かれます。<br><br>１０こんにちは。<br>ここに内容が書かれます。<br><br>１１こんにちは。<br>いここに内容が書かれます。<br><br></div>
            <!-- コンテンツ部分 ここまで -->
        </ons-template>
    </ons-page>
    
[/code]


CC BY-SA 3.0
2016-03-31T01:27:48.153
23636
2016-03-31T01:27:48.153
13314
23618
answer