html5ムイとは何ですか-フロントエンドQ&A-php.cn

mui は、HTML5 仕様に基づいたオープンソースのフロントエンド UI フレームワークです。HTML5 拡張機能のネイティブ機能を利用して、一般的な UI コントロールのパフォーマンスとクロスプラットフォームの問題を解決します。開発者は mui を使用して、一度開発して HTML5 として公開 iOS および Android アプリは、同時にモバイルブラウザーに公開することもできます。

html5ムイとは何ですか

このチュートリアルの動作環境: Windows7 システム、HTML5&&mui3.7.2 バージョン、Dell G3 コンピューター。

html5 MUI フレームワーク

HTML5 に一致するスタイルフレームワーク

mui フレームワークは、オープンなフレームワークです。 HTML5 仕様に基づくソースフロントエンド UI フレームワーク。HTML5 拡張機能のネイティブ機能を利用して、一般的な UI コントロールのパフォーマンスとクロスプラットフォームの問題を解決します。

MUI の UI コンポーネントの設計は iOS 7 に基づいており、Android 固有のコントロールがいくつか追加されています。 MUI フレームワークは、元のフレームワークのいくつかの問題を効果的に解決し、高パフォーマンスのアプリを簡単に開発できます。

同時に、mui は HTML5 環境を持たない通常のブラウザーにも自動的に適応し、通常の Web アプリに縮小することができます。これにより、開発者は mui を使用して一度開発し、HTML5 iOS および Android アプリとして公開することができます。同時にモバイルブラウザにも送信されます。

MUI の位置付けは、ネイティブエクスペリエンスに最も近いモバイルアプリ用の UI フレームワークです。この位置付けによって、MUI のいくつかの特徴が生まれます。軽量、小型、UI のみを含む、モバイルアプリ専用、ネイティブインターフェイススタイルです。 MUI は、DOM 操作をカプセル化せず、UI に関係のないことを行わないという点で jQuery とは異なります。

mui 公式 Web サイト:
https://dev.dcloud.net.cn/mui/

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">html5ムイとは何ですか</span>
			</a>
		</nav>
		<div class="mui-content">
			//主体内容
		</div>
		<script src="js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init()
		</script>
	</body>

</html>

ログイン後にコピー

組み込みメソッドとオブジェクト

var obj1 = mui('#title'); //miu オブジェクト
var obj2 = obj[0]; //DOM オブジェクト

each() メソッド: トラバーサル操作を実行する jQuery の each() メソッドと同等
init() メソッド: MUI フレームワークは、多くの機能構成を mui に集中させます。 init() メソッド。特定の関数を使用するには、mui.init() メソッドで対応するパラメータ設定を完了するだけです。現在、mui.init メソッドでサポートされている関数には次のものが含まれます:
scrollTo() メソッド: ウィンドウをスクロールします。画面を指定した位置まで移動します。
ypos は整数値で、左上に表示されるドキュメントの y 座標です。ウィンドウのドキュメント表示領域の隅にあります。
mui.os オブジェクト: 現在の実行環境を決定するために使用されます。
mui.os で実行するかどうか。 android 、mui.os.ios、mui.os.ipad、mui.os.iphone 同様の

イベント管理

1. イベントをタップします。 : クリックして

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

ログイン後にコピー

2 をトリガーします。イベントバインディング: mui(selecto1).

(event,selector2,handler);

event は String 型です。監視する必要があります。イベント名 (「タップ」など)、ハンドラーはイベントがトリガーされたときのコールバック関数、selector1 と selector2 はどちらもセレクターですが、selector2 は selector1## で表される HTML 要素オブジェクトの下の子孫セレクターである必要があります。 #3. イベントキャンセル: バインドされたイベントをキャンセルします

mui(selector).off()//取消selector所有事件
mui(selector1).off(event,selector2)//取消作用于selector2的所有事件
mui(selector1).off(event,selector2，handler)//取消作用于selector2的特定事件

ログイン後にコピー

4. イベントトリガー: 特定の DOM 要素のイベントを動的にトリガーします mui.

trigger

(element,event,data) ;

5 、ジェスチャイベント: 一般的に使用されるジェスチャ表現方法の紹介

##カテゴリ

イベント名説明タップ画面をクリック##タップdoubletap画面をダブルクリック#画面を長押し##長押し長押し#長押し# #画面を離れるスワイプスワイプ左#スワイプswiperight右にスワイプ ##スワイプスワイプ##下にスワイプドラッグdragstartドラッグ開始#ドラッグ #ドラッグ #ドラッグドラッグ終了

窗口管理

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，可不定义；
      }
    }]
  });

ログイン後にコピー