Framework frontal HTML5 mobile – Utilisation de MUI

Compte tenu de nombreux frameworks front-end précédents (en particulier les frameworks de mise en page réactifs), les contrôles d'interface utilisateur ressemblent trop à des pages Web et n'ont aucune sensation native. Par conséquent, la recherche d'une interface utilisateur native est également un objectif important de MUI. MUI est basé sur l'interface utilisateur de la plate-forme iOS et complète certains contrôles de l'interface utilisateur uniques à la plate-forme Android. MUI a principalement trois significations : 1. Une version multilingue de Windows, un système d'exploitation informatique publié séparément ; 2. l'organisation officielle la plus faisant autorité au monde en matière de certification Halal ; 3. un nom propre dans le domaine de la technologie de communication mobile ;

1. Créez un nouveau fichier HTML contenant mui

Dans Hbuilder, créez un nouveau fichier HTML et sélectionnez le modèle HTML contenant mui pour générer rapidement un modèle de page mui. Ce modèle gère par défaut les références aux ressources js et css de mui.

2. Entrez l'en-tête

La barre de titre supérieure est nécessaire pour chaque page. Entrez mheader dans Hbuilder pour générer rapidement la barre de navigation supérieure.

3. Entrez mon corps

À l'exception des contrôles de navigation supérieure et de l'onglet inférieur, il est recommandé de placer d'autres contrôles dans le contrôle .mui-content . Entrez mbody dans Hbuilder pour générer rapidement un bloc de code contenant .mui-content .

1.accordéon (panneau pliant)

Le panneau dépliant est similaire à la liste secondaire, comme suit :

 <ul class=mui-table-view> <li class=mui-table-view-cell mui-collapse> <a class=mui-navigate-right href=#>Panneau 1</a> <div class=mui- effondrement-content> <p>Sous-contenu du panneau 1</p> </div> </li> </ul><ul class=mui-table-view> <li class=mui-table-view-cell mui - effondrement> <a class=mui-navigate-right href=#>Panneau 2</a> <div class=mui-collapse-content> <p>Sous-contenu du panneau 2</p> </div> </li> </ul >

2.boutons(boutons)

Bouton normal

Ajoutez la classe .mui-btn au nœud du bouton pour générer un bouton par défaut ; si vous avez besoin de boutons d'autres couleurs, continuez à ajouter la classe correspondante. Par exemple, .mui-btn-blue peut devenir un bouton bleu.

 <button type=button class=mui-btn>Par défaut</button><button type=button class=mui-btn mui-btn-primary>Bleu</button><button type=button class=mui-btn mui- btn -success>Vert</button><button type=button class=mui-btn mui-btn-warning>Jaune</button><button type=button class=mui-btn mui-btn-danger>Rouge</button><button type=button class=mui-btn mui-btn-royal>Violet</button>

L'effet après l'exécution est le suivant :

Si vous souhaitez des boutons sans couleur d'arrière-plan ni bordures, il vous suffit d'ajouter la classe .mui-btn-outlined . Le code est le suivant :

 <button type=button class=mui-btn mui-btn-outlined>Par défaut</button><button type=button class=mui-btn mui-btn-primary mui-btn-outlined>Bleu</button><type de bouton =button class=mui-btn mui-btn-success mui-btn-outlined>vert</button><bouton type=button class=mui-btn mui-btn-warning mui-btn-outlined>jaune</button><button type=button class=mui-btn mui-btn-danger mui-btn-outlined>rouge</button> <button type=button class=mui-btn mui-btn-royal mui-btn-outlined>Violet</button>

Les résultats en cours d'exécution sont les suivants :

