Hbuilder Development App Tutorial 08-Several ways to open a page

Description

The last section said the implementation of the list page, where several pages are opened in a way that is not described in detail,

This section details the differences in how the following pages are opened.

Several ways to open a page

1. Creating a sub-page when initializing

2. Open a new page directly

3. Pre-load page

Example 1: Creating a child page when initializing

Mui.init ({    subpages: [{        url:your-subpage-url,///Sub-page HTML address, support local address and network address        Id:your-subpage-id,//Sub-page flag 
   styles: {            top:subpage-top-position,//Sub-page top position            bottom:subpage-bottom-position,//Sub-page bottom position            width:sub Page-width,//Sub-page width, default to 100%            Height:subpage-height,//Sub-page height, default to 100% ...        },        Extras: {}//Extra extension parameter c11/>}]});

2. Open a new page directly

Mui.openwindow ({    url:new-page-url,    Id:new-page-id,    styles: {        top:newpage-top-position,//New page Face top position        bottom:newage-bottom-position,//new page bottom position        width:newpage-width,//New page width, default to 100%        Height:newpage- Height,//New page heights, default to 100% ...    },    Extras: {...//        Custom extension parameters, which can be used to process page-by value    }    show: {        Autoshow:true,//Page loaded event occurs automatically display, default to 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 show wait box, default to True        title: ' Loading ... ',//wait for the dialog to display the prompt content        options: {            width:waiting-dialog-widht,// Waiting box background area width, by default automatically calculates the appropriate width            height:waiting-dialog-height,//Waiting box background area height, by default automatically calculates the appropriate height according to the content ...}    )

3. Pre-load page

Way 1mui.init ({    preloadpages: [{        url:prelaod-page-url,        Id:preload-page-id,        styles: {},//Window parameters 
   extras: {},//Custom extension parameter        subpages: [{}, {}]//Pre-load Page sub-page    }]});//mode 2var page = mui.preload ({    url:new-page- URL,    id:new-page-id,//default using the URL of the current page as the ID    styles: {},//window parameter    Extras: {}//Custom extension parameter});

Some differences 1. Sub-pages and non-sub-pages

In the above three ways, the 2,3 open page is not a sub-page,

The difference is that a sub-page is equivalent to an IFRAME in HTML, not a sub-page equivalent to a newly opened browser window loaded with an HTML

2. Sub-page for slide-by menu

Sub-page has its somewhat, particularly suitable with index.html+list.html this case,

If the index.html (Main Page) +list.html (sub-page) is implemented, the sub-page will automatically follow when the main page is right-sliding.

With Index.html (homepage) +list.html (New page), the main page is right, the new page does not go right, and the new page has to be processed separately.

3. Sub-page practical frequent switching situation

If the left slide is frequent, the list.html mask index.html will appear on the low-profile phone.

Using the Sub-page mode will not, the new page mode is very likely.

4. Sub-page for use with drop-down refresh and pull-up loading

Before the big pull refresh, the use of the form of a new page,

According to the official website of the tutorial, how did not succeed,

Later read the next source, found that the dropdown refresh must take the form of a sub-page,

That is, your list.html must be Index.html's sub-page to be able to pull down the refresh.

5. New page for new page

Open a new page, for viewing details and so on, need to open a new page case,

And MUI itself encapsulates the back method of the new page, and you don't have to worry about it.

6. Two ways to pre-load a page

The first is pre-loading at initialization time,

This situation is suitable for you to use this page for a long time,

If you want to go to the page immediately and use it then you will get null.

The second way is similar to open,

Personal feeling there's no big difference,

The only difference is that open opens directly,

Preload just loads, you can choose to open the time later.

Summarize

Requires a pull-down refresh pull-up load please use a sub-page,

To open a new page, use the new page mode,

Need to load a page but do not use preload mode for the time being.

More Tutorials:

Hbuilder Development App Tutorial: HTTP://UIKOO9.COM/BOOK/DETAIL/3

More study notes: Http://uikoo9.com/book

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

Hbuilder Development App Tutorial 08-Several ways to open a page