mui is an open source front-end UI framework based on the HTML5 specification. It takes advantage of the native capabilities of HTML5 extensions to solve the performance and cross-platform issues of common UI controls. Developers use mui to develop once and then publish it as HTML5 iOS and Android Apps can also be published to mobile browsers at the same time.

The operating environment of this tutorial: windows7 system, HTML5&&mui3.7.2 version, Dell G3 computer.

html5 MUI framework

• A style framework matching HTML5

mui framework is a An open source front-end UI framework based on the HTML5 specification, which takes advantage of the native capabilities of HTML5 extensions to solve the performance and cross-platform issues of common UI controls.

The UI component design in MUI is based on iOS 7, supplemented by some Android-specific controls. The MUI framework effectively solves some problems of the original framework and can easily develop high-performance apps.

At the same time, mui can also automatically adapt to ordinary browsers without HTML5 environments and reduce it to ordinary web apps. This allows developers to use mui to develop once and publish it as HTML5 iOS and Android apps at the same time. to the mobile browser.

MUI’s positioning is: the UI framework for mobile apps that is closest to the native experience. It is this positioning that gives rise to several characteristics of MUI: light, small, only involving UI, only born for mobile apps, and native interface style. MUI is different from jQuery in that it does not encapsulate DOM operations and does not do anything unrelated to the UI.

mui official website:

https://dev.dcloud.net.cn/mui/

Overall layout of MUI page

Build the overall layout of the page, the top and bottom navigation bars are fixed, and the specific content is placed in

When browsing content, the navigation bar is fixed and only the main content changes

       
  
   
标题
 
  
 //主体内容 
    

Built-in methods and objects

• mui() method: equivalent to jQuery's $() method, using the css selector to obtain the HTML object and returning the mui object array
  Convert the mui object into a DOM object ：
  var obj1 = mui('#title'); //miu object
  var obj2 = obj[0]; //DOM object

• each() method : Equivalent to jQuery's each() method to perform traversal operations

• init() method: The MUI framework concentrates many functional configurations in the mui.init() method. To use a certain For this function, you only need to complete the corresponding parameter configuration in the mui.init() method. Currently, the functions supported in the mui.init method include:Create subpages, close pages, gesture event configuration, preloading, Pull down to refresh, pull up to load, and set the system status bar background color

• scrollTo() method: scroll the window screen to the specified position
  mui.scrollTo(ypos[,duration ][,handler])

  • ypos is an integer value, the y coordinate of the document to be displayed in the upper left corner of the window document display area.
  • duration is the rolling time period, the unit is milliseconds.
  • Handler is the callback function executed after scrolling ends.

• mui.os object: used to determine the current running environment
  mui.os.plus: whether to run in the 5 base
  mui.os.android , mui.os.ios, mui.os.ipad, mui.os.iphone similar

Event Management

1. Tap event: Click to trigger

element.addEventListener('tap',function(){ //点击响应逻辑 },false);

2. Event binding: mui(selecto1).on(event,selector2,handler);

event is a String type, which means it needs to be monitored The event name, such as "tap", handler is the callback function when the event is triggered, selector1 and selector2 are both selectors, but selector2 must be the descendant selector under the HTML element object represented by selector1

3. Event Cancel: Cancel the bound event

mui(selector).off()//取消selector所有事件 mui(selector1).off(event,selector2)//取消作用于selector2的所有事件 mui(selector1).off(event,selector2，handler)//取消作用于selector2的特定事件

4. Event trigger: Dynamically trigger the event of a specific DOM element mui.trigger(element,event,data);

5 , Gesture events: Introducing commonly used gesture expression methods

mui.init({ keyEventBind:{ backbutton:true//启用右滑关闭功能} });

mui.init({ preloadPages:[ { url:prelaod-page-url,//页面路径 id:preload-page-id,//Webview的id styles:{},//窗口参数 extras:{},//自定义扩展参数 subpages:[{},{}]//预加载页面的子页面 } ], preloadLimit:5//预加载窗口数量限制(一旦超出,先进先出)默认不限制 });

mui.init({ subpages:[{ url:'list.html', id:'list.html', styles:{ top:'45px',//mui标题栏默认高度为45px； bottom:'45px'//默认为0px，可不定义； } }] });

The above is the detailed content of What is html5 mui. For more information, please follow other related articles on the PHP Chinese website!