3.gallery (carrousel d'images)

Le carrousel d'images hérite du plug-in slide, donc sa structure DOM et ses événements sont les mêmes que ceux du plug-in slide ;

La lecture en boucle n'est pas prise en charge par défaut. La structure DOM est la suivante :

 <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>

Supposons qu'il y ait quatre images 1, 2, 3 et 4 dans le carrousel d'images actuel. À partir de la 1ère image, faites glisser vers la gauche pour changer d'image. Lorsque vous passez à la 4ème image, continuez à glisser vers la gauche. il y aura deux effets :

1. Prend en charge le bouclage : balayez vers la gauche pour passer directement à la première image ;
2. Le bouclage n'est pas supporté : balayez vers la gauche, pas de réponse, continuez à afficher la 4ème image Si l'utilisateur souhaite afficher la 1ère image, il doit continuellement glisser vers la droite pour passer à la 1ère image ;

Lorsque la première image est affichée, continuer à glisser vers la droite pour afficher la quatrième image pose le même problème ; la mise en œuvre de ce problème doit être contrôlée via la classe .mui-slider-loop et les nœuds DOM ;

Si vous souhaitez prendre en charge le bouclage, vous devez ajouter la classe .mui-slider-loop au nœud .mui-slider-group . En même temps, vous devez ajouter 2 images à plusieurs reprises. L'ordre des images devient : 4. , 1, 2, 3, 4, 1. L'exemple de code est le suivant :

 <div class=mui-slider> <div class=mui-slider-group mui-slider-loop> <!--Prise en charge du bouclage, nécessité de répéter les nœuds d'image--> <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> <!--Prend en charge la boucle, doit répéter les nœuds d'image--> <div class= mui -slider-item mui-slider-item-duplicate><a href=#><img src=1.jpg /></a></div> </div></div>

Le framework mui dispose d'un plug-in de carrousel d'images intégré. Grâce à l'API JS encapsulée par ce plug-in, les utilisateurs peuvent définir s'il faut automatiquement créer un carrousel et le cycle du carrousel.

 //Obtenir l'objet du plug-in slider var gallery = mui('.mui-slider'); gallery.slider({ interval:3000//Période de rotation automatique, si elle est 0, elle ne sera pas jouée automatiquement, la valeur par défaut est 0 ; } );

Par conséquent, si vous souhaitez que le carrousel d'images ne soit pas lu automatiquement, mais soit commuté par le glissement manuel de l'utilisateur, il vous suffit de définir le paramètre d'intervalle sur 0 via la méthode ci-dessus.

Si vous souhaitez accéder à la xième image, vous pouvez utiliser la méthode gotoItem du plug-in carrousel d'images, par exemple :

 //La liaison d'événement fournie avec mui ne peut utiliser que la méthode de délégation d'événement mui(.mui-content).on(tap,#btn,function(){ gallery.slider().gotoItem(2);//Déploiement À la troisième image, l'index commence à 0});

4.input (formulaire de saisie)

Tous les éléments d'entrée, zone de texte et autres éléments enveloppés dans la classe .mui-input-row auront l'attribut width défini sur width: 100%; par défaut. Envelopper l'élément label et les contrôles ci-dessus dans .mui-input-group peut obtenir le meilleur arrangement.

(Il y a aussi une icône en forme d'œil sur le côté droit de la zone de saisie du mot de passe, que je trouve particulièrement utile)

Le code est le suivant :

 <form class=mui-input-group> <div class=mui-input-row> <label>Nom d'utilisateur</label> <input type=text class=mui-input-clear placeholder=Veuillez entrer le nom d'utilisateur> </ div> <div class=mui-input-row> <label>Mot de passe</label> <input type=password class=mui-input-password placeholder=Veuillez saisir le mot de passe> </div></form>

mui propose actuellement également plusieurs fonctions d'amélioration de la saisie : suppression rapide, saisie vocale *5+ uniquement et boîte de mot de passe affichant les mots de passe cachés.

1) Suppression rapide : ajoutez simplement la classe .mui-input-clear au contrôle d'entrée. Lorsqu'il y a du contenu dans le contrôle d'entrée, il y aura une icône de suppression sur la droite. Cliquez dessus pour effacer le contenu d'entrée actuel.

Le code est le suivant :

 <form class=mui-input-group> <div class=mui-input-row> <label>Suppression rapide</label> <input type=text class=mui-input-clear placeholder=Veuillez saisir le contenu> </div ></formulaire>

2) Zone de recherche : ajoutez la classe .mui-input-row .mui-input-search -row pour utiliser le contrôle de recherche

