Heim > Artikel > Web-Frontend > Was ist HTML5 Mui?

Was ist HTML5 Mui?

青灯夜游Original: 2022-06-02 14:27:252709Durchsuche

mui ist ein Open-Source-Frontend-UI-Framework, das auf HTML5+-Spezifikationen basiert. Es nutzt die nativen Funktionen von HTML5+-Erweiterungen, um die Leistungs- und plattformübergreifenden Probleme gängiger UI-Steuerelemente zu lösen Es kann gleichzeitig auch auf HTML5+ iOS, Android App im mobilen Browser veröffentlicht werden.

Was ist HTML5 Mui?

Die Betriebsumgebung dieses Tutorials: Windows 7-System, HTML5&&mui Version 3.7.2, Dell G3-Computer.

html5 MUI-Framework

Ein Stil-Framework, das zu HTML5+ passt.

mui-Framework ist ein Open-Source-Front-End-UI-Framework, das auf HTML5+-Spezifikationen basiert. Es nutzt die nativen Funktionen von HTML5+-Erweiterungen, um die Leistung zu verbessern von allgemeinen UI-Steuerelementen und plattformübergreifenden Problemen.

Das Design der UI-Komponenten in MUI basiert auf iOS 7, ergänzt durch einige Android-spezifische Steuerelemente. Das MUI-Framework löst effektiv einige Probleme des ursprünglichen Frameworks und kann problemlos leistungsstarke Apps entwickeln.

Gleichzeitig kann sich mui auch automatisch an gewöhnliche Browser anpassen, die nicht über eine HTML5+-Umgebung verfügen, und es auf eine gewöhnliche Web-App reduzieren. Dies ermöglicht es Entwicklern, mui einmal zu entwickeln und in HTML5+-iOS- und Android-Apps zu veröffentlichen zur gleichen Zeit oder für mobile Browser gleichzeitig.

MUI ist positioniert als: das UI-Framework für mobile Apps, das dem nativen Erlebnis am nächsten kommt. Es ist diese Positionierung, die mehrere Merkmale von MUI hervorbringt: leicht, klein, nur mit Benutzeroberfläche ausgestattet, nur für mobile Apps entwickelt und nativer Schnittstellenstil. MUI unterscheidet sich von jQuery dadurch, dass es keine DOM-Operationen kapselt und nichts tut, was nichts mit der Benutzeroberfläche zu tun hat.

Mui offizielle Website:

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

Gesamtlayout der MUI-Seite

Erstellen Sie das Gesamtlayout der Seite, die oberen und unteren Navigationsleisten sind festgelegt , Der spezifische Inhalt wird im

Container platziert

Beim Durchsuchen des Inhalts ist die Navigationsleiste fixiert und nur der Hauptteil des Inhalts ändert sich

Was ist 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 class="mui-title">标题</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">Was ist 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>

Eingebaute Methoden und Objekte

mui()-Methode: Äquivalent zur $()-Methode von jQuery, wobei der CSS-Selektor verwendet wird, um das HTML-Objekt abzurufen und das Mui-Objekt-Array zurückzugeben
Konvertieren Sie das Mui-Objekt in ein DOM object:
var obj1 = mui('#title '); //miu object
var obj2 = obj[0]; // DOM-Objekt
each()-Methode: entspricht der every()-Methode von jQuery, um die Traversierung durchzuführen Operationen
init()-Methode: Das MUI-Framework konzentriert viele funktionale Konfigurationen in der mui.init()-Methode. Um eine bestimmte Funktion zu verwenden, müssen Sie nur die entsprechende Parameterkonfiguration in der mui.init()-Methode abschließen. Derzeit wird die Konfiguration in der mui.init-Methode unterstützt: Unterseiten erstellen, Seiten schließen, Gestenereigniskonfiguration, Vorladen, Pull-Down-Aktualisierung, Pull-Up-Laden, Hintergrundfarbe der Systemstatusleiste festlegen
scrollTo()-Methode: Scrollen Sie den Fensterbildschirm zur angegebenen Position
mui scrollTo(ypos[,duration][,handler])
- ypos ist ein ganzzahliger Wert, die y-Koordinate des Dokuments, das oben angezeigt werden soll linke Ecke des Dokumentanzeigebereichs des Fensters.
- duration ist der rollierende Zeitraum, die Einheit ist Millisekunden.
- handler ist die Rückruffunktion, die ausgeführt wird, nachdem der Bildlauf beendet ist.
mui.os-Objekt: wird verwendet, um die aktuelle Betriebsumgebung zu bestimmen
mui.os.plus: ob es in der 5+-Basis ausgeführt wird
mui.os.android, mui.os.ios, mui.os. ipad, mui.os.iphone ist ähnlich

Ereignisverwaltung

1. Tippen Sie auf Ereignis: Klicken Sie auf Auslöser

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

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

event ist ein String-Typ, der den Namen des zu überwachenden Ereignisses darstellt, z. B. „tap“. Der Handler ist die Rückruffunktion, wenn das Ereignis ausgelöst wird. Selektor1 und Selektor2 sind beide Selektoren, Selektor2 muss jedoch ein untergeordneter Selektor sein Das durch Selector1 dargestellte HTML-Elementobjekt 5. Gestenereignisse: Einführung häufig verwendeter Gestenausdrucksmethoden

Klicken

Doppeltippen

Doppelt Tippen Sie auf den Bildschirm. Langes Drücken Bildschirm

Wischennach links wischennach unten wischennach unten wischennach unten wischenZiehendragstartDrag startdragdragdragdragdragedddrag over

窗口管理

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//启用右滑关闭功能}
		});

预加载：提前创建窗口，在跳转时之间得到窗口，减少加载的过程

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

子页面：多个窗口合成一个，方便实现局部滚动功能

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

In Verbindung stehende Artikel

Mehr sehen

Nach links wischen