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'。這根本不會改變結果。