mui use summary

• mui is a high-performance HTML5 development framework, from UI to efficiency, are aggressively pursue the native experience; this framework itself there are some rules, new to the students is not very familiar with, especially summarize this article; For more information mui, please mui visit the official website
• 　　DOM structure
• 　　About dom mui page, you need to know the following rules.
• 　　Fixed front bar
• 　　Called fixed column, i.e. with node attribute .mui-bar, it is based on fixed positioning elements; common assembly comprising: a top navigation bar (.mui-bar-nav), the bottom of the tool bar (.mui-bar- footer), the bottom of the tab (.mui-bar-tab); a rule to be followed when using these elements: placed before .mui-content element, even the bottom of the bottom toolbar and tabs, but also on .mui- before content, or fixed bar will cover part of the main content;
• ### everything to be wrapped up in mui-content in
• In addition to the fixed fence, and other content to be wrapped in .mui-content, otherwise it may be masked fixed bar reasons: Fixed positioning based on a fixed bar, free flow layout constraints, general content will still be from top: 0 layout starting position, so that it will be fixed column mask, mui to solve this problem, we define the following css code:

• 　　
• 　　[Css] view plain copy.mui-bar-nav ~ .mui-content {padding-top: 44px;} .mui-bar-footer ~ .mui-content {padding-bottom: 44px;} .mui-bar-tab ~ .mui-content {padding-bottom: 50px;} course you can achieve a similar effect as described above by way of custom CSS, but for ease of use, it is recommended everything except the fixed bar, all on .mui-content in.

• 　　Always add the type attribute button button
• 　　If the button is not the type attribute button, the browser's default in accordance with the type = submit logic, so if no type of button on the form the form, click the button will execute form the form is submitted, the page refreshes, the user experience is poor.
• 　　Window Manager
• 　　Page initialization: the method must be performed mui.init
• 　　mui when the page is initialized, which a lot of configuration parameters, such as: key listener, monitoring and other gestures, so mui pages must be called once mui.init () method;
• 　　Go to page: Go abandon href
• 　　When the browser loads a new page, if the page DOM has not finished rendering, the page will first appear blank, and then wait for the DOM rendering is complete, then display specific content, which is to experience obstacles WEB browser technology insurmountable; to solve this problem recommended [mui.openWindow method] ( http://dcloudio.github.io/mui/javascript/#openwindow ) to open a new webview, mui will automatically monitor the new page loaded event, if loaded, and then automatically displays new page; extended reading:
• 　　hello mui in the form of no-wait switch is how to achieve
• 　　Tip One series HTML5 performance experience to avoid a cut sheet black and white
• 　　Page Off: Do not repeat listening backbutton
• 　　mui page framework automatically closed encapsulates logic, if you wish to return the custom logic (e.g. edit page return, the user confirms the need to give up draft after execution returns to logic), it is necessary to rewrite mui.back method, not by simply adding backbutton addEventListener listening, because the addEventListener only add new enforcement procedures, mui default monitor the implementation of the logic package will still continue, so if the user only add addEventListener confirmation box, even if the user chose to cancel, will continue to close the window.
• Gestures
• 　　Views: Forget click
• 　　Quick response is the realization of the most important mobile App, research shows that when latency exceeds 100 milliseconds, the user interface can feel Caton, however, the mobile browser click click on the existence of 300 millisecond delay (As to why the delay, and 300 ms ins and outs of your own valley one hundred), mui to solve this problem, encapsulates the tap event, so any clicks, please click and forget onclick operation, all using the following code:
• 　　[javascript] view plain copy
• 　　element.addEventListener('tap',function(){
• 　　//点击响应逻辑   });