Maison > Article > interface Web > Qu'est-ce que HTML5 Mui
Qu'est-ce que HTML5 Mui
- 青灯夜游original
- 2022-06-02 14:27:252723parcourir
mui est un framework d'interface utilisateur frontal open source basé sur les spécifications HTML5+. Il tire parti des capacités natives des extensions HTML5+ pour résoudre les problèmes de performances et multiplateformes des contrôles d'interface utilisateur courants. Les développeurs utilisent mui pour développer une fois, puis publier. vers HTML5+ iOS, l'application Android peut également être publiée sur le navigateur mobile en même temps.
L'environnement d'exploitation de ce tutoriel : système Windows 7, HTML5&&mui version 3.7.2, ordinateur Dell G3.
Cadre HTML5 MUI
Un cadre de style correspondant à HTML5+
Le cadre mui est un cadre d'interface utilisateur frontal open source basé sur les spécifications HTML5+. Il tire parti des capacités natives des extensions HTML5+ pour résoudre les performances. des contrôles d’interface utilisateur courants et des problèmes multiplateformes.
La conception des composants de l'interface utilisateur dans MUI est basée sur iOS 7, complétée par certains contrôles spécifiques à Android. Le framework MUI résout efficacement certains problèmes du framework d'origine et peut facilement développer des applications hautes performances.
Dans le même temps, mui peut également s'adapter automatiquement aux navigateurs ordinaires qui n'ont pas d'environnement HTML5+ et le réduire à une application Web ordinaire. Cela permet aux développeurs d'utiliser mui pour le développer une fois et le publier sur des applications HTML5+ iOS et Android sur. en même temps, ou aux navigateurs mobiles en même temps à l'intérieur.
MUI se positionne comme : le framework d'interface utilisateur pour les applications mobiles le plus proche de l'expérience native. C'est ce positionnement qui donne naissance à plusieurs caractéristiques du MUI : léger, petit, impliquant uniquement l'interface utilisateur, uniquement né pour les applications mobiles et un style d'interface natif. MUI est différent de jQuery en ce sens qu'il n'encapsule pas les opérations DOM et ne fait rien sans rapport avec l'interface utilisateur.
Site officiel de MUI :
https://dev.dcloud.net.cn/mui/
Mise en page générale de la page MUI
Construisez la mise en page générale de la page, les barres de navigation supérieure et inférieure sont fixes , Le contenu spécifique est placé dans le conteneur
Lors de la navigation dans le contenu, la barre de navigation est fixe et seule la partie principale du contenu change
<!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">Quest-ce que 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>
Méthodes et objets intégrés
Méthode mui() : équivalente à la méthode $() de jQuery, utilisant le sélecteur css pour obtenir l'objet HTML et renvoyant le tableau d'objets mui
Convertir l'objet mui en DOM object :
var obj1 = mui('#title '); //objet miu
var obj2 = obj[0]; // Méthode DOMeach() : équivalente à la méthode each() de jQuery pour effectuer une traversée opérations
Méthode init() : Le framework MUI concentre de nombreuses configurations fonctionnelles dans la méthode mui.init(). Pour utiliser une certaine fonction, il vous suffit de compléter la configuration des paramètres correspondants dans la méthode mui.init(). Actuellement, la configuration dans la méthode mui.init est prise en charge. Les fonctions incluent : Créer des sous-pages, fermer des pages, configuration des événements gestuels, préchargement, actualisation déroulante, chargement par extraction, définition de la couleur d'arrière-plan de la barre d'état du système
- .
Méthode scrollTo() : faites défiler l'écran de la fenêtre jusqu'à la position spécifiée
mui. scrollTo(ypos[,duration][,handler])- ypos est une valeur entière, la coordonnée y du document à afficher en haut. coin gauche de la zone d’affichage du document de la fenêtre.
- durée est la période de temps glissante, l'unité est la milliseconde.
- handler est la fonction de rappel exécutée après la fin du défilement.
Objet mui.os : utilisé pour déterminer l'environnement d'exécution actuel
mui.os.plus : s'il fonctionne dans la base 5+
mui.os.android, mui.os.ios, mui.os. iPad, mui.os.iphone est similaire
Gestion des événements
1. Appuyez sur l'événement : cliquez sur le déclencheur
element.addEventListener('tap',function(){
//点击响应逻辑
},false);2. Liaison de l'événement : mui(selecto1).on(event,selector2,handler);
event est un type String, représentant le nom de l'événement à surveiller, tel que "tap", le gestionnaire est la fonction de rappel lorsque l'événement est déclenché, selector1 et selector2 sont tous deux des sélecteurs, mais selector2 doit être un sélecteur descendant sous l'objet élément HTML représenté par selector1
3. Annulation d'événement : annuler l'événement lié
mui(selector).off()//取消selector所有事件 mui(selector1).off(event,selector2)//取消作用于selector2的所有事件 mui(selector1).off(event,selector2，handler)//取消作用于selector2的特定事件
4 Déclenchement d'événement : déclencher dynamiquement l'événement d'un élément DOM spécifique mui.trigger(élément, événement, données);
. 5. Événements gestuels : introduisez la méthode d'expression gestuelle couramment utilisée
| Catégorie | Nom de l'événement | Description |
|---|---|---|
| Cliquez | appuyez | Cliquez sur l'écran |
| Cliquez | appuyez deux fois | Doublez appuyez sur l'écran |
| Appui long | appuyez longuement | appuyez longuement sur l'écran |
| appuyez longuement | maintenez | maintenez l'écran |
| appuyez longuement | relâchez | quittez l'écran |
| glisser vers la gauche | swipedown | swipedown |
| Drag | dragstart | |
| drag | drag | |
| drag | dragedd | |
窗口管理
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，可不定义；
}
}]
});相关推荐：《html视频教程》 |
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!