當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

jQ.Mobi框架介绍

發(fā)布時(shí)間：2025/7/14 编程问答 28 豆豆

生活随笔收集整理的這篇文章主要介紹了 jQ.Mobi框架介绍小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

jQ.Mobi是基于HTML5重寫(xiě)的jQuery框架，由appMobi開(kāi)發(fā)并且開(kāi)源托管于github，在此有簡(jiǎn)易的在線文檔提供查閱。 jQ.Mobi相比于其他方案具有體積小速度快的優(yōu)勢(shì)。

jQ.Mobi由三個(gè)組件組成：

查詢（query）程序庫(kù)
jQ.ui——為webkit內(nèi)核瀏覽器提供的用戶界面程序庫(kù)
jQ.Plugin——針對(duì)webkit瀏覽器的插件支持

下面主要講解下框架的UI部分。

1 基本頁(yè)面布局

上圖即為jQ.mobi提供的基本布局，從視覺(jué)上分為三個(gè)部分頭部、內(nèi)容區(qū)域、底部，如下圖。

依照蘋(píng)果App界面設(shè)計(jì)規(guī)則：

header頭部屬于導(dǎo)航欄固定于整個(gè)應(yīng)用的頂部，主要是“你在這里”的標(biāo)志（也可承載按鈕）。
content內(nèi)容區(qū)則用于承載應(yīng)用的不同頁(yè)面。
footer底部區(qū)則屬于標(biāo)簽欄固定于整個(gè)應(yīng)用的底部，用戶可以通過(guò)點(diǎn)擊不同的標(biāo)簽到達(dá)不同的頁(yè)面。

應(yīng)用的導(dǎo)航欄和標(biāo)簽欄，通常都是固定頁(yè)面的頂部和底部，對(duì)于web app的布局中由于ios瀏覽器對(duì)于CSS的position:fixed支持很不好，因此通用的解決方案（包括jQ.mobi)都是使用絕對(duì)定位position:absolute。

對(duì)于jQ.mobi框架來(lái)說(shuō)對(duì)應(yīng)三部分的HTML代碼為:

2.jQ.Mobi中四種導(dǎo)航模型及其基本的HTML結(jié)構(gòu)

蘋(píng)果app定義了三種典型的導(dǎo)航模式再加上現(xiàn)在廣為使用的“抽屜式”導(dǎo)航，四種導(dǎo)航模型在App設(shè)計(jì)中大量使用也覆蓋了大部分應(yīng)用的需求。

2.1 標(biāo)簽欄導(dǎo)航模型

上面的圖示則是典型的標(biāo)簽欄導(dǎo)航，也是目前最為歡迎的導(dǎo)航模型。

標(biāo)簽欄固定于應(yīng)用的底部，點(diǎn)擊其中不同的標(biāo)簽即可在不同的頁(yè)面中切換，這種導(dǎo)航方式適用于不同頁(yè)面形式不一的復(fù)雜的應(yīng)用。?在jQ.Mobi中對(duì)應(yīng)的HMTL代碼為：

受限于手機(jī)屏幕分辨率，標(biāo)簽欄中標(biāo)簽最好不要超過(guò)5個(gè)，如果標(biāo)簽數(shù)量超過(guò)5個(gè)，每個(gè)標(biāo)簽寬度過(guò)小，很可發(fā)生標(biāo)簽不易點(diǎn)中的問(wèn)題，影響體驗(yàn)。而如果頁(yè)面歸類超過(guò)5個(gè)，建議的處理方案是將最后一個(gè)標(biāo)簽作為擴(kuò)展標(biāo)簽設(shè)為更多。

需要提示的是在jQ.Mobi框架中應(yīng)用的所有頁(yè)面都在一個(gè)HTML文檔中，因此標(biāo)簽欄導(dǎo)航模式中頁(yè)面切換實(shí)際上屬于錨點(diǎn)切換，其不同頁(yè)面的基本HTML代碼為：

不同的頁(yè)面包含在不同的class為panel的div中。

2.2 樹(shù)形結(jié)構(gòu)導(dǎo)航模型

