溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

html5 mui怎么使用

發(fā)布時間：2022-06-02 14:33:26 來源：億速云 閱讀：249 作者：iii 欄目：web開發(fā)

這篇文章主要介紹“html5 mui怎么使用”，在日常操作中，相信很多人在html5 mui怎么使用問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”html5 mui怎么使用”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

mui是一個基于HTML5+規(guī)范的開源前端UI框架，它利用了HTML5+擴展的原生能力，解決常用UI控件的性能及跨平臺問題；開發(fā)者使用mui開發(fā)一次，就可以同時發(fā)布為HTML5+的iOS、Android App，也可同時發(fā)布到手機瀏覽器里。

本教程操作環(huán)境：windows7系統(tǒng)、HTML5&&mui3.7.2版、Dell G3電腦。

html5 MUI框架

  • 一個與HTML5+配套的樣式框架

mui框架是一個基于HTML5+規(guī)范的開源前端UI框架，它利用了HTML5+擴展的原生能力，解決常用UI控件的性能及跨平臺問題。

MUI中的UI組件設(shè)計是以iOS 7為基礎(chǔ)，補充了部分Android特有控件。MUI框架有效的解決了原有框架的一些問題，可以很方便開發(fā)出高性能App。

同時mui也可以自動適應(yīng)沒有HTML5+環(huán)境的普通瀏覽器，降低為普通web app，這使得開發(fā)者使用mui開發(fā)一次，可以同時發(fā)布為HTML5+的iOS、Android App，也可同時發(fā)布到手機瀏覽器里。

MUI的定位是：最接近原生體驗的移動App的UI框架。正是這樣的定位，產(chǎn)生了MUI的幾個特點：輕、小、只涉及UI、只為移動App而生、界面風(fēng)格原生化。MUI不同于jQuery，沒有封裝DOM操作，與UI無關(guān)的都不做。

MUI頁面整體布局

構(gòu)建頁面的整體布局，頂部和底部導(dǎo)航欄都固定不動，具體內(nèi)容放置在 <p class=“mui-content”> 容器里面

在瀏覽內(nèi)容的時候，導(dǎo)航欄固定，僅主體部分內(nèi)容改變

html5 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>
			<h2 class="mui-title">標題</h2>
		</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">首頁</span>
			</a>
		</nav>
		<div class="mui-content">
			//主體內(nèi)容
		</div>
		<script src="js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init()
		</script>
	</body>

</html>

內(nèi)置方法和對象

  • mui()方法：相當于jQuery的$()方法，使用css選擇器獲取HTML對象，返回mui的對象數(shù)組
    將mui對象轉(zhuǎn)化為DOM對象：
    var obj1 = mui(’#title’); //miu 對象
    var obj2 = obj[0]; // DOM對象

  • each()方法：相當于jQuery的each()方法，進行遍歷操作

  • init()方法：MUI框架將很多功能配置都集中在mui.init()方法中，要使用某項功能，只需要在mui.init()方法中完成對應(yīng)參數(shù)配置即可，目前支持在mui.init方法中配置的功能包括：創(chuàng)建子頁面、關(guān)閉頁面、手勢事件配置、預(yù)加載、下拉刷新、上拉加載、設(shè)置系統(tǒng)狀態(tài)欄背景顏色

  • scrollTo()方法：滾動窗口屏幕到指定位置
    mui.scrollTo(ypos[,duration][,handler])

    • ypos是整型值，要在窗口文檔顯示區(qū)左上角顯示的文檔的 y 坐標。

    • duration是滾動時間周期，單位是毫秒。

    • handler是滾動結(jié)束后執(zhí)行的回調(diào)函數(shù)。

  • mui.os對象：用于判斷當前運行環(huán)境
    mui.os.plus：是否在5+基座中運行
    mui.os.android、mui.os.ios、mui.os.ipad、mui.os.iphone類似

    事件管理

    1、tap事件：單擊觸發(fā)

    element.addEventListener('tap',function(){
        //點擊響應(yīng)邏輯
 },false);

    2、事件綁定：mui(selecto1).on(event,selector2,handler);

    event是String類型，代表要監(jiān)聽的事件名稱，如“tap”，handler是事件觸發(fā)時的回調(diào)函數(shù)，selector1和selector2都是選擇器，但是selector2必須是selector1代表的HTML元素對象下面的后代選擇器

    3、事件取消：取消綁定的事件

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

    4、事件觸發(fā)：動態(tài)觸發(fā)特定DOM元素的事件 mui.trigger(element,event,data);

    5、手勢事件：介紹常用的手勢表示方法

    分類事件名說明
    點擊tap單擊屏幕
    點擊doubletap雙擊屏幕
    長按longtap長按屏幕
    長按hold按住屏幕
    長按release離開屏幕
    滑動swipeleft向左滑動
    滑動swiperight向右滑動
    滑動swipeup向上滑動
    滑動swipedown向下滑動
    拖動dragstart拖動開始
    拖動drag拖動
    拖動dragedd拖動結(jié)束

    窗口管理

    • HTML5+初始化： mui.plusReady(function(){ … });

    • 打開新窗口：mui.openWindow(參數(shù)配置對象);

    • 關(guān)閉窗口：MUI框架將窗口關(guān)閉功能封裝在mui.back方法中，具體執(zhí)行邏輯是:當前Webview為預(yù)加載頁面，則hide當前Webview；否則，close當前Webview，共有三種方法實現(xiàn)

      • 點擊class屬性中包含"mui-action-back"的控件

      • 在屏幕內(nèi)快速向右滑動：mui.init({

        swipeBack:true//啟用右滑關(guān)閉功能})

      • Android自動監(jiān)聽back鍵：

    mui.init({
	keyEventBind:{
		backbutton:true//啟用右滑關(guān)閉功能}
		});

    • 預(yù)加載：提前創(chuàng)建窗口，在跳轉(zhuǎn)時之間得到窗口，減少加載的過程

    mui.init({
  preloadPages:[
    {
      url:prelaod-page-url,//頁面路徑
      id:preload-page-id,//Webview的id
      styles:{},//窗口參數(shù)
      extras:{},//自定義擴展參數(shù)
      subpages:[{},{}]//預(yù)加載頁面的子頁面
    }
  ],
  preloadLimit:5//預(yù)加載窗口數(shù)量限制(一旦超出,先進先出)默認不限制
});

    • 子頁面：多個窗口合成一個，方便實現(xiàn)局部滾動功能

    mui.init({
    subpages:[{
      url:'list.html',
      id:'list.html',
      styles:{
        top:'45px',//mui標題欄默認高度為45px；
        bottom:'45px'//默認為0px，可不定義；
      }
    }]
  });

    到此，關(guān)于“html5 mui怎么使用”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>

    向AI問一下細節(jié)

    免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

    AI
    助
    手