Le code est le suivant :

 <div class=mui-input-row mui-search> <input type=search class=mui-input-clear placeholder=></div>

3) Saisie vocale *5+ uniquement : afin de faciliter la saisie rapide, mui intègre la saisie vocale HTML5+. Il vous suffit d'ajouter la classe .mui-input-speech au contrôle de saisie correspondant pour utiliser la saisie vocale dans l'environnement 5+.

4) Zone Mot de passe : ajoutez la classe .mui-input-password à l'élément d'entrée pour l'utiliser

Le code est le suivant :

 <form class=mui-input-group> <div class=mui-input-row> <label>Boîte de mot de passe</label> <input type=password class=mui-input-password placeholder=Veuillez saisir le mot de passe> </div ></formulaire>

5.liste(liste)

Le composant liste encapsulé par mui est relativement simple et facile à utiliser. Il vous suffit d'ajouter la classe .mui-table-view sur le nœud ul et la classe .mui-table-view-cell sur le nœud li .

 <ul class=mui-table-view> <li class=mui-table-view-cell>Élément 1</li> <li class=mui-table-view-cell>Élément 2</li> <li class= mui-table-view-cell>Article 3</li></ul>

Les résultats en cours d'exécution sont les suivants :

Cliquez sur la liste et l'élément de liste correspondant sera surligné en gris. Si vous souhaitez personnaliser la couleur de surbrillance, il vous suffit de réécrire .mui-table-view-cell.mui-active , comme suit :

 /*Cliquez pour mettre en surbrillance le gris*/.mui-table-view-cell.mui-active{ background-color: gray;}

Si vous devez ajouter une flèche de navigation sur le côté droit et la transformer en lien de navigation, il vous suffit d'ajouter a sous-nœud sous le nœud li et d'ajouter la classe .mui-navigate-right au nœud a , comme suit :

 <ul class=mui-table-view> <li class=mui-table-view-cell> <a class=mui-navigate-right>Élément 1</a> </li> <li class=mui-table- view-cell> <a class=mui-navigate-right>Élément 2</a> </li> <li class=mui-table-view-cell> <a class=mui-navigate-right>Élément 3</a> </li></ul>

Les résultats en cours d'exécution sont les suivants :

mui prend en charge le placement des indices numériques, des boutons, des commutateurs et d'autres commandes dans la liste ; mui place par défaut les indices numériques sur le côté droit de la liste. Le code est le suivant :

 <ul class=mui-table-view> <li class=mui-table-view-cell>Élément 1 <span class=mui-badge mui-badge-primary>1</span> </li> <li class= mui-table-view-cell>Élément 2 <span class=mui-badge mui-badge-success>2</span> </li> <li class=mui-table-view-cell>Élément 3 <span class=mui-badge>3</span> </li></ul>

Les résultats en cours d'exécution sont les suivants :

La liste d'images et de textes hérite du composant list et ajoute principalement les classes .mui-media , .mui-media-object , .mui-media-body , .mui-pull-left/right . Voici l'exemple de code.

 <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> Bonheur<p class='mui-ellipsis'>C'est une chose heureuse de coucher avec celui que l'on aime, mais que devez-vous faire si vous ronflez ? </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> maison en bois<p class='mui-ellipsis'>Je veux une petite maison en bois comme celle-ci, où je peux faire de la glace et manger des melons en été, et m'asseoir autour du poêle pour me réchauffer en hiver.</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'>La ville en mode four ressemble à une palette renversée au crépuscule.</p> </div> </a> </li></ul>

Les résultats en cours d'exécution sont les suivants :

Conclusion : Le framework mui est en effet très pratique à utiliser. Il dispose également de nombreux contrôles que nous pouvons utiliser. Les détails peuvent être consultés sur le site officiel de mui.

Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.