上圖即為典型的樹(shù)形結(jié)構(gòu)導(dǎo)航模型，樹(shù)形結(jié)構(gòu)適用于有大量分類項(xiàng)目的頁(yè)面，其實(shí)際為大量的列表項(xiàng)。對(duì)應(yīng)的HTML代碼為：

2.3 平鋪?lái)?yè)面導(dǎo)航模型

上圖即為平鋪?lái)?yè)面導(dǎo)航模型的基本結(jié)構(gòu)，平鋪?lái)?yè)面導(dǎo)航模型的應(yīng)用中最為經(jīng)典的例子便是iphone中自帶的天氣應(yīng)用，通常此種模型使用較為簡(jiǎn)單的應(yīng)用，功能較為單一且沒(méi)有滾屏。

在jQ.Mobi框架中可以使carousel插件實(shí)現(xiàn)，其HTML代碼也較為簡(jiǎn)單：

2.4 “抽屜式”導(dǎo)航模型

上圖為“抽屜式”導(dǎo)航模型的基本結(jié)構(gòu)，抽屜式導(dǎo)航最為典型的應(yīng)用為私密社交應(yīng)用path，此種導(dǎo)航的核心思想為”隱藏“，更加能突出應(yīng)用的核型功能，而將其他次要的功能頁(yè)面（譬如設(shè)置頁(yè)面）路徑隱藏。此種導(dǎo)航模型使用核心功能單一，不戶無(wú)需頻繁切換頁(yè)面的應(yīng)用。?在jQ.Mobi框架中使用此類導(dǎo)航也十分的方面，其HTML代碼為：

而對(duì)于實(shí)際的應(yīng)用可以看出大多數(shù)的應(yīng)用并不是使用單一的導(dǎo)航模型，而是各種導(dǎo)航模型混用，至于選擇那種導(dǎo)航模型作為主導(dǎo)航，則需根據(jù)應(yīng)用的功能，使用場(chǎng)景以及用戶群體等因素綜合考慮。

3 jQ.Mobi框架細(xì)節(jié)

3.1 框架基本布局

之前提到過(guò)jQ.Mobi框架的頁(yè)面都在一個(gè)HTML的文檔中，除去導(dǎo)航欄（#header）和標(biāo)簽欄（#navbar）之外的內(nèi)容頁(yè)面都存在id為content的div當(dāng)中，三者都是絕對(duì)定位。其HTML和對(duì)應(yīng)的CSS為：

<div id="jQUi"><div id="header"></div><div id="content"></div><div id="navbar"></div> </div>

/*---CSS code---*/ #header {height : 48px; }#content {position:absolute;top:48px;bottom:62px;left:0;right:0;z-index:180; }#navbar {position:absolute;bottom:0;left:0;right:0;height:62px;z-index:1000; }

上面的即是框架最基本的布局方式，#header，#navbar固定在屏幕的上下邊，相應(yīng)#content的盒子占據(jù)了其他區(qū)域。值得注意的是#navbar的z-index遠(yuǎn)高于#content的z-index。

3.2 框架頁(yè)面切換

框架的切換頁(yè)面都包裹在class為panel的div中。

/*---panel style---*/.panel {display:none;position:absolute;width:100%;height:100%;top:0;left:0;z-index:180; }

切換頁(yè)面都在同一個(gè)HTML文檔中，panel頁(yè)面默認(rèn)設(shè)置為隱藏（display:none）使用錨鏈接跳轉(zhuǎn)，跳轉(zhuǎn)的同時(shí)需要顯示頁(yè)面的display屬性設(shè)為block，同時(shí)給需要隱藏的頁(yè)面一個(gè)向左移動(dòng)的動(dòng)畫(huà)，加之panel頁(yè)面使用絕對(duì)定位，寬度高度均鋪滿content，這樣的跳轉(zhuǎn)就達(dá)到了native應(yīng)用頁(yè)面切換的效果。

而在頁(yè)面切換時(shí)，另外的動(dòng)作就是將panel頁(yè)面中已經(jīng)定義的title屬性中的值顯示到導(dǎo)航中，并根據(jù)jQ.Mobi定義的屬性data-tab的值來(lái)選中標(biāo)簽欄對(duì)應(yīng)的標(biāo)簽。

3.3 panel屬性介紹

