19699


OnsenUIのCSSドキュメントにセグメントの項目がありますがセグメントの項目をタップすることでセグメントより下部分に対応したページを表示させたいと思っています。わからないことはセグメントによるページ遷移とセグメントを配置しているページ領域に別のhtmlを読み込ませる方法です。わからないのでどなたかご教授をお願いします。


CC BY-SA 3.0
2015-12-04T12:22:23.423
19628
2015-12-08T05:02:21.903
2015-12-07T15:16:38.347
13526
13526
question
monaca onsen-ui
OnsenUI上のHTML下のセグメントで別のHTMLを表示させる領域を確保するには


本来こういうやり方が正しいかどうなのかわかりませんが、工夫すればそれらしいことはできます。  
ページの切り替えに`ons-sliding-menu`を使用します。  
`ons-toolbar`にセグメントを配置し、タップ時に`ons-sliding-menu`の`setMainPage`メソッドを呼び出します。  
各ページは`ons-toolbar`の下に隠れるので、上から45pxずらして表示させます。

あとは試行錯誤しながら実現してみてください。

[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">
        <script>
            ons.bootstrap();
        </script>
        <style>
            #headerSegment {
                width:280px;
                margin: auto;
            }
            #page1Div {
                margin-top: 45px;
                height: 100%;
                background-color: #fbb;
            }
            #page2Div {
                margin-top: 45px;
                height: 100%;
                background-color: #bfb;
            }
            #page3Div {
                margin-top: 45px;
                height: 100%;
                background-color: #bbf;
            }
        </style>
    </head>
    <body>
        <ons-sliding-menu var="app.menu" main-page="one.html" swipeable="false"></ons-sliding-menu>
        <ons-toolbar fixed-style>
            <div class="center">
                <div id="headerSegment" class="button-bar">
                  <div class="button-bar__item" onclick="app.menu.setMainPage('one.html')">
                    <input type="radio" name="segment-a" checked>
                    <button class="button-bar__button">One</button>
                  </div>
    
                  <div class="button-bar__item" onclick="app.menu.setMainPage('two.html')">
                    <input type="radio" name="segment-a">
                    <button class="button-bar__button">Two</button>
                  </div>
    
                  <div class="button-bar__item" onclick="app.menu.setMainPage('three.html')">
                    <input type="radio" name="segment-a">
                    <button class="button-bar__button">Three</button>
                  </div>
                </div>
            </div>
        </ons-toolbar>    
        <ons-template id="one.html">
            <ons-page>
                <div id="page1Div">
                    one.html
                </div>
            </ons-page>
        </ons-template>
        <ons-template id="two.html">
            <ons-page>
                <div id="page2Div">
                    two.html
                </div>
            </ons-page>
        </ons-template>
        <ons-template id="three.html">
            <ons-page>
                <div id="page3Div">
                    three.html
                </div>
            </ons-page>
        </ons-template>
    </body>
    </html>
    
[/code]


CC BY-SA 3.0
2015-12-07T04:36:49.363
19699
2015-12-08T05:02:21.903
2015-12-08T05:02:21.903
9566
9566
19628
answer