摘要:預加載自定義事件第三方擴展插件涉及的,除了,其它所有手機瀏覽器及瀏覽器均無法使用,目前主要包括語音輸入事件相關注意瀏覽器沒有事件事件相關的,手機端瀏覽器均可使用端模擬手機瀏覽器也可以正常使用。
最近項目中需要使用MUI做一個視頻播放的小功能。我就花時間研究了一下MUI。
MUI是一個使用JavaScript開發Android和IOS應用的前端框架。這篇文章將以知識樹的形式對MUI的使用做一個總結,一些官方文檔中的東西我都只大致提一下,如果需要詳細了解可以進入官方文檔了解詳情。
UI組件組件部分不多說,詳情可以看官方文檔。
小技巧:Dialog 組件正常情況下是無法解析HTML內容的,如果需要對Dialog 組件的內容進行定制可以將Dialog 的最后一個參數type設置為"div"。
MUI選擇器MUI的選擇器類似Jquery,主要有#id選擇器、.class選擇器 標簽選擇器,組合選擇器。
mui("#id") mui(".class") mui("input") mui("p.class")
和Jquery一樣,如果想從mui選擇器選中的元素中取出原生的DOM元素,只需取出mui("#id")[0]即可。
MUI的常用方法MUI并沒有像Jquery一樣豐富的方法,常用的方法并不多。
事件相關的方法 MUI對象方法on(event, selector, handler) 批量綁定事件
one(event, selector, handler) 批量綁定事件但是只生效一次
off([event][, selector]) 刪除事件
MUI靜態方法trigger(element, event, data) 觸發事件
fire(target, event, data) 觸發自定義事件
原生事件監聽方法addEventListener(event, handler) 單個DOM節點綁定事件
頁面初始化設置。目前支持在mui.init方法中配置的功能包括:創建子頁面、關閉頁面、手勢事件配置、預加載、下拉刷新、上拉加載、設置系統狀態欄背景顏色。
打開新頁面
關閉當前頁面
其他工具方法此部分官方文檔都寫得非常詳細,如果哪個方法不懂可以直接點擊連接跳轉至官方文檔詳細查看。
MUI對象方法遍歷
MUI靜態方法遍歷
合并多個對象
setTimeOut封裝
滾動窗口屏幕到指定位置,該方法是對window.scrollTo()方法在手機端的增強實現,可設定滾動動畫時間及滾動結束后的回調函數;鑒于手機屏幕大小,該方法僅可實現屏幕縱向滾動。
我們經常會有通過navigator.userAgent判斷當前運行環境的需求,mui對此進行了封裝,通過調用mui.os.XXX即可
plus(可以訪問的參數為:)
.plus:返回是否在 5+ App(包括流應用)運行
.stream:返回是否為流應用
Android(可以訪問的參數為:)
.android:返回是否為安卓手機
.version:安卓版本號
.isBadAndroid:android非Chrome環境
iOS(可以訪問的參數為:)
.ios:返回是否為蘋果設備
.version:返回手機版本號
.iphone:返回是否為蘋果手機
.ipad:返回是否為ipad
Wechat(可以訪問的參數為:)
.wechat:返回是否在微信中運行
AJAX方法類似JQuery主要由ajax(options)、post(url,params,callback)、get(url,params,callback),詳情可參考官方文檔。
MUI插件方法示例1:跳轉到圖片輪播的第二張圖片
mui(".mui-slider").slider().gotoItem(1);
示例2:重新開啟上拉加載
mui("#pullup-container").pullRefresh().refresh(true);MUI適用場景說明
為解決HTML5在低端Android機上的性能缺陷,mui引入了原生加速,其中最關鍵的就是webview控件,因此mui若要發揮其全部能力,需和5+ App配合適用,若脫離5+ App,mui功能會受限,主要涉及三個部分:
webview窗口相關涉及webview的,除了5+App,其它所有手機瀏覽器及PC瀏覽器均無法使用,涉及功能點包括:
webview模式窗體動畫
創建子窗口(除了為解決區域滾動的常見雙webview場景,還涉及webview模式的選項卡等多webview場景)
webview模式的側滑菜單(也有div方式側滑菜單)
webview模式的tab選項卡(也有div方式選項卡)
nativeUI,如原生的警告框、確認框、popover、actionsheet、toast。這些也有HTML5的實現。
預加載
自定義事件
第三方擴展插件涉及webview的,除了5+App,其它所有手機瀏覽器及PC瀏覽器均無法使用,目前主要包括:語音輸入;
Touch事件相關(注意pc瀏覽器沒有touch事件)Touch事件相關的,手機端瀏覽器均可使用、pc端chrome模擬手機瀏覽器也可以正常使用。
但普通PC端瀏覽器因為沒有touch事件,可以顯示控件但滑動操作功能會受限;涉及功能點包括:
手勢事件
mui封裝的tap相關處理業務:折疊面板、二級列表、二級選項卡;
mui封裝的swipe、drag相關處理業務:圖片輪播、可左右滑動的圖文表格、可左右滑動的9宮格、滑動觸發列表項菜單、可拖動式側滑菜單、下拉刷新和上拉加載、可拖動式選項卡
【備注】:在PC端,大家將tap替換成click,將HTML5默認的Drag事件替換mui 的swipe和drag,就可以解決如上兩個問題。
除上述列出的功能點,其它mui功能,均可以在其它手機瀏覽器及PC服務端使用,所有CSS均不受影響。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/101176.html
摘要:是手機端關系型數據庫的最佳方案,各種手機都支持。但是目前手機端重量數據存儲的唯一可商用方案。是里最新的數據存儲規范,但不是基于,而是基于對象。與的標準相比,的擴展主要是為了跨域。有網友封裝了一個框架,針對數據,在超過時自動切換到,參考。 總結HTML5+的離線本地存儲的多種方案: [ √ ] HTML5標準方案:cookie、localstorage、sessionstorage、w...
摘要:是手機端關系型數據庫的最佳方案,各種手機都支持。但是目前手機端重量數據存儲的唯一可商用方案。是里最新的數據存儲規范,但不是基于,而是基于對象。與的標準相比,的擴展主要是為了跨域。有網友封裝了一個框架,針對數據,在超過時自動切換到,參考。 總結HTML5+的離線本地存儲的多種方案: [ √ ] HTML5標準方案:cookie、localstorage、sessionstorage、w...
閱讀 1618·2021-11-22 13:53
閱讀 2848·2021-11-15 18:10
閱讀 2755·2021-09-23 11:21
閱讀 2491·2019-08-30 15:55
閱讀 475·2019-08-30 13:02
閱讀 752·2019-08-29 17:22
閱讀 1659·2019-08-29 13:56
閱讀 3455·2019-08-29 11:31