dojox/mobile/PageIndicator

Authors:Yoshiroh Kamiyama
Developers:Yoshiroh Kamiyama
since:V1.7

Introduction

PageIndicator displays a series of gray and white dots to indicate which page is currently being viewed. It can typically be used with dojox/mobile/SwapView. It is also internally used in dojox/mobile/Carousel.

../../_images/PageIndicator.png

The PageIndicator widget uses the dojo’s pub/sub event system to communicate with the other widgets. It subscribes to the “/dojox/mobile/viewChanged” message, and refreshes the indicator status.

Usage

To use PageIndicator with SwapView, place it as a sibling of the SwapView widgets. Then the PageIndicator searches its parent DOM nodes for the SwapView widgets to create an indicator that reflects them.

Constructor Parameters

Parameter Type Default Description
refId String “” An ID of a DOM node to be searched. Siblings of the reference node will be searched for views. If not specified, this.domNode will be the reference node.

Examples

Declarative example

require([
  "dojox/mobile",
  "dojox/mobile/parser",
  "dojox/mobile/SwapView",
  "dojox/mobile/PageIndicator"
]);
html,body{
  height: 100%;
  overflow: hidden;
  margin: 0;
}
img {
  -webkit-box-shadow: 5px 5px 5px rgba(0,0,0,.5);
  width: 90%;
}
h1 {
  background-color: #3a3a3b;
  color: #b1b1b1;
  font: bold 16px arial,helvetica,clean,sans-serif;
  margin: 0 0 15px 0;
  height: 45px;
  line-height: 45px;
  -webkit-box-shadow: 0 4px 4px rgba(0,0,0,.5);
}
.mblSwapView {
  text-align: center;
}
<body style="visibility:hidden;background-color:#6d6d6d">
  <div data-dojo-type="dojox/mobile/SwapView">
    <h1>My Pictures</h1>
    <img src="images/pic1.jpg">
  </div>

  <div data-dojo-type="dojox/mobile/SwapView">
    <h1>May 3, 2011</h1>
    <img src="images/pic2.jpg">
  </div>

  <div data-dojo-type="dojox/mobile/SwapView">
    <h1>May 3, 2011</h1>
    <img src="images/pic3.jpg">
  </div>

  <div data-dojo-type="dojox/mobile/PageIndicator"
       data-dojo-props='fixed:"bottom"'></div>
</body>
../../_images/PageIndicator-anim.gif
Error in the documentation? Can’t find what you are looking for? Let us know!