正如前面所言應(yīng)用的切換頁(yè)面都包裹在class為panel的div中，因此jQ.Mobi預(yù)先定義了多個(gè)屬性來(lái)應(yīng)對(duì)不同的需求。

selected="true"?當(dāng)panel設(shè)置此屬性后，在應(yīng)用打開(kāi)之后默認(rèn)加載該頁(yè)面。
modal="true"?將panel轉(zhuǎn)變?yōu)槟B(tài)視圖，框架中模態(tài)視圖默認(rèn)鋪滿整個(gè)屏幕（可在CSS中更改）。
data-header="id"?設(shè)置之后，在切換到該panel的時(shí)候?qū)?huì)加載對(duì)應(yīng)id的自定義header標(biāo)簽。
data-footer="id"?設(shè)置之后，在切換到該panel的時(shí)候?qū)?huì)加載對(duì)應(yīng)id的自定義footer標(biāo)簽。
data-nav="id"?設(shè)置之后，在切換到該panel的時(shí)候?qū)?huì)加載對(duì)應(yīng)id的自定義nav標(biāo)簽。
data-defer="filename.html"?設(shè)置此屬性之后該panel會(huì)加載遠(yuǎn)程的頁(yè)面或者url。若想將內(nèi)容分屬到不同的文件，該屬性會(huì)很有用。在所有的文件都異步加載之后jq.ui.ready才會(huì)起作用。
data-tab="anchor_id"?正如之前提到的，設(shè)置該屬性之后，在panel加載的時(shí)候?qū)?biāo)簽欄中對(duì)應(yīng)標(biāo)簽選中。而當(dāng)你通過(guò)js而不是單擊標(biāo)簽欄的標(biāo)簽來(lái)加載panel的時(shí)候此屬性同樣有用。
data-load="func_name"?設(shè)置之后，panel加載之后會(huì)運(yùn)行該名稱的js函數(shù)。div作為一個(gè)參數(shù)傳遞，因此你可以使用一個(gè)函數(shù)來(lái)是的其他的屬性起作用。
data-unload="func_name"?與data-load相似，只是在頁(yè)面關(guān)閉的時(shí)候才運(yùn)行js函數(shù)。
CSS屬性 overflow:hidden?設(shè)置之后，會(huì)禁止panel頁(yè)面的自動(dòng)滾動(dòng)。當(dāng)panel頁(yè)面需要自動(dòng)擴(kuò)展的時(shí)候該設(shè)置很有用處，例如之前提到Carousel應(yīng)用或者地圖類應(yīng)用。

jQ.Mobi允許你自定義屬性，更為詳細(xì)的介紹可以查看其在線文檔。

3.4 panel頁(yè)面滾動(dòng)實(shí)現(xiàn)方式。

因?yàn)閕os5之前版本的webview原生不支持瀏覽器滾動(dòng)，因此對(duì)于panel頁(yè)面的滾動(dòng)就不能靠CSS中的overflow屬性來(lái)實(shí)現(xiàn)了。

目前的滾動(dòng)替代方案基本是靠CSS動(dòng)畫(huà)來(lái)實(shí)現(xiàn)，jQ.Mobi中使用3D動(dòng)畫(huà)來(lái)實(shí)現(xiàn)，因?yàn)?strong>3D動(dòng)畫(huà)能夠使用瀏覽器的硬件加速，可以讓滾動(dòng)更加流暢，效果也直逼native應(yīng)用。

框架在panel頁(yè)面允許滾動(dòng)的情況下，將panel作為滾動(dòng)的容器（container），然后將panel元素的所有子元素content，再包裹一個(gè)div標(biāo)簽作為viewport，在這一層上面使用3D transform中的translate3d屬性來(lái)達(dá)到滾動(dòng)的效果，具體通過(guò)改變translate3d的Y值也就是縱軸的值來(lái)實(shí)現(xiàn)滾動(dòng)。

/*--對(duì)應(yīng)的css寫(xiě)法---*/ transform: translate3d(0, 100px, 0);

轉(zhuǎn)載于:https://www.cnblogs.com/zhepama/archive/2013/05/13/3074968.html

《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

以上是生活随笔為你收集整理的jQ.Mobi框架介绍的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： iOS设计模式(02):单例模式
下一篇：登录屏幕上不要显示上次登录的用户名图文