What is html5 mui-Front-end Q&A-php.cn

Table of Contents

html5 MUI framework

Overall layout of MUI page

标题

Built-in methods and objects

Event Management

窗口管理

Home

Web Front-end

Front-end Q&A

What is html5 mui

青灯夜游

Jun 02, 2022 pm 02:27 PM

html html5

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.

What is html5 mui

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

Inside the container

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

What is html5 mui

<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-close mui-pull-right"></a>
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 id="标题">标题</h1>
		</header>
		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item mui-active">
				<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label">What is html5 mui</span>
			</a>
		</nav>
		<div class="mui-content">
			//主体内容
		</div>
		<script src="js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init()
		</script>
	</body>

</html>

Copy after login

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(&#39;tap&#39;,function(){
        //点击响应逻辑
 },false);

Copy after login

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的特定事件

Copy after login

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

##CategoryEvent nameDescriptionTaptapClick the screen##TapLong pressLong pressLong pressSwipeSwipe##SwipeswipeupSwipe upSwipeswipedownSwipe downDragdragstartDrag startdragdragedd



doubletap	Double-click the screen
longtap	Long press the screen
hold	Hold the screen
release	Leave the screen
swipeleft	Swipe left
swiperight	Swipe right Swipe


		## Drag
Drag		Drag
Drag end		窗口管理 HTML5+初始化： mui.plusReady(function(){ … }); 打开新窗口：mui.openWindow(参数配置对象); 关闭窗口：MUI框架将窗口关闭功能封装在mui.back方法中，具体执行逻辑是:当前Webview为预加载页面，则hide当前Webview；否则，close当前Webview，共有三种方法实现点击class属性中包含"mui-action-back"的控件在屏幕内快速向右滑动：mui.init({swipeBack:true//启用右滑关闭功能}) Android自动监听back键： mui.init({ keyEventBind:{ backbutton:true//启用右滑关闭功能} }); Copy after login 预加载：提前创建窗口，在跳转时之间得到窗口，减少加载的过程 mui.init({ preloadPages:[ { url:prelaod-page-url,//页面路径 id:preload-page-id,//Webview的id styles:{},//窗口参数 extras:{},//自定义扩展参数 subpages:[{},{}]//预加载页面的子页面 } ], preloadLimit:5//预加载窗口数量限制(一旦超出,先进先出)默认不限制 }); Copy after login 子页面：多个窗口合成一个，方便实现局部滚动功能 mui.init({ subpages:[{ url:'list.html', id:'list.html', styles:{ top:'45px',//mui标题栏默认高度为45px； bottom:'45px'//默认为0px，可不定义； } }] }); Copy after login 相关推荐：《html视频教程》 The above is the detailed content of What is html5 mui. For more information, please follow other related articles on the PHP Chinese website! Statement of this Website The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn Hot AI Tools Undresser.AI Undress AI-powered app for creating realistic nude photos AI Clothes Remover Online AI tool for removing clothes from photos. Undress AI Tool Undress images for free Clothoff.io AI clothes remover AI Hentai Generator Generate AI Hentai for free. Show More Hot Article R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal) 3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌 R.E.P.O. Best Graphic Settings 3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌 Assassin's Creed Shadows: Seashell Riddle Solution 2 weeks ago By DDD R.E.P.O. How to Fix Audio if You Can't Hear Anyone 3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌 WWE 2K25: How To Unlock Everything In MyRise 3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌 Show More Hot Tools Notepad++7.3.1 Easy-to-use and free code editor SublimeText3 Chinese version Chinese version, very easy to use Zend Studio 13.0.1 Powerful PHP integrated development environment Dreamweaver CS6 Visual web development tools SublimeText3 Mac version God-level code editing software (SublimeText3) Show More Hot Topics Where is the login entrance for gmail email? 7467 15 CakePHP Tutorial 1376 52 What is the format of the account name of steam 77 11 win11 activation key permanent 46 19 nyt connections hints and answers 18 20 Show More Related knowledge Table Border in HTML Sep 04, 2024 pm 04:49 PM Guide to Table Border in HTML. Here we discuss multiple ways for defining table-border with examples of the Table Border in HTML. Nested Table in HTML Sep 04, 2024 pm 04:49 PM This is a guide to Nested Table in HTML. Here we discuss how to create a table within the table along with the respective examples. HTML margin-left Sep 04, 2024 pm 04:48 PM Guide to HTML margin-left. Here we discuss a brief overview on HTML margin-left and its Examples along with its Code Implementation. HTML Table Layout Sep 04, 2024 pm 04:54 PM Guide to HTML Table Layout. Here we discuss the Values of HTML Table Layout along with the examples and outputs n detail. HTML Input Placeholder Sep 04, 2024 pm 04:54 PM Guide to HTML Input Placeholder. Here we discuss the Examples of HTML Input Placeholder along with the codes and outputs. HTML Ordered List Sep 04, 2024 pm 04:43 PM Guide to the HTML Ordered List. Here we also discuss introduction of HTML Ordered list and types along with their example respectively Moving Text in HTML Sep 04, 2024 pm 04:45 PM Guide to Moving Text in HTML. Here we discuss an introduction, how marquee tag work with syntax and examples to implement. HTML onclick Button Sep 04, 2024 pm 04:49 PM Guide to HTML onclick Button. Here we discuss their introduction, working, examples and onclick Event in various events respectively. See all articles Public welfare online PHP training，Help PHP learners grow quickly！ About us Disclaimer Sitemap © php.cn All rights reserved