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”);
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:
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");
});
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();
});
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:
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');
});
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();
});