Authors:Yoshiroh Kamiyama
Developers:Yoshiroh Kamiyama


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.


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.


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.


Declarative example

  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 data-dojo-type="dojox/mobile/SwapView">
    <h1>May 3, 2011</h1>
    <img src="images/pic2.jpg">

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

  <div data-dojo-type="dojox/mobile/PageIndicator"
Error in the documentation? Can’t find what you are looking for? Let us know!