Kerangka kerja front-end HTML5 seluler—Penggunaan MUI

Mengingat banyak kerangka front-end sebelumnya (terutama kerangka tata letak responsif), kontrol UI terlalu mirip halaman web dan tidak memiliki kesan asli juga merupakan tujuan penting MUI. MUI didasarkan pada UI platform iOS dan melengkapi beberapa kontrol UI yang unik untuk platform Android. MUI pada dasarnya memiliki tiga arti: 1. Versi multibahasa dari Windows, sistem operasi komputer yang dirilis secara terpisah; 2. organisasi resmi paling otoritatif di dunia untuk sertifikasi Halal; 3. kata benda dalam teknologi komunikasi seluler.

1. Buat file HTML baru yang berisi mui

Di Hbuilder, buat file HTML baru dan pilih template HTML yang berisi mui untuk membuat template halaman mui dengan cepat. Template ini menangani referensi sumber daya js dan css mui secara default.

2. Masukkan mheader

Bilah judul atas diperlukan untuk setiap halaman. Masukkan mheader di Hbuilder untuk membuat bilah navigasi atas dengan cepat.

3. Masukkan tubuh

Kecuali untuk kontrol navigasi atas dan tab bawah, disarankan agar kontrol lain ditempatkan di kontrol .mui-content . Masukkan mbody di Hbuilder untuk dengan cepat menghasilkan blok kode yang berisi .mui-content .

1.akordeon (panel lipat)

Panel lipat mirip dengan daftar sekunder, sebagai berikut:

 <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- runtuh-konten> <p>Sub-konten panel 1</p> </div> </li> </ul><ul class=mui-table-view> <li class=mui-table-view-cell mui - runtuh> <a class=mui-navigate-right href=#>Panel 2</a> <div class=mui-collapse-content> <p>Sub-konten Panel 2</p> </div> </li> </ul >

2.tombol(tombol)

Tombol biasa

Tambahkan kelas .mui-btn ke node tombol untuk menghasilkan tombol default; jika Anda memerlukan tombol dengan warna lain, terus tambahkan kelas yang sesuai. Misalnya, .mui-btn-blue dapat menjadi tombol biru.

 <button type=button class=mui-btn>Default</button><button type=button class=mui-btn mui-btn-primary>Biru</button><button type=button class=mui-btn mui- btn -success>Hijau</button><button type=button class=mui-btn mui-btn-warning>Kuning</button><button type=button class=mui-btn mui-btn-danger>Merah</button><button type=button class=mui-btn mui-btn-royal>Ungu</button>

Efek setelah dijalankan adalah sebagai berikut:

Jika Anda menginginkan tombol tanpa warna latar dan batas, Anda hanya perlu menambahkan kelas .mui-btn-outlined . Kodenya adalah sebagai berikut:

 <button type=button class=mui-btn mui-btn-outlined>Default</button><button type=button class=mui-btn mui-btn-primary mui-btn-outlined>Biru</button><jenis tombol =button class=mui-btn mui-btn-success mui-btn-outlined>hijau</button><button type=button class=mui-btn mui-btn-peringatan mui-btn-outlined>kuning</button><button type=button class=mui-btn mui-btn-bahaya mui-btn-outlined>merah</button> <button type=button class=mui-btn mui-btn-royal mui-btn-outlined>Ungu</button>

Hasil yang berjalan adalah sebagai berikut:

3.galeri (korsel gambar)

Korsel gambar mewarisi plugin slide, sehingga struktur DOM dan kejadiannya sama dengan plugin slide;

Pemutaran loop tidak didukung secara default. Struktur DOM adalah sebagai berikut:

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

Asumsikan ada empat gambar 1, 2, 3, dan 4 di carousel gambar saat ini. Mulai dari gambar pertama, geser ke kiri untuk berpindah gambar. Saat beralih ke gambar ke-4, lanjutkan geser ke kiri. akan ada Dua efek:

1. Mendukung perulangan: geser ke kiri untuk beralih langsung ke gambar pertama;
2. Perulangan tidak didukung: geser ke kiri, tidak ada respons, lanjutkan menampilkan gambar ke-4. Jika pengguna ingin menampilkan gambar pertama, ia harus terus menggeser ke kanan untuk beralih ke gambar pertama;

Ketika gambar pertama ditampilkan, terus menggeser ke kanan untuk menampilkan gambar keempat adalah masalah yang sama; implementasi masalah ini perlu dikontrol melalui kelas .mui-slider-loop dan node DOM;

Jika Anda ingin mendukung perulangan, Anda perlu menambahkan kelas .mui-slider-loop ke node .mui-slider-group . Pada saat yang sama, Anda perlu menambahkan 2 gambar berulang kali , 1, 2, 3, 4, 1. Contoh kodenya sebagai berikut:

 <div class=mui-slider> <div class=mui-slider-group mui-slider-loop> <!--Dukungan looping, perlu mengulang node gambar--> <div class=mui-slider-item mui-slider - item-duplikat><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> <!--Mendukung perulangan, perlu mengulang node gambar--> <div class= mui -slider-item mui-slider-item-duplikat><a href=#><img src=1.jpg /></a></div> </div></div>

Kerangka kerja mui memiliki plug-in carousel gambar bawaan. Melalui JS API yang dienkapsulasi oleh plug-in ini, pengguna dapat mengatur apakah akan carousel dan siklus carousel secara otomatis.

 //Dapatkan objek plug-in slider var gallery = mui('.mui-slider'); 0; });

Oleh karena itu, jika Anda ingin carousel gambar tidak diputar secara otomatis, tetapi dapat dialihkan dengan menggeser manual pengguna, Anda hanya perlu mengatur parameter interval ke 0 melalui cara di atas.

