これまでの多くのフロントエンド フレームワーク (特にレスポンシブ レイアウト フレームワーク) を考慮すると、UI コントロールは Web ページに似すぎていて、ネイティブな雰囲気がありません。したがって、ネイティブ UI の追求も MUI の重要な目標です。 MUI は iOS プラットフォームの UI に基づいており、Android プラットフォームに固有のいくつかの UI コントロールを補完します。 MUI には主に 3 つの意味があります: 1. 個別にリリースされたコンピュータ オペレーティング システムである Windows の多言語バージョン、2. 世界で最も権威のあるハラール認証の公式組織、3. モバイル通信技術における固有名詞。
1. フレームワーク利用前の準備1. mui を含む新しい HTML ファイルを作成します。
Hbuilder で新しい HTML ファイルを作成し、mui を含む HTML テンプレートを選択すると、mui ページ テンプレートがデフォルトで mui の js および css リソース参照を処理します。
2.mheaderを入力します
上部のタイトル バーはすべてのページに必要です。Hbuilder で mheader と入力すると、上部のナビゲーション バーがすぐに生成されます。
3. 本体を入力します
上部のナビゲーション コントロールと下部のタブ コントロールを除き、他のコントロールを.mui-contentコントロールに配置して、 Hbuilder に mbody を入力して、 .mui-content含むコード ブロックを迅速に生成することをお勧めします。
1.アコーディオン(折りたたみパネル)
折りたたみパネルは、次のように 2 次リストに似ています。
<ul class=mui-table-view> <li class=mui-table-view-cell mui-collapse> <a class=mui-navigate-right href=#>パネル 1</a> <div class=mui- crash-content> <p>パネル 1 のサブコンテンツ</p> </div> </li> </ul><ul class=mui-table-view> <li class=mui-table-view-cell mui - 折りたたむ> <a class=mui-navigate-right href=#>パネル 2</a> <div class=mui-collapse-content> <p>パネル 2 のサブコンテンツ</p> </div> </li> </ul >
2.ボタン(ボタン)
通常ボタン
.mui-btnクラスをボタン ノードに追加してデフォルトのボタンを生成します。他の色のボタンが必要な場合は、引き続き対応するクラスを追加します。たとえば、 .mui-btn-blue青色のボタンになります。
<button type=button class=mui-btn>デフォルト</button><button type=button class=mui-btn mui-btn-primary>青</button><button type=button class=mui-btn mui- btn -success>緑</button><button type=button class=mui-btn mui-btn-warning>黄</button><button type=button class=mui-btn mui-btn-danger>赤</button><button type=button class=mui-btn mui-btn-royal>紫</button>
実行後の効果は以下の通りです。
背景色と枠線のないボタンが必要な場合は、 .mui-btn-outlinedクラスを追加するだけです。コードは次のとおりです。
<button type=button class=mui-btn mui-btn-outlined>デフォルト</button><button type=button class=mui-btn mui-btn-primary mui-btn-outlined>青</button><ボタン タイプ=button class=mui-btn mui-btn-success mui-btn-outlined>green</button><button type=button class=mui-btn mui-btn-warning mui-btn-outlined> yellow</button><button type=button class=mui-btn mui-btn-danger mui-btn-outlined>red</button> <button type=button class=mui-btn mui-btn-royal mui-btn-outlined>パープル</button>
実行結果は次のとおりです。
3.ギャラリー（画像カルーセル）
画像カルーセルはスライド プラグインから継承するため、その DOM 構造とイベントはスライド プラグインと同じです。
ループ再生はデフォルトではサポートされていません。DOM 構造は次のとおりです。
<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>
現在の画像カルーセルに 1、2、3、4 の 4 つの画像があるとします。 1 番目の画像から始めて、左にスライドして画像を切り替えます。 4 番目の画像に切り替える場合は、さらに左にスライドします。次の 2 つの効果があります。
最初のピクチャが表示されているときに、右にスライドし続けて 4 番目のピクチャを表示することも同じ問題です。この問題の実装は.mui-slider-loopクラスと DOM ノードを通じて制御する必要があります。
ループをサポートしたい場合は、 .mui-slider-groupノードに.mui-slider-loopクラスを追加する必要があります。同時に、2 つの画像を繰り返し追加する必要があります。画像の順序は次のようになります。 、1、2、3、4、1。コード例は次のとおりです。
<div class=mui-slider> <div class=mui-slider-group mui-slider-loop> <!-- ループをサポート、ピクチャノードを繰り返す必要があります --> <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> <!--ループをサポート、ピクチャ ノードを繰り返す必要があります --> <div class= mui -slider-item mui-slider-item-duplicate><a href=#><img src=1.jpg /></a></div> </div></div>
mui フレームワークには組み込みの画像カルーセル プラグインがあり、このプラグインによってカプセル化された JS API を通じて、ユーザーは自動的にカルーセルを実行するかどうかとカルーセル サイクルを設定できます。次のコード例です。
//スライダー プラグイン オブジェクトを取得します var gallery = mui('.mui-slider'); gallery.slider({ interval:3000//自動回転周期、0 の場合は自動再生されません、デフォルトは0; });したがって、画像カルーセルを自動的に再生せず、ユーザーの手動スライドによって切り替えたい場合は、上記の方法で間隔パラメーターを 0 に設定するだけで済みます。
x 番目の画像にジャンプしたい場合は、画像カルーセル プラグインの gotoItem メソッドを使用できます。次に例を示します。
//mui に付属する on イベント バインディングは、イベント委任メソッドのみを使用できます。 mui(.mui-content).on(tap,#btn,function(){ gallery.slider().gotoItem(2);// デプロイメント3 番目の画像のインデックスは 0 から始まります。});4.input（入力フォーム）
.mui-input-rowクラスにラップされたすべての input、textarea、およびその他の要素の width 属性はwidth: 100%;に設定されます。 label 要素と上記のコントロールを.mui-input-groupでラップすると、最適な配置を実現できます。
(パスワード入力ボックスの右側に目のアイコンもありますが、これは特に便利だと思います)
コードは次のとおりです。
<form class=mui-input-group> <div class=mui-input-row> <label>ユーザー名</label> <input type=text class=mui-input-clear placeholder=ユーザー名を入力してください> </ div> <div class=mui-input-row> <label>パスワード</label> <input type=password class=mui-input-password placeholder=パスワードを入力してください> </div></form>
mui は現在、クイック削除、音声入力 *5+ のみ、および隠しパスワードを表示するパスワード ボックスなど、いくつかの入力強化機能も提供しています。
1) クイック削除: 入力コントロールに.mui-input-clearクラスを追加するだけです。入力コントロールにコンテンツがある場合、右側に削除アイコンが表示され、現在の入力コンテンツがクリアされます。
コードは次のとおりです。
<form class=mui-input-group> <div class=mui-input-row> <label>クイック削除</label> <input type=text class=mui-input-clear placeholder=内容を入力してください> </div ></フォーム>
2) 検索ボックス: 検索コントロールを使用するには、.mui .mui-input-search .mui-input-row -search クラスを追加します。
コードは次のとおりです。
<div class=mui-input-row mui-search> <input type=search class=mui-input-clear placeholder=></div>
3) 音声入力 *5+ のみ: 素早い入力を容易にするために、mui は HTML5+ 音声入力を統合します。5+ 環境で音声入力を使用するには、対応する入力コントロールに.mui-input-speechクラスを追加するだけです。
4) パスワードボックス: .mui-input-passwordクラスを input 要素に追加して使用します。
コードは次のとおりです。
<form class=mui-input-group> <div class=mui-input-row> <label>パスワードボックス</label> <input type=password class=mui-input-password placeholder=パスワードを入力してください> </div ></フォーム>
5.リスト(リスト)
mui によってカプセル化されたリスト コンポーネントは比較的シンプルで使いやすいです。 ulノードに.mui-table-viewクラスを追加し、 liノードに.mui-table-view-cellクラスを追加するだけです。
<ul class=mui-table-view> <li class=mui-table-view-cell>項目 1</li> <li class=mui-table-view-cell>項目 2</li> <li class= mui-table-view-cell>項目 3</li></ul>
実行結果は次のとおりです。
リストのハイライト色をカスタマイズするリストをクリックすると、対応するリスト項目が灰色で強調表示されます。強調表示の色をカスタマイズしたい場合は、 .mui-table-view-cell.mui-active次のように書き換えるだけです。
/*クリックしてグレーを強調表示*/.mui-table-view-cell.mui-active{background-color: grey;}右側にナビゲーション矢印を追加右側にナビゲーション矢印を追加してナビゲーション リンクに変える必要がある場合は、次のようにliノードの下にaを追加し、 .mui-navigate-rightクラスをaノードに追加するだけです。 :
<ul class=mui-table-view> <li class=mui-table-view-cell> <a class=mui-navigate-right>項目 1</a> </li> <li class=mui-table- view-cell> <a class=mui-navigate-right>アイテム 2</a> </li> <li class=mui-table-view-cell> <a class=mui-navigate-right>アイテム3</a> </li></ul>
実行結果は次のとおりです。
右側にデジタルコーナーマーカーなどのコントロールを追加しますmui は、デジタル添字、ボタン、スイッチ、その他のコントロールをリストに配置することをサポートしています。mui は、デフォルトでデジタル添字をリストの右側に配置します。コードは次のとおりです。
<ul class=mui-table-view> <li class=mui-table-view-cell>アイテム 1 <span class=mui-badge mui-badge-primary>1</span> </li> <li class= mui-table-view-cell>アイテム 2 <span class=mui-badge mui-badge-success>2</span> </li> <li class=mui-table-view-cell>アイテム3 <span class=mui-badge>3</span> </li></ul>
実行結果は次のとおりです。
（写真と文章の一覧）画像とテキストのリストは list コンポーネントを継承し、主に.mui-media 、 .mui-media-object 、 .mui-media-body 、 .mui-pull-left/rightクラスを追加します。 以下はサンプルコードです。
<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> 幸福<p class='mui-ellipsis'>愛する人と一緒に寝るのは幸せなことですが、いびきをかいている場合はどうすればよいでしょうか。 </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> 木造住宅<p class='mui-ellipsis'>私は、夏にはアイスクリームを作ってメロンを食べ、冬にはストーブの周りに座って暖をとることができる、このような小さな木造の家が欲しいです。</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'>オーブンモードの都市は、夕暮れ時にパレットをひっくり返したように見えます。</p> </div> </a> </li></ul>
実行結果は次のとおりです。
結論: mui フレームワークは実際に使用するのに非常に便利です。詳細については、mui 公式 Web サイトをご覧ください。
以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。