Im Hinblick auf viele frühere Front-End-Frameworks (insbesondere Responsive-Layout-Frameworks) sehen UI-Steuerelemente zu sehr wie Webseiten aus und haben kein natives Erscheinungsbild. Daher ist das Streben nach nativer UI auch ein wichtiges Ziel von MUI. MUI basiert auf der Benutzeroberfläche der iOS-Plattform und ergänzt einige UI-Steuerelemente, die nur für die Android-Plattform gelten. MUI hat hauptsächlich drei Bedeutungen: 1. eine mehrsprachige Version von Windows, einem separat veröffentlichten Computer-Betriebssystem; 2. die weltweit maßgeblichste offizielle Organisation für die Halal-Zertifizierung; 3. ein Eigenname in der mobilen Kommunikationstechnologie;
1. Vorbereitungen vor der Verwendung des Frameworks1. Erstellen Sie eine neue HTML-Datei mit mui
Erstellen Sie in Hbuilder eine neue HTML-Datei und wählen Sie die HTML-Vorlage mit Mui aus, um schnell eine Mui-Seitenvorlage zu generieren. Diese Vorlage verarbeitet standardmäßig die JS- und CSS-Ressourcenverweise von Mui.
2. Geben Sie mheader ein
Die obere Titelleiste ist für jede Seite erforderlich. Geben Sie mheader in Hbuilder ein, um schnell die obere Navigationsleiste zu generieren.
3. Geben Sie mbody ein
Mit Ausnahme der oberen Navigations- und unteren Tab-Steuerelemente wird empfohlen, andere Steuerelemente im .mui-content -Steuerelement zu platzieren. Geben Sie mbody in Hbuilder ein, um schnell einen Codeblock mit .mui-content zu generieren.
1.Akkordeon (Falttafel)
Das Faltpanel ähnelt der Sekundärliste wie folgt:
<ul class=mui-table-view> <li class=mui-table-view-cell mui-collapse> <a class=mui-navigate-right href=#>Panel 1</a> <div class=mui- collapse-content> <p>Panel 1 Unterinhalt</p> </div> </li> </ul><ul class=mui-table-view> <li class=mui-table-view-cell mui - zusammenbrechen> <a class=mui-navigate-right href=#>Panel 2</a> <div class=mui-collapse-content> <p>Panel 2 Unterinhalt</p> </div> </li> </ul >
2.Tasten (Tasten)
Normale Taste
Fügen Sie die .mui-btn Klasse zum Schaltflächenknoten hinzu, um eine Standardschaltfläche zu generieren. Wenn Sie Schaltflächen in anderen Farben benötigen, fügen Sie weiterhin die entsprechende Klasse hinzu. Beispielsweise kann .mui-btn-blue zu einer blauen Schaltfläche werden.
<button type=button class=mui-btn>Standard</button><button type=button class=mui-btn mui-btn-primary>Blau</button><button type=button class=mui-btn mui- btn -success>Grün</button><button type=button class=mui-btn mui-btn-warning>Gelb</button><button type=button class=mui-btn mui-btn-danger>Rot</button><button type=button class=mui-btn mui-btn-royal>Lila</button>
Der Effekt nach dem Laufen ist wie folgt:
Wenn Sie Schaltflächen ohne Hintergrundfarbe und Rahmen wünschen, müssen Sie nur die Klasse .mui-btn-outlined hinzufügen. Der Code lautet wie folgt:
<button type=button class=mui-btn mui-btn-outlined>Standard</button><button type=button class=mui-btn mui-btn-primary mui-btn-outlined>Blau</button><button Typ =button class=mui-btn mui-btn-success mui-btn-outlined>grün</button><button type=button class=mui-btn mui-btn-warning mui-btn-outlined>gelb</button><button type=button class=mui-btn mui-btn-danger mui-btn-outlined>rot</button> <button type=button class=mui-btn mui-btn-royal mui-btn-outlined>Lila</button>
Die Laufergebnisse sind wie folgt:
3.Galerie (Bilderkarussell)
Das Bildkarussell erbt vom Folien-Plug-in, sodass seine DOM-Struktur und Ereignisse mit denen des Folien-Plug-ins identisch sind.
Die Loop-Wiedergabe wird standardmäßig nicht unterstützt. Die DOM-Struktur ist wie folgt:
<div class=mui-slider> <div class=mui-slider-group> <div class=mui-slider-item><a href=#><img src=1.jpg /></a></div > <div class=mui-slider-item><a href=#><img src=2.jpg /></a></div> <div class=mui-slider-item><a href=#><img src=3.jpg /></a></div> <div class=mui-slider-item><a href=#><img src =4.jpg /></a></div> </div></div>
Gehen Sie davon aus, dass sich im aktuellen Bildkarussell die vier Bilder 1, 2, 3 und 4 befinden. Schieben Sie nach links, um zum vierten Bild zu wechseln. Es wird zwei Effekte geben:
Wenn das erste Bild angezeigt wird, stellt das Weiterschieben nach rechts zur Anzeige des vierten Bildes das gleiche Problem dar. Die Implementierung dieses Problems muss über die Klasse .mui-slider-loop und DOM-Knoten gesteuert werden.
Wenn Sie Schleifen unterstützen möchten, müssen Sie die Klasse .mui-slider-loop zum Knoten .mui-slider-group hinzufügen. Gleichzeitig müssen Sie 2 Bilder hinzufügen. Die Reihenfolge der Bilder beträgt: 4 , 1, 2, 3, 4, 1. Das Codebeispiel lautet wie folgt:
<div class=mui-slider> <div class=mui-slider-group mui-slider-loop> <!--Unterstützt Schleifen, Bildknoten müssen wiederholt werden--> <div class=mui-slider-item mui-slider - item-duplicate><a href=#><img src=4.jpg /></a></div> <div class=mui-slider-item><a href=#><img src=1.jpg /></a></div> <div class=mui-slider-item><a href=#><img src=2.jpg /></a> </div> <div class=mui-slider-item><a href=#><img src=3.jpg /></a></div> <div class=mui-slider-item><a href=#><img src=4.jpg /></a></div> <!--Unterstützt Schleifen, muss Bildknoten wiederholen--> <div class= mui -slider-item mui-slider-item-duplicate><a href=#><img src=1.jpg /></a></div> </div></div>
Das Mui-Framework verfügt über ein integriertes Bildkarussell-Plug-In. Über die von diesem Plug-In gekapselte JS-API können Benutzer festlegen, ob das Karussell automatisch ausgeführt werden soll. Das Folgende ist ein Codebeispiel:
// Holen Sie sich das Slider-Plug-In-Objekt var gallery = mui('.mui-slider'); gallery.slider({ Interval:3000//Automatische Rotationsperiode, wenn es 0 ist, wird es nicht automatisch abgespielt, die Standardeinstellung ist 0; });Wenn Sie also möchten, dass das Bildkarussell nicht automatisch abgespielt wird, sondern durch manuelles Schieben des Benutzers umgeschaltet wird, müssen Sie den Intervallparameter nur mit der oben beschriebenen Methode auf 0 setzen.
Wenn Sie zum x-ten Bild springen möchten, können Sie beispielsweise die gotoItem-Methode des Bildkarussell-Plug-Ins verwenden:
//Die mit mui gelieferte Ereignisbindung kann nur die Ereignisdelegationsmethode mui(.mui-content).on(tap,#btn,function(){ gallery.slider().gotoItem(2);//Bereitstellung verwenden Zum dritten Bild beginnt der Index bei 0});4. Eingabe (Eingabeformular)
Für alle Eingabe-, Textbereichs- und anderen Elemente, die in die Klasse .mui-input-row eingeschlossen sind, ist das Breitenattribut standardmäßig auf width: 100%; gesetzt. Die beste Anordnung lässt sich erreichen, indem man das Label-Element und die oben genannten Steuerelemente in .mui-input-group einschließt.
(Auf der rechten Seite des Passworteingabefelds befindet sich außerdem ein Augensymbol, das ich besonders nützlich finde.)
Der Code lautet wie folgt:
<form class=mui-input-group> <div class=mui-input-row> <label>Benutzername</label> <input type=text class=mui-input-clear placeholder=Bitte Benutzernamen eingeben> </ div> <div class=mui-input-row> <label>Passwort</label> <input type=password class=mui-input-password placeholder=Bitte Passwort eingeben> </div></form>
mui bietet derzeit auch mehrere Eingabeerweiterungsfunktionen: schnelles Löschen, Spracheingabe nur *5+ und Passwortbox mit versteckten Passwörtern.
1) Schnelles Löschen: Fügen Sie einfach die Klasse .mui-input-clear zum Eingabesteuerelement hinzu. Wenn das Eingabesteuerelement Inhalte enthält, wird auf der rechten Seite ein Löschsymbol angezeigt, um den aktuellen Eingabeinhalt zu löschen.
Der Code lautet wie folgt:
<form class=mui-input-group> <div class=mui-input-row> <label>Schnelles Löschen</label> <input type=text class=mui-input-clear placeholder=Bitte Inhalt eingeben> </div ></form>
2) Suchfeld: Fügen Sie die Klasse .mui-input-row .mui-input-search -row hinzu, um die Suchsteuerung zu verwenden
Der Code lautet wie folgt:
<div class=mui-input-row mui-search> <input type=search class=mui-input-clear placeholder=></div>
3) Spracheingabe *nur 5+: Um eine schnelle Eingabe zu ermöglichen, integriert mui die HTML5+-Spracheingabe. Sie müssen nur die Klasse .mui-input-speech zum entsprechenden Eingabesteuerelement hinzufügen, um die Spracheingabe in der 5+-Umgebung zu verwenden.
4) Passwortfeld: Fügen Sie die Klasse .mui-input-password zum Eingabeelement hinzu, um sie zu verwenden
Der Code lautet wie folgt:
<form class=mui-input-group> <div class=mui-input-row> <label>Passwortfeld</label> <input type=password class=mui-input-password placeholder=Bitte Passwort eingeben> </div ></form>
5.Liste(Liste)
Die von mui gekapselte Listenkomponente ist relativ einfach und leicht zu verwenden. Sie müssen lediglich die Klasse .mui-table-view auf dem ul -Knoten und die Klasse .mui-table-view-cell auf dem li -Knoten hinzufügen.
<ul class=mui-table-view> <li class=mui-table-view-cell>Element 1</li> <li class=mui-table-view-cell>Element 2</li> <li class= mui-table-view-cell>Item 3</li></ul>
Die Laufergebnisse sind wie folgt:
Passen Sie die Hervorhebungsfarbe der Liste an Klicken Sie auf die Liste und das entsprechende Listenelement wird grau hervorgehoben. Wenn Sie die Hervorhebungsfarbe anpassen möchten, müssen Sie nur .mui-table-view-cell.mui-active wie folgt umschreiben:
/*Klicken, um Grau hervorzuheben*/.mui-table-view-cell.mui-active{ background-color: grey;} Fügen Sie rechts Navigationspfeile hinzu Wenn Sie einen Navigationspfeil auf der rechten Seite hinzufügen und ihn in einen Navigationslink umwandeln müssen, müssen Sie nur a Unterknoten unter dem Knoten li hinzufügen und die Klasse .mui-navigate-right wie folgt zum Knoten a hinzufügen :
<ul class=mui-table-view> <li class=mui-table-view-cell> <a class=mui-navigate-right>Element 1</a> </li> <li class=mui-table- view-cell> <a class=mui-navigate-right>Element 2</a> </li> <li class=mui-table-view-cell> <a class=mui-navigate-right>Element 3</a> </li></ul>
Die Laufergebnisse sind wie folgt:
Fügen Sie rechts Steuerelemente wie digitale Eckmarkierungen hinzumui unterstützt das Platzieren digitaler Indizes, Schaltflächen, Schalter und anderer Steuerelemente in der Liste. Mui platziert die digitalen Indizes standardmäßig auf der rechten Seite der Liste.
<ul class=mui-table-view> <li class=mui-table-view-cell>Element 1 <span class=mui-badge mui-badge-primary>1</span> </li> <li class= mui-table-view-cell>Element 2 <span class=mui-badge mui-badge-success>2</span> </li> <li class=mui-table-view-cell>Element 3 <span class=mui-badge>3</span> </li></ul>
Die Laufergebnisse sind wie folgt:
(Bild- und Textliste) Die Bild- und Textliste erbt von der Listenkomponente und fügt hauptsächlich die Klassen .mui-media , .mui-media-object , .mui-media-body und .mui-pull-left/right hinzu
<ul class=mui-table-view> <li class=mui-table-view-cell mui-media> <a href=javascript:;> <img class=mui-media-object mui-pull-left src=img /a.jpg> <div class=mui-media-body> Glück<p class='mui-ellipsis'>Es ist eine schöne Sache, mit dem Menschen zu schlafen, den man liebt, aber was sollte man tun, wenn man schnarcht? </p> </div> </a> </li> <li class=mui-table-view-cell mui-media> <a href=javascript:;> <img class=mui-media-object mui- pull-left src=img/b.jpg> <div class=mui-media-body> Holzhaus<p class='mui-ellipsis'>Ich möchte ein kleines Holzhaus wie dieses, in dem ich im Sommer Eis machen und Melonen essen und im Winter am Herd sitzen und mich warm halten kann.</p> </div> </a> </li> <li class=mui-table -view-cell mui-media> <a href=javascript:;> <img class=mui-media-object mui-pull-left src=img/c .jpg> <div class=mui-media-body> CBD < p class='mui-ellipsis'>Die Stadt sieht im Ofenmodus wie eine umgedrehte Palette in der Abenddämmerung aus.</p> </div> </a> </li></ul>
Die Laufergebnisse sind wie folgt:
Fazit: Das Mui-Framework ist in der Tat sehr benutzerfreundlich. Es verfügt auch über viele Steuerelemente, die wir verwenden können. Die Details können auf der offiziellen Website von Mui eingesehen werden.
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.