Jika Anda ingin melompat ke gambar ke-x, Anda dapat menggunakan metode gotoItem pada plugin carousel gambar, misalnya:

 //Pengikatan event on yang disertakan dengan mui hanya dapat menggunakan metode delegasi event mui(.mui-content).on(tap,#btn,function(){ gallery.slider().gotoItem(2);//Deployment Untuk gambar ketiga, indeksnya dimulai dari 0});

4.masukan (bentuk masukan)

Semua input, textarea, dan elemen lain yang dibungkus dalam kelas .mui-input-row akan memiliki atribut lebar yang disetel ke width: 100%; Membungkus elemen label dan kontrol di atas dalam .mui-input-group dapat mencapai pengaturan terbaik.

(Ada juga ikon mata di sisi kanan kotak masukan kata sandi, yang menurut saya sangat berguna)

Kodenya adalah sebagai berikut:

 <form class=mui-input-group> <div class=mui-input-row> <label>Nama pengguna</label> <input type=text class=mui-input-clear placeholder=Silakan masukkan nama pengguna> </ div> <div class=mui-input-row> <label>Kata Sandi</label> <input type=password class=mui-input-password placeholder=Silakan masukkan kata sandi> </div></form>

mui saat ini juga menyediakan beberapa fungsi peningkatan input: penghapusan cepat, input suara *5+ saja dan kotak kata sandi yang menampilkan kata sandi tersembunyi.

1) Penghapusan cepat: Cukup tambahkan kelas .mui-input-clear ke kontrol input. Ketika ada konten di kontrol input, akan ada ikon hapus di sebelah kanan.

Kodenya adalah sebagai berikut:

 <form class=mui-input-group> <div class=mui-input-row> <label>Hapus cepat</label> <input type=text class=mui-input-clear placeholder=Silakan masukkan konten> </div ></bentuk>

2) Kotak pencarian: Tambahkan kelas .mui-input-row .mui-input-search -row untuk menggunakan kontrol pencarian

Kodenya adalah sebagai berikut:

 <div class=mui-input-row mui-search> <tipe input=kelas pencarian=mui-input-clear placeholder=></div>

3) Input suara *5+ saja: Untuk memfasilitasi input cepat, mui mengintegrasikan input suara HTML5+. Anda hanya perlu menambahkan kelas .mui-input-speech ke kontrol input yang sesuai untuk menggunakan input suara di lingkungan 5+.

4) Kotak kata sandi: Tambahkan kelas .mui-input-password ke elemen input untuk menggunakannya

Kodenya adalah sebagai berikut:

 <form class=mui-input-group> <div class=mui-input-row> <label>Kotak kata sandi</label> <input type=password class=mui-input-password placeholder=Silakan masukkan kata sandi> </div ></bentuk>

5.daftar(daftar)

Komponen daftar yang dienkapsulasi oleh mui relatif sederhana dan mudah digunakan. Anda hanya perlu menambahkan kelas .mui-table-view pada node ul dan kelas .mui-table-view-cell pada node li .

 <ul class=mui-table-view> <li class=mui-table-view-cell>Item 1</li> <li class=mui-table-view-cell>Item 2</li> <li class= mui-table-view-cell>Item 3</li></ul>

Hasil yang berjalan adalah sebagai berikut:

Klik daftar, dan item daftar terkait akan disorot dalam warna abu-abu. Jika Anda ingin menyesuaikan warna sorotan, Anda hanya perlu menulis ulang .mui-table-view-cell.mui-active , sebagai berikut:

 /*Klik untuk menyorot abu-abu*/.mui-table-view-cell.mui-active{ background-color: grey;}

Jika Anda perlu menambahkan panah navigasi di sisi kanan dan mengubahnya menjadi tautan navigasi, Anda hanya perlu menambahkan a -node di bawah node li dan menambahkan kelas .mui-navigate-right ke node a , sebagai berikut :

 <ul class=mui-table-view> <li class=mui-table-view-cell> <a class=mui-navigate-right>Item 1</a> </li> <li class=mui-table- sel tampilan> <a class=mui-navigate-right>Item 2</a> </li> <li class=mui-table-view-cell> <a class=mui-navigate-right>Item 3</a> </li></ul>

Hasil yang berjalan adalah sebagai berikut:

mui mendukung penempatan subskrip digital, tombol, sakelar, dan kontrol lainnya dalam daftar; default mui adalah menempatkan subskrip digital di sisi kanan daftar.

 <ul class=mui-table-view> <li class=mui-table-view-cell>Item 1 <span class=mui-badge mui-badge-primary>1</span> </li> <li class= mui-table-view-cell>Item 2 <span class=mui-badge mui-badge-success>2</span> </li> <li class=mui-table-view-cell>Item 3 <span class=mui-badge>3</span> </li></ul>

Hasil yang berjalan adalah sebagai berikut:

Daftar gambar dan teks mewarisi dari komponen daftar, dan terutama menambahkan kelas .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> Kebahagiaan<p class='mui-ellipsis'>Sungguh menyenangkan tidur dengan orang yang Anda cintai; tapi apa yang harus Anda lakukan jika Anda mendengkur? </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> rumah kayu<p class='mui-ellipsis'>Saya ingin rumah kayu kecil seperti ini, tempat saya bisa membuat es krim dan makan melon di musim panas, dan duduk mengelilingi kompor agar tetap hangat di musim dingin.</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 < hal class='mui-ellipsis'>Kota dalam mode oven tampak seperti palet terbalik saat senja.</p> </div> </a> </li></ul>

Hasil yang berjalan adalah sebagai berikut:

Kesimpulan: Framework MUI memang sangat nyaman digunakan, juga memiliki banyak kontrol untuk kita gunakan.

Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.