How to add a background image to section changer
This is how to add a background image to section changer.
//index.html
<div id="pageIndicatorPage" class="ui-page" data-enable-page-scroll="false">
<header class="ui-header">
<h2 class="ui-title">Page Indicator</h2>
</header>
<div id="pageIndicator" class="ui-page-indicator"></div>
<div id="hsectionchanger" class="ui-content">
<div>
<section class="ui-section-active" style="text-align:center" >
<h3> Page1 of 5</h3>
</section>
<section style="text-align:center">
<h3> Page2 of 5</h3>
</section>
<section style="text-align:center">
<h3> Page3 of 5</h3>
</section>
<section style="text-align:center">
<h3> Page4 of 5 </h3>
</section>
<section style="text-align:center">
<h3> Page5 of 5 </h3>
</section>
</div>
</div>
<script>
(function() {
var self = this,
page = document.getElementById( "pageIndicatorPage" ),
changer = document.getElementById( "hsectionchanger" ),
sectionChanger,
elPageIndicator = document.getElementById("pageIndicator"),
pageIndicator,
pageIndicatorHandler;
page.addEventListener( "pagebeforeshow", function() {
// Create PageIndicator
pageIndicator = tau.widget.PageIndicator(elPageIndicator, { numberOfPages: 5 });
pageIndicator.setActive(0);
sectionChanger = new tau.widget.SectionChanger(changer, {
circular: true,
orientation: "horizontal",
useBouncingEffect: true
});
});
page.addEventListener( "pagehide", function() {
sectionChanger.destroy();
pageIndicator.destroy();
});
// Indicator setting handler
pageIndicatorHandler = function (e) {
pageIndicator.setActive(e.detail.active);
};
// Bind the callback
changer.addEventListener("sectionchange", pageIndicatorHandler, false);
})();
</script>
//style.css
#pageIndicatorPage {
position: absolute;
left: 0px;
top: 0px;
background-image:url('../images/bg.png');
background-repeat: no-repeat;
width: 360px;
height: 360px;
}