Master
Do you want to give the user a sequence of actions? Use the Master component from Metro UI.
About
The master consists of a container and pages. To activate component add data-role="master" to element (container) and define pages. The pages is a block elements with class .page.
<div data-role="master">
<div class="page">Page 1</div>
<div class="page">Page 2</div>
<div class="page">Page 3</div>
<div class="page">Page 4</div>
</div>
Options
The master component has a number of options. You can use that options to set style and behavior of component.
| Options | Data-* | Default | Desc |
|---|---|---|---|
| effect | data-effect |
slide | The effect for master page change, can be slide, switch or fade |
| effectFunc | data-effect-func |
slide | The easing function for effect |
| duration | data-duration |
300 | The effect duration |
| controlPrev | data-control-prev |
< | Image for prev control. Can be symbol or icon from font or image tag |
| controlNext | data-control-next |
> | Image for next control. Can be symbol or icon from font or image tag |
| controlTitle | data-control-title |
Master, page $1 of $2 | String for master title. Can be contains $1 for current page and $2 for pages count |
| backgroundImage | data-background-image |
Background image for master. Also can be customized for each page with data-cover attribute for page. | |
| clsMaster | data-cls-master |
Additional class for master | |
| clsControls | data-cls-controls |
Additional class for master prev, next controls | |
| clsControlPrev | data-cls-control-prev |
Additional class for master prev control | |
| clsControlNext | data-cls-control-next |
Additional class for master next control | |
| clsControlTitle | data-cls-control-title |
Additional class for master title | |
| clsPages | data-cls-pages |
Additional class for master pages wrapper | |
| clsPage | data-cls-page |
Additional class for master page |
Setup title
You can change title for master component.
To change title use attribute data-control-title.
By default this option has value Master, page $1 of $2 where $1 - wrapper for current page number and $2 - wrapper for pages count.
<div data-role="master"
data-control-title="Ordering, step $1 of $2">
<div class="page">Page 1</div>
<div class="page">Page 2</div>
<div class="page">Page 3</div>
<div class="page">Page 4</div>
</div>
Controls
To change master control use attributes data-control-prev and data-control-next. Value for thees attributes can be symbol or valid html tag.
<div data-role="master"
data-control-title="Ordering, step $1 of $2"
data-control-prev="<span class='mif-arrow-left'></span>"
data-control-next="<span class='mif-arrow-right'></span>"
>
<div class="page">Page 1</div>
<div class="page">Page 2</div>
<div class="page">Page 3</div>
<div class="page">Page 4</div>
</div>
Effect
When pages change, this is accompanied by an effect. You have three effects: slide, switch and fade.
To set effect use attribute data-effect.
Also for slide effect you can use additional option effectFunc to set easing function for effect.
To set easing function use attribute data-effect-func.
<div data-role="master" data-effect="fade">
<div class="page">Page 1</div>
<div class="page">Page 2</div>
<div class="page">Page 3</div>
<div class="page">Page 4</div>
</div>
Background
You can set background for master component.
To set background use attribute data-background-image to set image or data-cls-master to set colored background.
<div data-role="master"
data-background-image="images/bg-2.jpg">
...
</div>
Also you can change background for each page with data-cover page attribute.
<div data-role="master">
<div class="page" data-cover="images/bg-2.jpg">Page 1</div>
<div class="page" data-cover="images/bg-3.jpg">Page 2</div>
<div class="page" data-cover="images/bg-4.jpg">Page 3</div>
</div>
Customize
You can customize master.
To customize use special options with cls prefix.
To set thees options use relevant attributes data-cls-*.
<div data-role="master"
data-control-prev="<span class='mif-arrow-left'></span>"
data-control-next="<span class='mif-arrow-right'></span>"
data-cls-master="ra-master drop-shadow"
data-control-title="$1 of $2"
data-cls-control-title="fg-green h1"
>
<div class="page" >Page 1</div>
<div class="page" >Page 2</div>
<div class="page" >Page 3</div>
</div>
Events
When carousel works, it generated the numbers of events. You can use callback for this events to behavior with component.
| Event | Data-* | Desc |
|---|---|---|
| onBeforePage(dir, index, page, element) | data-on-before-page |
Fired before page changed. Can return true or false. When return false, page not changed. Dir has one two string values next or prev |
| onBeforePrev(index, page, element) | data-on-before-prev |
Fired before page changed. Can return true or false. When return false, page not changed |
| onBeforeNext(index, page, element) | data-on-before-next |
Fired before page changed. Can return true or false. When return false, page not changed |
| onMasterCreate(el) | data-on-master-create |
Fired when master is created |
<div data-role="master" data-on-before-page="masterBeforePage">
...
</div>
<script>
function masterBeforePage(dir, index, page, el){
if (dir === "next" index === 0 && $('#domain_name').val() === "") {
Metro.validator.validate($('#domain_name'));
return false;
}
return true;
}
</script>
Methods
Component master has a number of methods to manipulate component.
| Method | Desc |
|---|---|
toPage(index) |
Go to specific page |
next() |
Go to next page |
prev() |
Go to prev page |
var master = Metro.getPlugin(element, 'master');
master.toPage(2);
master.next();
master.prev();