mui--three ways to create a page

First: When initializing, use Mui.init () to create a sub-page
In general, the target page is divided into the main page and the content page, which are grouped together. By writing the structure of the main page in the main page, you can create a child page at initialization time.

Mui.init ({
    subpages:[{
      url:your-subpage-url,//child page HTML address, support for local address and network address
      id:your-subpage-id,//child page flag
      styles:{
        top:subpage-top-position,//Sub-page top position
        bottom:subpage-bottom-position,//sub-page at the bottom of the position
        width: subpage-width,//Child page width, default is 100%
        height:subpage-height,//child page height, default is 100%
        ...
      },
      extras:{}// Additional extended Parameters
    }]
  });

It is recommended to set the bottom value at the same time, otherwise the 5+ runtime is calculated based on height 100%, which may cause the actual bottom position of the page to exceed the screen range; left and right. Scenario: Requires a drop-down refresh, pull-up load. The following introduction ~ ~ ~
The second type: Open a new page

Mui.openwindow ({
    url:new-page-url,
    Id:new-page-id,
    styles:{
      top:newpage-top-position,//The top position of the new page
      bottom:newage-bottom-position,//new Page bottom position
      width:newpage-width,//new page width, default is 100%
      height:newpage-height ,//New page height, defaults to 100% ...
    },
    extras:{...
      //Custom extension parameters, which can be used to process the value of the page between pages
    },
    createnew:false,/ /whether to repeat the creation of WebView with the same ID, default to False: Do not repeat creation, direct display
    show:{
      autoshow:true,//Page loaded event occurs automatically, default is True
      anishow:animationtype,//page display animation, default to "Slide-in-right",
      duration:animationtime//page animation duration, Android platform default 100 milliseconds, iOS platform default 200 milliseconds;
    },
    waiting:{
      autoshow:true,//automatically display the Wait box, default to True
      title: ' Loading ... ',//Wait for the dialog box to display the prompt content
      options:{
        width:waiting-dialog-widht,//The width of the background area of the Wait box, by default automatically calculates the appropriate width based on the content
        height:waiting-dialog-height,/ /wait box background area height, by default automatically calculates the appropriate height according to the content ...}}
)

Style: If the top value is not "0px", it is recommended to set bottom value at the same time, otherwise 5+ runtime according to the height of 100% calculation, may cause the page real bottom position beyond the screen range of the situation;

In general, it is not necessary to set so many parameters, because the default parameters can satisfy most requirements.

Example one: basic use

Tap for MUI-encapsulated Click events, refer to the Gesture Events section
document.getElementById (' info '). AddEventListener (' tap ', function () {
  //open About page
  mui.openwindow ({
    URL: ' examples/info.html ', 
    ID: ' Info '
  })
;

Example two: From a page Open b page, b page for a need to load from the Server List page, if the B page loaded event occurs when it is displayed, because the server data has not been loaded, the list page is empty, the user experience is not good The user experience can be improved in such a way that the best user experience should be preloaded:

The first step, b page Loaded event occurs, does not automatically display;

A page opens the B page, setting show's AutoShow to False, then the B page is not automatically displayed after its loaded event,
mui.openwindow ({
    URL: ' b.html ', 
    show:{
      Autoshow:false
    }
  });

Second, after the B page to get the list data, and then close the wait box, display b page

b page onload gets list data from the server;
window.onload = function () {
  //Get data from server
  ....
  The business data is finished and inserted into the current page DOM;
  //NOTE: If you are an AJAX request, you need to place the following code after processing the AJAX response data;
  Mui.plusready (function () {
    //close Wait box
    plus.nativeUI.closeWaiting ();
    Show current page
    mui.currentWebview.show ();
  });
}

Application scenario: When a new page is opened

The third type: Pre-load page

The so-called preload technology is to create the target page in advance when the user has not triggered the page jump, so that when the user jumps, you can immediately switch the page, save time to create a new page, improve the app experience. MUI provides two ways to implement page preloading.

Mode one: configured by the Preloadpages parameter in the Mui.init method.

Mui.init ({
  preloadpages:[
    {
      url:prelaod-page-url,
      Id:preload-page-id,
      styles:{},// Window parameters
      extras:{},//Custom extension parameters
      subpages:[{},{}]//Pre-load Page sub-page
    }
  ],
  preloadlimit:5//the number of preloaded windows limit ( Once exceeded, FIFO) default No Limit
});

This method can preload multiple pages, but does not return a reference that preloaded each page. Mode two: Pre-loading by Mui.preload method.

var page = mui.preload ({
    url:new-page-url,
    id:new-page-id,//default uses the URL of the current page as the ID
    styles:{},//window parameter
    extras:{}//Custom extension Parameters
});

This method returns a reference to the corresponding webview immediately, but only one page can be preloaded at a time. If you need to load multiple pages, you will need to call multiple times. Scenario: You want to load a page that you don't want to use temporarily.