Get a Viewport
The Viewport is obtained through the API:
mui.getViewport(<id>);
and there are two standards Viewports shortcuts:
mui.screen = mui.getViewport(“mui-screen”);
mui.viewport = mui.getViewport(“mui-viewport”);
Show a new page:
To show a new determined page, a simple way is to invoke the showPage method of the corresponding Viewport, passing as parameters the page ID and the effect
<Viewport Object>.showPage(<page id>,<effect>);
The possible effects when building this manual are:
- DEF
- NONE
- FADE
- SLIDE_RIGHT
- SLIDE_LEFT
- SLIDE_UP
- SLIDE_DOWN
- OVERFLY_IN
- OVERFLY_OUT
- FLOAT_IN
- FLOAT_OUT
Where DEF is the default effect of the platform, wich can be get or set using:
mui.DEF_ANDROID_EFFECT - Default transition for Android.
mui.DEF_IOS_EFFECT - Default transition for iOS.
mui.DEF_WIN_EFFECT - Default transition for Windows Phone.
mui.DEF_WEBAPP_EFFECT - Default transition for WebApp.
Example:
$("#buttom1").on("click", function(e) {
mui.viewPort.showPage("page2", "DEF");
});
Go back
Note that, the concept of closing a page don't exist. There should always be a page on the view within the viewport, so a page leads to another and so on.
Sometimes the user will want to return to the previous page. Android devices generally have a button for this action, but this doesn't happen on other platforms with iOS, so we need to program the action of going back.
For it the history.back () method is invoked.
Example
$("#backbutton").on("click", function(e) {
mui.history.back();
});
Show a Panel
To display a panel, invoke the method showPanel of the corresponding Viewport, passing to it as parameters the page ID and the effect.
The possible effects at the moment of building the present manual are:
- NONE
- FADE
- SLIDE_RIGHT
- SLIDE_LEFT
- SLIDE_UP
- SLIDE_DOWN
- FLOAT_RIGHT
- FLOAT_LEFT
- FLOAT_UP
- FLOAT_DOWN
Example:
$("#panelbutton").on("click", function(e) {
mui.screen.showPanel('panel1', 'FLOAT_UP');
});
If the panel is in the mui-screen then the invocation would be:
$("#panelbutton").on("click", function(e) {
mui.screen.showPanel('panel1', 'FLOAT_UP');
});
Close a Panel
Unlike pages, the panels must be closed.
When it gets a click / touch within the viewport but outside the panel, it will close automatically. However, if the click / touch is outside the viewport it will not happen, so you must invoke the method closePanel of the corresponding viewport.
Example:
$("#closepanelbutton").on("click", function(e) {
mui.viewPort.closePanel();
});