OnsenUIのCSSドキュメントにセグメントの項目がありますがセグメントの項目をタップすることでセグメントより下部分に対応したページを表示させたいと思っています。わからないことはセグメントによるページ遷移とセグメントを配置しているページ領域に別のhtmlを読み込ませる方法です。わからないのでどなたかご教授をお願いします。
1 件の回答
本来こういうやり方が正しいかどうなのかわかりませんが、工夫すればそれらしいことはできます。
ページの切り替えにons-sliding-menu
を使用します。
ons-toolbar
にセグメントを配置し、タップ時にons-sliding-menu
のsetMainPage
メソッドを呼び出します。
各ページはons-toolbar
の下に隠れるので、上から45pxずらして表示させます。
あとは試行錯誤しながら実現してみてください。
<!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>