I need to implement something like this jQuery structure in ionic framework
<body>
<div data-role="page" id="page1">
<!--content -->
</div>
<div data-role="page" id="page2">
<!--content -->
</div>
</body>
I searched on google but not able to do that.
Currently I am having this in my 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>
It gives me this result:
Observe these:
Both pages' headers are overlapped.
Content of page 1 (image) is being displayed, and second page's text is being placed on image.
Footer of page 1 is being overlapped by footer of page 2. So only page 2's buttons are shown.
Can someone guide me what I need to do in ionic framework like data-role
property of jquery?
P.S: I tried adding data-role='page'
in the divs. That doesn't change the result at all.
Ionic
doesn't use anything of jQuery
at all, it uses Angular JS
and I suggest that you read this post.
About the single page structure, I'm afraid it isn't possible using Ionic
, because Ionic
implements ui-router, which creates routes for different templates (each template being a different html).
So, just get rid of jQuery
and start thinking Angular
as the posts suggests, you won't regret! ;)