MUI (3), mui

MUI (3), mui

This blog article continues with MUI (2 ).

Renewal page. In this figure, the red box is the index.html page, and the blue box is the index_list.html page. The two pages are originally independent, but after they are combined, they form the effect shown in the figure above. Display another page in one page.
The implementation method is simple,

1 <script type = "text/javascript" charset = "UTF-8"> 2 mui. init ({3 subpages: [{4 url: "html/index_list.html", // The HTML address of the subpage. The local address and network address 5 id: "index_list" are supported ", // subpage marker 6 styles: {7 top: '45px ', // The position on the top of the subpage. The default height of the mui title bar is 45px 8 bottom: '0px '// The position at the bottom of the subpage. The default value is 0px. do not define 9} 10}] 11}); 12 </script>

Its real index_list.html page is a subpage of the index.html page. Official documentation says: During mobile app development, you often encounter a page at the end of a card header. If you use partial scrolling, on Android phones, scrolling is not smooth. The mui solution is to implement the area to be rolled through a separate webview and use native scrolling completely. The specific method is to break down the target page into the main page and content page. The main page displays the ending area of the card header, such as the top navigation and bottom tabs. The content page displays the specific content to be rolled, then, call mui on the home page. init method initialization content page.
This section in the official document is generally used to break down a page. For example, you can place the header navigation on one page and the content on another page, then combine the two pages. The webview name is mentioned in the official documentation above. webview also describes in the official documentation: the UI module manages the application interface, which is used to operate and load the native window of the HTML page and call the native control of the system. Because this module has too many functions, it has been updated to Key, NativeUI, Navigatori and so on based on the function split, and some optimization adjustments have been made to interfaces and functions. Please use the new API. The module manages the application window interface to implement logic control and management operations for multiple windows. You can use plus. webview to obtain management objects on the application interface.
If you do not understand webview for the time being or do not understand what webview is, you will understand it slowly when you write more, write more, and think more.
The a.html page displays the B .html page, so you can write it on the.html page as follows:

1 mui. init ({2 subpages: [{3 url: your-subpage-url, // subpage HTML address, supports local address and network address 4 id: your-subpage-id, // subpage flag 5 styles: {6 top: subpage-top-position, // the top position of the subpage 7 bottom: subpage-bottom-position, // The bottom position of the subpage is 8 width: subpage-width, // The width of the subpage. The default value is 100% 9 height: subpage-height. // The height of the subpage, the default value is 100% 10 ...... 11}, 12 extras :{}// additional extended parameter 13}] 14 });

First, as shown in the above Code, the url is written to the B page address, and the id is defined by itself. The default value is the B page url. The following styles are the style displayed on page B on page, for example, the page B is displayed 45 PX away from the top navigation bar on page. Extras is an extension parameter and can be left empty if it is not used. You can display page B on page a in this format.
The header navigation bar is the header, and the bottom tab is the nav. For example, the header navigation bar is an example:

1 <! -- Start header --> 2 
 

Renewal page. The area on the right side of the red circle on the right side of the Green Box is a mask. The mask effect is described in blog MUI (2.
1 <div class = "mui-content"> 2 <div class = "title"> slide navigation </div> 3 <div class = "content"> 4. This page is slide navigation page, is a separate page that appears as a slide page. How to close this slide menu: 1. click any location outside the slide menu page. 2. click the red button <span id = "android-only">; 3. press the back key on the Android phone. 4. press menu on the Android phone </span>. 5 </div> 6 <p style = "margin: 10px 15px; "> 7 <button id =" close-btn "type =" button "class =" mui-btn-danger mui-btn-block "style =" padding: 5px 20px; "> close the slide menu </button> 8 </p> 9 </div>
Because the Android phone does not have the return and menu buttons, you need to set the 3rd and 4th points in the above Code to be hidden when running on the phone, you need to set the style and js Code separately for judgment and take corresponding measures.
<Span id = "android-only">; 3. Press back on the Android phone; 4. Press menu on the Android phone. </span>
Corresponding js Code:
1 mui. init (); // initialize 2 var aniShow = null; 3/* because the back and menu buttons do not exist on the ios platform, you need to hide them on the ios platform to avoid embarrassment. */4 if (! Mui. OS. android) {5 var span = document. getElementById ("android-only"); 6 if (span) {7 span. style. display = "none"; 8} 9 aniShow = "pop-in"; // page display animation 10}
If it is not an Android mobile phone platform, we need a mechanism of the programmer mechanism to take appropriate measures. The mini-editor does not have an Apple mobile phone, so there is no test on an Apple mobile phone.
1/* close the slide menu */2 function close () {3 mui. fire (mui. currentWebview. opener (), "menu: close"); 4} 5/* click "close slide menu" to process logic */6 document. getElementById ("close-btn "). addEventListener ('tap', close); 7/* For the swipe event in Android4.4.2, preventDefault is required; otherwise, the trigger is abnormal */8 window. addEventListener ('dragstart', function (e) {9 mui. gestures. touch. lockDirection = true; // lock direction 10 mui. gestures. touch. startDirection = e. detail. directio N; 11}); 12 window. addEventListener ('swipe ', function (e) {13 if (! Mui. isScrolling) {14 e. detail. gesture. preventDefault (); 15} 16}); 17 // listen to the left slide event. If the menu has been expanded, close the menu 18 window. addEventListener ('swipeleft ', function (e) {19 if (Math. abs (e. detail. angle)> 170) {20 close (); 21} 22 });
The slide menu page contains a button whose id is close-btn. This id is listened to. If you click this button, run the close slide menu command.
Function close () {mui. fire (mui. currentWebview. opener (), "menu: close ");}
This line of code is not surprising at first glance, but it is carefully observed that the mui. fire official document describes the following: Passmui.fire()Method To trigger custom events in the target window, in the format of. fire (target, event, data)
Target Type: the target webview, event Type, String Custom event name, and data Type in JSONjson format.
There is also a tip in the official document:
The target webview must trigger the loaded event before using the Custom Event.
If a new webview is created, you can use webview immediately after the webview loaded event occurs. evalJS () or mui. fire (webview, 'eventname', {}), which may be invalid;
CurrentWebview is the webviewObject object of the current window. The returned value is WebviewObject: Webview window object.
Webview window object, used to operate and load the HTML page window; opener: gets the creator of the current Webview window.
The index.html page uses plus. webview. currentWebview (); To create a menu page webview. Then, the system returns to the index.html page and triggers the close event.
Don't worry about coming back to this blog post later. I will explain it again and believe in the small series.
1 var menu = null, 2 main = null, 3 showMenu = false; 4 mui. plusReady (function () {5/* plus. screen. lockOrientation ("portrait-primary"); // only supports portrait display */6 main = plus. webview. currentWebview (); 7 main. addEventListener ('maskclick', closeMenu); 8 // handle slide navigation. To avoid competing resources such as subpage initialization and delay loading of side slide page 9 setTimeout (function () {10 menu = mui. preload ({11 id: 'index _ menu ', 12 url: 'html/index_menu.html', 13 styles: {14 left: '0px ', 15 width: '123 ', 16 zindex:-117}, 18 show: {19 aniShow: 'none' 20} 21}); 22}, 200); 23 });
The index.html page loads the slide menu page through the code above. Although the slide menu is not displayed at the beginning, it has already been loaded.
1 var isInTransition = false; 2/* display slide menu */3 function openMenu () {4 if (isInTransition) {5 return; 6} 7 if (! ShowMenu) {8 // If the slide menu is hidden, the processing result is displayed immediately. 9 isInTransition = true; 10 menu. setStyle ({11 mask: 'rgba (,) '12}); 13 // set the transparent mask to prevent 14 menus from being clicked. show ('none', 0, function () {15 // The main form starts to slide and displays the mask 16 main. setStyle ({17 mask: 'rgba (0.4, 0, 70%) ', // mask 18 left: '000000', 19 transition: {// a set of properties used to define the page or control conversion effect 20 duration: 15021} 22}); 23 mui. later (function () {24 isInTransition = false; 25 menu. setStyle ({26 mask: 'none' 27}); 28 // remove menu's mask29}, 160); 30 showMenu = true; 31}); 32} 33}
Now that the menu has been loaded, it will soon be displayed when we click to open the slide menu. The above code is used to open the slide menu.
What is mask? In the official document, we will explain the following:
Mask mask
Mask masks are often used on pages such as popover and slide menus. For example, when popover pops up, a mask is applied to all areas except the popover control, clicking a mask does not trigger the logic at the bottom of the mask, but closes the popover and closes the mask at the same time. For example, on the slide menu interface, a mask is applied to all areas except the slide menu, clicking the mask will close the slide menu and close the mask.
Common Operations for mask masks include: Create, display, and close. The following code:
Var mask = mui. createMask (callback); // callback is the callback automatically executed when the user clicks the mask; mask. show (); // display the mask. close (); // close the mask.
Note: closing the mask will only be disabled and will not be destroyed. You can call it again after closing it.mask.show();Enable the mask;
Mui default mask usage.mui-backdropClass Definition (the following code). to customize the mask effect, you only need to overwrite the definition..mui-backdropYou can;
.mui-backdrop {    position: fixed;    top: 0;    right: 0;    bottom: 0;    left: 0;    z-index: 998;    background-color: rgba(0,0,0,.3);}
What is another later? Do not worry. The official documents provide the following instructions:

Take a look at the source code provided in the official document and the previous two blog posts.
Please indicate the source for reprinting. Thank you.