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.
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>
