1
多页我需要实现离子的框架是这样的jQuery的结构写一个HTML
<body>
<div data-role="page" id="page1">
<!--content -->
</div>
<div data-role="page" id="page2">
<!--content -->
</div>
</body>
我搜索的谷歌，但没能做到这一点。
目前，我在我的HTML有这样的：
<body ng-app="todo" ng-controller="TodoCtrl">
<div id="page1">
<header id="header" class="bar bar-header">
<h3 class="title">header 1 is long</h3>
</header>
<content padding="true" id="">
<div class="centered">
<img alt="Flash Anatomy Muscles" src="images/thinkand.jpg"
id="cover-img" />
</div>
</content>
<div class="bar bar-footer">
<div class="title">
<button id="a" class="button button-light"
ng-click="showAlert($event)">Origin</button>
<button id="b" class="button button-light"
ng-click="showAlert($event)">Insertion</button>
<button id="c" class="button button-light"
ng-click="showAlert($event)">Btn3</button>
<button id="d" class="button button-light"
ng-click="showAlert($event)">Btn4</button>
</div>
</div>
</div>
<div id="page2">
<header id="header" class="bar bar-header">
<h3 class="title">header 2</h3>
</header>
<content padding="true" id="">
<div class="centered">
random text over here
</div>
</content>
<div class="bar bar-footer">
<div class="title">
<button id="e" class="button button-light"
ng-click="showAlert($event)">Btn5</button>
<button id="f" class="button button-light"
ng-click="showAlert($event)">Btnn6</button>
</div>
</div>
</div>
</body>
它给了我这样的结果：
遵守以下：
两个网页的标题是重叠。
页面1（图片）的内容正在显示，第二页的文本正在放置在图像上。
第1页的页脚与第2页的页脚重叠。因此只显示第2页的按钮。
有人能指导我什么，我需要的离子做框架如jQuery的data-role财产？
P.S：我尝试在div中添加data-role='page'。这根本不会改变结果。