Rumah > Artikel > hujung hadapan web > Apa itu html5 mui
Apa itu html5 mui
- 青灯夜游asal
- 2022-06-02 14:27:252728semak imbas
mui ialah rangka kerja UI bahagian hadapan sumber terbuka berdasarkan spesifikasi HTML5 Ia mengambil kesempatan daripada keupayaan asli sambungan HTML5 untuk menyelesaikan masalah prestasi dan merentas platform bagi kawalan UI biasa sekali dan kemudian terbitkannya sebagai HTML5 iOS dan Apl Android juga boleh diterbitkan ke penyemak imbas mudah alih pada masa yang sama.
Persekitaran pengendalian tutorial ini: sistem Windows 7, HTML5 && mui versi 3.7.2, komputer Dell G3.
Rangka kerja MUI HTML5
Rangka kerja gaya yang sepadan dengan HTML5
rangka kerja mui ialah An open sumber rangka kerja UI bahagian hadapan berdasarkan spesifikasi HTML5, yang memanfaatkan keupayaan asli sambungan HTML5 untuk menyelesaikan isu prestasi dan merentas platform kawalan UI biasa.
Reka bentuk komponen UI dalam MUI adalah berdasarkan iOS 7, ditambah dengan beberapa kawalan khusus Android. Rangka kerja MUI secara berkesan menyelesaikan beberapa masalah rangka kerja asal dan boleh membangunkan apl berprestasi tinggi dengan mudah.
Pada masa yang sama, mui juga boleh menyesuaikan secara automatik kepada penyemak imbas biasa tanpa persekitaran HTML5 dan mengurangkannya kepada apl web biasa Ini membolehkan pembangun menggunakan mui untuk membangunkan sekali dan menerbitkannya sebagai apl iOS dan Android HTML5 pada masa yang sama ke penyemak imbas mudah alih.
MUI diletakkan sebagai: rangka kerja UI untuk apl mudah alih yang paling hampir dengan pengalaman asli. Kedudukan inilah yang menimbulkan beberapa ciri MUI: ringan, kecil, hanya melibatkan UI, hanya dilahirkan untuk aplikasi mudah alih dan gaya antara muka asli. MUI berbeza daripada jQuery kerana ia tidak merangkum operasi DOM dan tidak melakukan apa-apa yang tidak berkaitan dengan UI.
laman web rasmi mui:
https://dev.dcloud.net.cn/mui/
Keseluruhan susun atur halaman MUI
Bina reka letak keseluruhan halaman, bar navigasi atas dan bawah ditetapkan dan kandungan khusus diletakkan dalam Di dalam bekas
Semasa menyemak imbas kandungan, bar navigasi dibetulkan dan hanya bahagian utama kandungan yang berubah
<!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">Apa itu 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>
Kaedah dan objek terbina dalam
kaedah mui(): setara dengan kaedah $() jQuery, menggunakan pemilih css untuk mendapatkan objek HTML dan mengembalikan susunan objek mui
Tukar objek mui kepada objek DOM:
var obj1 = mui('#title'); //miu object
var obj2 = obj[0]; >- kaedah setiap( ): bersamaan dengan kaedah each() jQuery, melaksanakan operasi traversal
- kaedah init(): Rangka kerja MUI menumpukan banyak konfigurasi fungsi dalam kaedah mui.init() Untuk menggunakan fungsi tertentu, anda hanya perlu melengkapkan konfigurasi parameter yang sepadan dalam kaedah mui.init() Pada masa ini, fungsi yang disokong dalam kaedah mui.init termasuk:
Buat subhalaman, tutup halaman, konfigurasi acara gerak isyarat, pratetap Memuatkan, tarik-turun untuk muat semula, tarik-turun untuk memuatkan, tetapkan warna latar belakang bar status sistem
- kaedah tatalKe(): tatal skrin tetingkap ke kedudukan yang ditentukan
mui.scrollTo(ypos[ ,duration][,handler])
- ypos ialah nilai integer, koordinat y bagi dokumen yang akan dipaparkan dalam sudut kiri atas kawasan paparan dokumen tetingkap.
- tempoh ialah tempoh masa bergulir dalam milisaat.
- pengendali ialah fungsi panggil balik yang dilaksanakan selepas menatal.
- objek mui.os: digunakan untuk menentukan persekitaran berjalan semasa
mui.os.plus: sama ada ia berjalan dalam pangkalan 5
mui.os .android , mui.os.ios, mui.os.ipad, mui.os.iphone adalah serupa dengan
element.addEventListener('tap',function(){
//点击响应逻辑
},false);2 Pengikatan acara: mui(selecto1).on(acara,selector2,pengendali);
acara ialah Rentetan. jenis, mewakili Nama acara yang akan dipantau, seperti "ketik", pengendali ialah fungsi panggil balik apabila peristiwa dicetuskan, pemilih1 dan pemilih2 ialah kedua-dua pemilih, tetapi pemilih2 mestilah pemilih keturunan di bawah objek elemen HTML yang diwakili oleh selector1 3 , pembatalan acara: batalkan acara terikatmui(selector).off()//取消selector所有事件 mui(selector1).off(event,selector2)//取消作用于selector2的所有事件 mui(selector1).off(event,selector2，handler)//取消作用于selector2的特定事件4. pencetus peristiwa: secara dinamik mencetuskan peristiwa mui elemen DOM tertentu.
cetus(elemen , peristiwa, data);
5. Peristiwa gerak isyarat: Memperkenalkan kaedah ekspresi gerak isyarat yang biasa digunakan窗口管理
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:'list.html',
id:'list.html',
styles:{
top:'45px',//mui标题栏默认高度为45px；
bottom:'45px'//默认为0px，可不定义；
}
}]
});相关推荐：《html视频教程》
Atas ialah kandungan terperinci Apa itu html5 mui. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!